Performance - Acelere seu site! Na web tempo é mais que dinheiro.
27
PERFORMANCE Acelere seu site! Na web tempo é mais que dinheiro.
-
Upload
gustavo-correa-alves -
Category
Technology
-
view
426 -
download
5
Transcript of Performance - Acelere seu site! Na web tempo é mais que dinheiro.
PERFORMANCEAcelere seu site!
Na web tempo é mais que dinheiro.
Fontes: http://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg
http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
Amazon’s revenue increased 1% per 100ms of reduced loading time
Every 1second reduction in loading time correlated to a 2% increase in web traffic.Every 100ms of reduced loading time lead to an increase in incremental revenue of as much as 1%.
After Mozilla made their page 2.2 seconds quicker to load, the company saw downloads of Firefox increase by 5 million per month.
For every 400ms’ reduction in loading time, Yahoo’s traffic increased by 9%
Adopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by
50%.
No que diz respeito a performance no client-side, se uníssemos…
+ +
teríamos ninguém menos que…
=
Steve Souders
Ex Head Performance Engineer na Google, Chief Performance Yahoo! e Chief Performance Officer na Fastly.
Autor de livros e artigos sobre o assunto e criador de ferramentas que auxiliam a melhora de performance
No post "the Performance Golden Rule” Steve diz que:
80-90% of the end-user response time is spent on the front-end.
Fonte: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
SUMÁRIO• HTML
• CSS
• Javascript
• Imagens
• Dispositivos
• Servidor
• Ferramentas
RTT (Round-Trip Time)
RTT é o tempo que o cliente leva para conversar com o servidor.
Geralmente uma comunicação simples (sem configurações de cache, keep alive, CDN ou qualquer outra) entre browser e servidor inicia com pelo menos três RTTs:
1. Resolução do DNS
2. Setup de conexão TCP
3. Requisição HTTP
Processo de Renderização do Browser
1. Processar a marcação HTML e construir a árvore de DOM.
2. Processar a marcação CSS e construir a árvore de CSSOM.
3. Combinar o DOM e o CSSOM em uma árvore de renderização.
4. Executar o layout na árvore de renderização para computar a geometria de cada nó.
5. Pintar cada nó na tela.
http://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/
HTMLInserção de Javascript e CSS
Evite ao máximo usar estilos e scripts de forma inline ou incorporada, a menos que você esteja desenvolvendo uma aplicação com pouquíssimos recursos de Javascript e CSS, ou se sua aplicação for acessada apenas uma única vez. Isso beneficiaria na diminuição de requests, mas aumentaria consideravelmente o documento HTML.
Ao utilizarmos uma chamada de um arquivo externo temos o benefício do cache, modularização e reaproveitamento.
Evite
<style></style> e <script></script>;
<p style=“color :#000;”>CSS Inline</p>
<a href=“#” onclick=“funcaoJavascript(‘parametro')”>Javascript Inline</a>
Use
<link rel="stylesheet" href=“style.css”>
<script src="script.js"></script>
HTMLOnde realizar as chamadas externas de CSS?
As chamadas de arquivos CSS devem ser realizadas no início do documento, dentro da tag head.
…
<head>
<meta charset="UTF-8">
<title>Título</title>
<link rel="stylesheet" href=“style.css”>
</head>
…
Motivos:
- Renderização progressiva da página;- Evita o fenômeno FOUC (Flash of Unstyled Content);- Reduza o repaint e reflow inicial;- Causa ao usuário a "sensação" de que a página está carregando mais rápido.
HTMLOnde realizar as chamadas externas de Javascript?
As chamadas de arquivos Javascript devem ser realizadas no fim do documento, antes do fechamento tag body.
…
<script src=“script.js”></script>
</body>
</html>
Motivos:
- Evita o bloqueio da renderização da página e o usuário fique travado numa página em branco enquanto o arquivo de script não for baixado e executado.
E quanto aos atributos async e defer?
Tanto o async e defer apresentam mal funcionamento na versão oito e nove do Internet Explorer.
CSSMinifique A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas as regras CSS. Isso diminuir o tamanho em bytes dos arquivos e acelerar o download.
Antes:.p{
font-family: Arial, sans-serif;font-size: 14px;line-height: 20px;
}
Depois:.p{font-family:Arial,sans-serif;font-size:14px;color :#777;line-height:20px;}
Concatene A concatenação de arquivos diminui a quantidades de requisições HTTP.Antes:<link rel="stylesheet" href=“layout.css”><link rel="stylesheet" href=“tipografia.css”><link rel="stylesheet" href=“grid.css”>
Depois:<link rel="stylesheet" href=“main.css”>
CSSSeletores
Evite utilizar seletores super aninhados: #menu ul li a{…}use: #menu .menu-link{…}
Evite utilizar seletores qualificados: h1#titulo-pagina{…}use: #titulo-pagina{…}
Evite form[name="signup"] > fieldset > input[type="text"] {…}use a categoria mais específica possível: .form-signup .input-text {…}
A interpretação dos seletores CSS começa da direita para a esquerda.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
CSSSeletores
Evite utilizar seletor universal: #elemento *{….}use algo como: #elemento h1,#elemento p, #elemento li, #elemento label{…}
Obs.: Atenção ao seletor universal invisível. body [type=“text”]{…}
body [type="text"] = body *[type="text"]
JAVASCRIPTMinifique
A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas os scripts. Isso diminuir o tamanho dos arquivos em bytes e acelerar o download.
Antes:var square = function(x){
return x*x;};
Depois:var square=function(x){return x*x;};
Concatene
A concatenação de arquivos diminui a quantidades de requisições HTTP.Antes:<script src=“modal.js”></script><script src=“alert.js”></script><script src=“tooltip.js”></script>
Depois:
<script src=“main.js”></script>
JAVASCRIPTManipulação de DOM
A manipulação do DOM é algo custoso para o browser, sempre que possível evite-a ou pense na melhor forma de fazê-la. Nicholas C. Zacas no livro “Javascript de Alto Desempenho" faz uma analogia comparando acessar o DOM como a travessia de uma ponte. Ou seja, evite atravessar várias vezes a ponte.Evite: // o dom será acessado 10xfor (var i = 0; i < 10; i++) { document.getElementById("lista").innerHTML += "<li>" + i + "</li>";}
Use: // o dom será acessado 1xvar listaHTML = "";for (var i = 0; i < 10; i++) { listaHTML += "<li>" + i + "</li>";}document.getElementById("lista").innerHTML = listaHTML;
JAVASCRIPTCarregue Scripts de terceiros de forma Assíncrona
Scripts de terceiros tais como APIs, botões de like/share/+1, parceiros, web analytics, etc, podem onerar a aplicação no momento do carregamento caso o servidor que hospeda o mesmo esteja fora, lento, ou quem sabe bloqueado por algum serviço de Firewall da empresa que o usuário trabalha.
Exemplo: <script>var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script, scripts);</script>
JAVASCRIPTCuidado com a quantidade de Scripts de Terceiros Os scripts de terceiros podem realizar requisição de outros scripts, desencadeando um efeito cascata.
JAVASCRIPTDiminua Repaints e Reflows
A alteração de uma propriedade CSS de um elemento da página pode desencadeia um processo de re-renderização ocasionando em repaints e reflows.
Repaint - ocorre quando alteramos a aparência (cor, background, cor da borda, padding, etc) de um elemento sem necessariamente ter que recalcular o posicionamento do mesmo na página.
Reflow - ocorre quando a alteração no elemento tem impacto direto na estrutura do layout (largura, altura, posicionamento, etc). O reflow tende a ser bem oneroso, pois força o navegador recalcular a posição dos elementos na página.
JAVASCRIPTEvite bibliotecas demasiadas pesadas quando for algo simples
Atualmente existem uma gama de bibliotecas, frameworks, plugins, etc que podem auxiliar bastante o desenvolvimento do seu projeto. Porém, é necessário bom senso em saber quando realmente usá-los, dependendo da ocasião o impacto pode ser negativo na performance.jQuery
Bibliotecas como o jQuery estão sempre sendo aperfeiçoadas, portanto, procure suar as novas versões.Zepto
Zepto.js é uma biblioteca minimalista, com larga compatibilidade com a API do jQuery e mais leve. Sua utilização aconselhável quando o objetivo for simples e podemos ignorar os browsers antigos.Javascript Nativo O acesso direto usando Javascript nativo pode ser a melhor opçãoquando se deseja fazer coisas como simplesmente acessar um atributo deum elemento no DOM.
Fonte:http://jsperf.com/zepto-vs-jquery-2013/38
IMAGENSSprites
Unifique suas imagens e use CSS para exibi-ás. Essa técnica diminui o número de requisições feitas pelo site e consequentemente o tempo de carregamento.
.social-link {background: url(/assets/sprite-social.png) no-repeat top left;display: block;width: 14px;height: 14px;
}.social-facebook {
background-xposition: 0 0;}.social-instagram {
background-position: 0 -15px;}
IMAGENSIcon Fonts
Uma alternativa a técnica de sprite é usar icon fonts. Essa técnica consiste em transformar imagens em svg em fontes e importá-las no projeto utilizando propriedade @font-face do CSS.
Há vários sites que ajudam no processo como o http://icomoon.io/.
A grande vantagem da técnica é não precisar ter um sprite com inúmeras variações de tamanho e cor de imagens, uma vez que podemos manipular essas propriedas direto com CSS.
CSS@font-face {
font-family: 'icomoon';src:url('fonts/icomoon.eot?-rn4ypd');src:url('fonts/icomoon.eot?#iefix-rn4ypd') format('embedded-opentype'),
url('fonts/icomoon.woff?-rn4ypd') format('woff'),url('fonts/icomoon.ttf?-rn4ypd') format('truetype'),url('fonts/icomoon.svg?-rn4ypd#icomoon') format('svg');
font-weight: normal;font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;
/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {content: "\e600";
}.icon-instagram:before {
content: "\e601";}
HTML<span class=“icon-facebook"></span><span class="icon-instagram"></span>
IMAGENSEvite Escalar Imagens no HTML
Escalar imagens direto na página não é uma boa prática e pode afetar consideravelmente a performance da sua aplicação.Escalando para cima, ou seja aumentando, a imagem perderá qualidade podendo pixelar.Escalando para baixo, ou seja diminuindo, será carregada uma imagem desnecessariamente mais pesada.É aconselhável setar o tamanho real da imagem, pois isso evitará reflows. E manter imagens com dimensões diferentes para cada circunstância.<img src=“avatar.png” alt=“Avatar" width=“100" height=“100">
<img src=“avatar-mini.png” alt=“Avatar Menor" width=“50" height="50">
IMAGENSOtimize suas Imagens
Imagens geralmente possuem informações que são desnecessárias e que acabam acarretando em bytes a mais no tamanho do arquivo. É possível eliminar as meta informações sem impactar a qualidade final da imagem. Existem uma série de ferramentas para otimização de imagens.
PhotoshopJPEGMini - http://www.jpegmini.com/Smush It - http://www.smushit.comPNG Optimizer - http://psydk.org/pngoptimizerGrunt Imagemin - https://github.com/gruntjs/grunt-contrib-imagemin
DISPOSITIVOS: AWD, RWD OU RESS?
A versão para dispositivos do seu site é algo que deve ser muito bem estudado. Existem alguns caminhos a seguir que podem implicar consideravelmente na performance, todos eles tem seus prós e contras.
AWD (Adaptive Web Design)
A técnica consiste em identificar o dispositivo e servir conteúdo adaptado e otimizado para tal.
RWD (Responsive Web Design)
A técnica é bem simples de se aplicar, no entanto peca na performance, pois o mesmo conteúdo é serviço para todos os dispositivos.
RESS (Responsive Web Design + Server Side Components)
É uma técnica híbrida que tende a usar o melhor dos dois mundos. Usa responsive web design com componentes específicos sendo servidos via server side.
Fonte:http://visual.ly/adaptive-web-design-vs-responsive-web-design
http://www.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
SERVIDORUse um Content Delivery Network
Use o CDN para hospedar seus assets (Javascript, CSS, Imagens, Vídeos, etc). Com CDN é possível diminuir o tempo de resposta, aumentar downloads paralelos e aliviar o servidor da aplicação. Alguns CDNs otimizam o recurso no momento da entrega. Há vários serviços como o Akamai, CloudFront, CloudFlare, etc.
Compressão GZIP
Todos os navegadores modernos aceitam o método de compressão GZIP. Habilitando o módulo no servidor seus arquivos de texto (HTML, JS, CSS, XML, JSON) serão comprimidos diminuindo o tráfego de dados e acelerando o downlaod.# Exemplo no Servidor Apache editando o arquivo .htaccss
AddOutputFilterByType DEFLATE text/htm
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
Cache
O browser por padrão não realiza o cache dos arquivos, isso obriga o usuário fazer requisições desnecessárias. Determine uma data para armazenamento de cache local dos arquivos.# Exemplo no Servidor Apache editando o arquivo .htaccss
ExpiresActive On
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType text/css "access plus 3 months"
ExpiresByType application/javascript "access plus 3 months"
ExpiresByType text/javascript "access plus 3 months"
FERRAMENTASPageSpeed
O PageSpeed é uma ferramenta do Google que analisa a página dando feedback das possíveis melhorias.
YSLOW
O YSLOW é uma ferramenta do baseada nas regras de performance do Yahoo.
Chrome DevTools
O Chrome DevTools é uma ferramenta do Google Chrome. Através da ferramenta é possível analisar o carregamento da página, renderização, processamento, analisar funções Javascript e performance do CSS.
WebPageTest - www.webpagetest.org
O WebPageTest gera um relatório completo da página analisada. É considerada por alguns como a melhor ferramenta de análise de desempenho.
JSPerf - jsperf.com
Com JSPerf é possível analisar trechos de código Javascript e efetuar comparações a fim de descobrir qual oferece melhor desempenho.
Site Speed - www.sitespeed.io
É uma ferramenta open source e muito flexível. Possui comunicação com o Graphite para criação de Dashboard. Usa as regras do YSLOW, e possui integração com o WebPageTest. Você pode escrever suas regras, caso ache necessário, ou integrar com uma ferramenta própria.
Speed Curve - speedcurve.com
Ferramenta criada por Steve Souders e Mark Zeman, baseada no WebPageTest. Realiza benchmark com outros sites, analisa a versão responsiva, scripts de terceiros, possui continuous deployment, etc. Porém, é uma ferramenta paga.
New Relic
OBRIGADO!
Palestrante
Gustavo Corrêa Alves
http://www.gustavocalves.com.br
https://github.com/gcajpa
http://br.linkedin.com/in/gustavocorreaalves/
