PERFORMANCE
Acelere seu site!
Na web tempo é mais que dinheiro.
Fontes:
http://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg
http://www.webperformancet...
No que diz respeito a performance no client-side, se uníssemos…
+ +
teríamos ninguém menos que…
=
Steve Souders
Ex Head Pe...
No post "the Performance Golden Rule” Steve diz que:
80-90% of the end-user response time is spent on the front-end.
Fonte...
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 (...
HTML
Inserção de Javascript e CSS
Evite ao máximo usar estilos e scripts de forma inline ou incorporada, a menos que você ...
HTML
Onde realizar as chamadas externas de CSS?
As chamadas de arquivos CSS devem ser realizadas no início do documento, d...
HTML
Onde realizar as chamadas externas de Javascript?
As chamadas de arquivos Javascript devem ser realizadas no fim do do...
CSS
Minifique
A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas as
regras CSS....
CSS
Seletores
Evite utilizar seletores super aninhados:
#menu ul li a{…}
use:
#menu .menu-link{…}
Evite utilizar seletores...
CSS
Seletores
Evite utilizar seletor universal:
#elemento *{….}
use algo como:
#elemento h1,
#elemento p,
#elemento li,
#e...
JAVASCRIPT
Minifique
A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando
apenas os scri...
JAVASCRIPT
Manipulação de DOM
A manipulação do DOM é algo custoso para o browser, sempre que possível
evite-a ou pense na ...
JAVASCRIPT
Carregue Scripts de terceiros de forma Assíncrona
Scripts de terceiros tais como APIs, botões de like/share/+1,...
JAVASCRIPT
Cuidado com a quantidade de Scripts de Terceiros
Os scripts de terceiros podem realizar requisição de outros sc...
JAVASCRIPT
Diminua Repaints e Reflows
A alteração de uma propriedade CSS de um elemento da página
pode desencadeia um proce...
JAVASCRIPT
Evite bibliotecas demasiadas pesadas quando for algo simples
Atualmente existem uma gama de bibliotecas, framew...
IMAGENS
Sprites
Unifique suas imagens e use CSS para exibi-ás. Essa técnica diminui o número de requisições
feitas pelo sit...
IMAGENS
Icon Fonts
Uma alternativa a técnica de
sprite é usar icon fonts. Essa
técnica consiste em
transformar imagens em ...
IMAGENS
Evite Escalar Imagens no HTML
Escalar imagens direto na página não é uma boa prática e pode afetar
consideravelmen...
IMAGENS
Otimize suas Imagens
Imagens geralmente possuem informações que são desnecessárias e que
acabam acarretando em byt...
DISPOSITIVOS:AWD, RWD OU RESS?
A versão para dispositivos do seu site é algo que deve ser muito bem estudado. Existem algu...
SERVIDOR
Use um Content Delivery Network
Use o CDN para hospedar seus assets (Javascript, CSS, Imagens,Vídeos, etc). Com C...
FERRAMENTAS
PageSpeed
O PageSpeed é uma ferramenta do Google que analisa a página dando feedback das possíveis melhorias.
...
OBRIGADO!
Palestrante
Gustavo Corrêa Alves
http://www.gustavocalves.com.br
https://github.com/gcajpa
http://br.linkedin.co...
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Upcoming SlideShare
Loading in...5
×

Performance - Acelere seu site! Na web tempo é mais que dinheiro.

445

Published on

Dicas de performance para aplicações Front end.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Performance - Acelere seu site! Na web tempo é mais que dinheiro.

  1. 1. PERFORMANCE Acelere seu site! Na web tempo é mais que dinheiro.
  2. 2. 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%.
  3. 3. 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
  4. 4. 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/
  5. 5. SUMÁRIO • HTML • CSS • Javascript • Imagens • Dispositivos • Servidor • Ferramentas
  6. 6. 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ã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/
  7. 7. 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 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>
  8. 8. 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 reflow inicial; - Causa ao usuário a "sensação" de que a página está carregando mais rápido.
  9. 9. HTML Onde 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.
  10. 10. 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”>
  11. 11. 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
  12. 12. 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"]
  13. 13. JAVASCRIPT Minifique 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>
  14. 14. 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;
  15. 15. 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>
  16. 16. JAVASCRIPT Cuidado com a quantidade de Scripts de Terceiros Os scripts de terceiros podem realizar requisição de outros scripts, desencadeando um efeito cascata.
  17. 17. 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.
  18. 18. 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
  19. 19. IMAGENS Sprites 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; }
  20. 20. 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?#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>
  21. 21. 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á 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">
  22. 22. 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 final 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
  23. 23. 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/
  24. 24. 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"
  25. 25. 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 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 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
  26. 26. OBRIGADO! Palestrante Gustavo Corrêa Alves http://www.gustavocalves.com.br https://github.com/gcajpa http://br.linkedin.com/in/gustavocorreaalves/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×