Acelere seu site

PERFORMANCE
Acelere 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 Ofﬁcer 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 conﬁguraçõ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ãoTCP
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/

HTML
Inserçã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 beneﬁciaria 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>

HTML
Onde 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 reﬂow inicial;
- Causa ao usuário a "sensação" de que a página está carregando mais rápido.

HTML
Onde realizar as chamadas externas de Javascript?
As chamadas de arquivos Javascript devem ser realizadas no ﬁm 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 ﬁque 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.

CSS
Minifique
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”>

CSS
Seletores
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

CSS
Seletores
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"]

JAVASCRIPT
Miniﬁque
A miniﬁcaçã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>

JAVASCRIPT
Manipulaçã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 10x
for (var i = 0; i < 10; i++) {
document.getElementById("lista").innerHTML += "<li>" + i + "</li>";
}
Use:
// o dom será acessado 1x
var listaHTML = "";
for (var i = 0; i < 10; i++) {
listaHTML += "<li>" + i + "</li>";
}
document.getElementById("lista").innerHTML = listaHTML;

JAVASCRIPT
Carregue 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>

JAVASCRIPT
Cuidado com a quantidade de Scripts de Terceiros
Os scripts de terceiros podem realizar requisição de outros scripts, desencadeando um efeito cascata.

JAVASCRIPT
Diminua 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.

JAVASCRIPT
Evite 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ção
quando se deseja fazer coisas como simplesmente acessar um atributo de
um elemento no DOM.
Fonte:
http://jsperf.com/zepto-vs-jquery-2013/38

IMAGENS
Sprites
Uniﬁque 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;
}

IMAGENS
Icon 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?#ieﬁx-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>

IMAGENS
Evite 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á
reﬂows. 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">

IMAGENS
Otimize 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 ﬁnal da
imagem.
Existem uma série de ferramentas para otimização de imagens.
Photoshop
JPEGMini - http://www.jpegmini.com/
Smush It - http://www.smushit.com
PNG Optimizer - http://psydk.org/pngoptimizer
Grunt 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 identiﬁcar 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íﬁcos 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/

SERVIDOR
Use 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"

FERRAMENTAS
PageSpeed
O PageSpeed é uma ferramenta do Google que analisa a página dando feedback das possíveis melhorias.
YSLOW
OYSLOW é uma ferramenta do baseada nas regras de performance doYahoo.
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 ﬁm de descobrir qual oferece melhor desempenho.
Site Speed - www.sitespeed.io
É uma ferramenta open source e muito ﬂexível. Possui comunicação com o Graphite para criação de Dashboard. Usa as regras doYSLOW, 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/

Acelere seu site

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Acelere seu site

Similar a Acelere seu site (20)

Acelere seu site