Web Performance Client Side
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Performance Client Side

on

  • 3,348 views

 

Statistics

Views

Total Views
3,348
Views on SlideShare
3,322
Embed Views
26

Actions

Likes
6
Downloads
44
Comments
0

1 Embed 26

http://www.slideshare.net 26

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Performance Client Side Presentation Transcript

  • 1. WEB PERFORMANCE CLIENT-SIDE
  • 2. SITES LENTOS
  • 3. RAIVA
  • 4. FRUSTRAÇÃO
  • 5. ABANDONO
  • 6. O QUE É?
  • 7. ESCALAR UM SITE PARA MILHÕES DE USUÁRIOS
  • 8. Receber a página do servidor: 200 ms Carregar a página no browser: 3,8 s TOTAL = 4 s
  • 9. Otimizando server time em 50% 200 ms -> 100 ms
  • 10. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  • 11. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  • 12. DE 80 A 90% DO TEMPO PARA CARREGAR UM SITE É USADO PARA BAIXAR COMPONENTES DA PÁGINA: IMAGENS, CSS, SCRIPTS, FLASH, ETC.
  • 13. POR QUÊ?
  • 14. NÚMEROS
  • 15. Otimizações em imagens tornaram o site de2x a 3x mais rápido, com significante aumento de interação com o usuário
  • 16. Um delay de 400ms causou uma redução de 0.59% em buscas por usuário
  • 17. 2 segundos causou uma redução de Demora de 4,3% em receita por usuário
  • 18. Redesign de 1 ano reduziu o load time de 7 para 2 segundos, com aumento de 7 a 12% em receita e redução de 50% em custos de hardware
  • 19. Usuários que experimentam load times mais rápidos visualizam 50% mais páginas por visita
  • 20. Redução de 2 para 1 segundo em load time, reduziu Exit Rate de 15% para 10%
  • 21. “When an interface is faster, you feel good. You feel in control. The web app isn't controlling me, I'm controlling it.” Matt Mullenweg (Criador do Wordpress)
  • 22. QUEM?
  • 23. STEVE SOUDERS - Trabalha para o Google em iniciativas de performance Web e Open Source; - Ex-Yahoo e criador do plugin YSlow; - Palestrante em conferências como OSCON, Web 2.0 Expo e Velocity.
  • 24. COMO?
  • 25. YSLOW
  • 26. PAGE SPEED
  • 27. SAFARI
  • 28. INICIATIVAS
  • 29. YAHOO Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  • 30. GOOGLE Let’s make the web faster http://code.google.com/speed/
  • 31. REDUZIR O NÚMERO DE CONEXÕES HTTP
  • 32. AGRUPAR ARQUIVOS CSS E JS EM ARQUIVOS ÚNICOS E CACHEADOS
  • 33. RUBY ON RAILS Na view: <%= javascript_include_tag :all %> HTML gerado: <script type="text/javascript“ src="/javascripts/prototype.js"></script> <script type="text/javascript" src="/javascripts/effects.js"></script> <script type="text/javascript" src="/javascripts/app.js"></script> <script type="text/javascript" src="/javascripts/shop.js"></script> <script type="text/javascript" src="/javascripts/check.js"></script>
  • 34. Na view: <%= javascript_include_tag :all, :cache => true %> HTML gerado: <script type="text/javascript" src="/javascripts/all.js"></script>
  • 35. Na view: <%= javascript_include_tag :all, :cache => “shop” %> HTML gerado: <script type="text/javascript" src="/javascripts/shop.js"></script>
  • 36. Na view: <%= stylesheet_link_tag :all, :cache => “styles” %> HTML gerado: <link href="/stylesheets/styles.css" media="screen" rel="stylesheet" type="text/css" />
  • 37. CSS SPRITES
  • 38. a.buy { transparent url(/images/sprites.gif) no-repeat scroll -358px -268px; }
  • 39. DIVIDIR COMPONENTES ENTRE DOMÍNIOS
  • 40. css.static.mysite.com img.static.mysite.com scripts.static.mysite.com
  • 41. 2 CONEXÕES EM PARALELO
  • 42. 4 CONEXÕES EM PARALELO
  • 43. 8 CONEXÕES EM PARALELO
  • 44. CONEXÕES PARALELAS POR BROWSER Browser HTTP/1.1 HTTP/1.0 IE 6,7 2 4 IE 8 6 6 Firefox 2 2 8 Firefox 3 6 6 Safari 3,4 4 4 Chrome 1,2 6 ? Opera 9.63,10a 4 4
  • 45. FIREFOX about:config network.http.max-persistent-connections- per-server
  • 46. IE Chave no Registro
  • 47. USAR UMA CDN Content Delivery Network
  • 48. YAHOO! Sites do Yahoo! que moveram seu conteúdo estático para uma CDN tiveram uma melhora de20% ou mais no tempo de carregamento do site
  • 49. SERVIÇOS PÚBLICOS Google AJAX Libraries YUI hosting on Yahoo! network (somente javascript)
  • 50. SERVIÇOS PAGOS Amazon Cloudfront S3 Akamai
  • 51. USAR CONTROLES DE CACHE Sem isto usuários visitam um site baixando as mesmas imagens, scripts e CSS (que raramente são atualizados) todas as vezes que acessam o site
  • 52. ARQUIVOS ESTÁTICOS NÃO EXPIRAM NUNCA
  • 53. AO MUDAR UM ARQUIVO, ADICIONAR UM TIMESTAMP À QUERYSTRING OU AO NOME DE ARQUIVO
  • 54. DICA: NÃO USAR TIMESTAMP NA QUERYSTRING <link href="/stylesheets/ styles.css?20090815142059“ media="screen" rel="stylesheet" type="text/css" />
  • 55. USAR TIMESTAMP NO NOME DE ARQUIVO <link href="/stylesheets/ styles.20090815142059.css“ media="screen" rel="stylesheet" type="text/css" />
  • 56. .htaccess RewriteRule ^(.+).(d{14}).(js|css|png|gif|jpg)$ $1.$3 [L]
  • 57. MAX_AGE Define que o conteúdo de uma página é válido por N segundos Cache-Control: max-age=600 (se o botão Refresh for usado, o browser baixa o conteúdo novamente)
  • 58. ETAG É uma chave para verificar se uma página ainda é a mesma Etag: "620b360455bf03e96951d2…"
  • 59. LAST_MODIFIED Quando uma página foi modificada pela última vez?
  • 60. GZIPAR COMPONENTES CSS, HTML, Scripts (imagens, PDF, Flash já são compactados)
  • 61. 90% dos browsers atuais suportam gzip
  • 62. STYLESHEETS NO TOPO DA PÁGINA
  • 63. Páginas ‘parecem’ carregar mais rapidamente HTML sendo montado serve como indicação do carregamento da página
  • 64. JAVASCRIPTS NO FINAL DA PÁGINA
  • 65. Scripts bloqueiam downloads paralelos Scripts com document.write Atributo DEFER
  • 66. EVITAR EXPRESSÕES CSS
  • 67. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Eventos são executados muitas vezes (gerando processamento adicional)
  • 68. USAR JAVASCRIPT E CSS EXTERNAMENTE
  • 69. Exceção: Sites com poucos pageviews por sessão podem se beneficiar de usar javascript e CSS embutidos diretamente no HTML
  • 70. REDUZIR QUERIES DNS
  • 71. Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4 hostnames diferentes.
  • 72. Google Chrome acelera navegação fazendo pre-resolv de links
  • 73. REDUZIR TAMANHO DE ARQUIVOS JS E CSS (MINIFY)
  • 74. JQUERY 1.3.2 (Sem compressão) (function(){ var // Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, (…)
  • 75. JQUERY 1.3.2 (Compressão) (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},
  • 76. EVITAR REDIRECTS Conexões desnecessárias
  • 77. HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
  • 78. Opening http://www.somesite.com HTTP request sent, awaiting response… 302 Found Location: http://www.somesite.com/default.html HTTP request sent, awaiting response... 200 OK
  • 79. REMOVER SCRIPTS DUPLICADOS Isso acontece!
  • 80. CACHEAR AJAX
  • 81. Exemplo: Usuário baixa lista de contatos no Gmail. Se esta lista não muda frequentemente, esta resposta Ajax deve estar cacheada no browser. E devidamente identificada com um serial na URL, para diferenciar quando houver uma atualização na lista de contatos.
  • 82. EM REQUISIÇÕES AJAX USE O MÉTODO GET
  • 83. Ao usar XMLHttpRequest, o método POST faz 2 conexões TCP para enviar dados. Já o método GET faz somente 1 conexão.
  • 84. POST LOAD DE COMPONENTES
  • 85. Drag-and-drop Animações Imagens e vídeos depois do “fold”
  • 86. YUI Image Loader YUI Get utility
  • 87. PRE LOAD DE COMPONENTES
  • 88. UNCONDITIONAL PRELOAD Assim que o evento “onLoad” é disparado, sua página começa a baixar alguns componentes extras.
  • 89. Google.com: uma sprite image é carregada no “onLoad”. Esta imagem não é usada em google.com, mas somente nas páginas seguintes, no resultado da busca.
  • 90. CONDITIONAL PRELOAD Baseado na ação do usuário a página faz um “chute” para onde o usuário deverá ir em seguida, e carrega previamente os componentes necessários.
  • 91. Search.yahoo.com: você pode ver como alguns componentes extras são requisitados depois que você começa a digitar na caixa de busca.
  • 92. ANTICIPATED PRELOAD “O novo site é legal, mas está mais lento do que antes”
  • 93. Usuários visitando site novo com empty cache. Pré-carregar componentes ainda no site antigo, enquanto o browser está ocioso, requisitando imagens e scripts que serão usados no layout novo.
  • 94. REDUZIR A QUANTIDADE ELEMENTOS DOM Buscar otimização de markup
  • 95. document.getElementsByTagName('*').length
  • 96. REDUZIR USO DE IFRAMES
  • 97. O evento “onLoad” só é disparado quando o browser termina de carregar todos os iframes, e os componentes dentro destes iframes. Até lá, o browser mostra o ícone de “ocupado”, e o usuário tem a sensação de site mais lento.
  • 98. IFRAMES compartilham o pool de conexões do browser, deixando o site mais lento
  • 99. SEM ERROS 404 Em scripts, css, imagens
  • 100. REDUZIR TAMANHO DE COOKIES
  • 101. Eliminar quando não for necessário Reduzir tamanho Somente para informações estritamente necessárias (dados da sessão devem ficar no banco de dados)
  • 102. DOMÍNIOS SEM COOKIES PARA COMPONENTES Browser não deve enviar cookies ao requisitar css, scripts e imagens
  • 103. SMART EVENT HANDLERS Event Handling vs. Event Delegation
  • 104. EVENT HANDLING Atachar eventos a vários links dentro de um DIV
  • 105. PROBLEMAS Muitos eventos atachados Memory Leaks Possibilidade alta de crash Degradação de performance Precisa atachar eventos novamente, caso o DOM mude
  • 106. EVENT BUBBLING Atachar eventos a um elemento-pai (um DIV por exemplo) e capturar os eventos de seus links
  • 107. VANTAGENS Usa menos memória Página fica mais ágil Fácil de usar Eventos centralizados em um único trecho de código (manutenção)
  • 108. // event delegation var setup = function() { document.onclick = function(e) { e = e || window.event; var t = e.target || e.srcElement; // Pegando um link dentro de uma lista if (t.nodeName.toLowerCase() === 'a‘ && t.parentNode.getElementsByTagName('ul').length>0) { doSomethingElse(); } return false; } }; window.onload = setup;
  • 109. NÃO USAR @IMPORT
  • 110. <link rel='stylesheet' href='a.css'>
  • 111. <style> @import url('a.css'); </style>
  • 112. <link rel='stylesheet' href='a.css'> <style> @import url('b.css'); </style> IE 6,7,8
  • 113. Dentro do HTML: <link rel='stylesheet' href='a.css'> Dentro de a.css: @import url('b.css'); Todos os browsers
  • 114. <link rel='stylesheet' href='a.css'> <link rel='stylesheet' href='b.css'> Downloads em paralelo (em todos os browsers)
  • 115. OTIMIZAÇÃO DE IMAGENS
  • 116. Verificar se GIFs estão usando tamanho de paleta de cores adequada Converter GIFs para PNG
  • 117. Otimizar PNG pngcrush image.png -rem alla -reduce - brute result.png Otimizar JPG jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  • 118. OTIMIZAÇÃO DE CSS SPRITES
  • 119. Arranjar imagens horizontalmente geralmente resulta em arquivos menores Manter cores similares dentro do sprite, idealmente dentro de 256 cores, para usar PNG8
  • 120. SELETORES CSS EFICIENTES
  • 121. SELETOR-CHAVE Primeiro elemento à direita. Quanto mais abrangente, pior DIV.content * { }
  • 122. Não qualificar regras de ID com tags ou classes BAD! button#backButton { } .menu-left#newMenuIcon { } GOOD! #backButton { } #newMenuIcon { }
  • 123. Não qualificar regras de Classe com tags BAD! span.indented { } GOOD! .span-indented { }
  • 124. USAR ARQUIVOS JS QUE SÓ CONTENHAM CÓDIGO QUE SERÁ USADO NA PÁGINA Framework YUI
  • 125. COLOQUE O TAMANHO DAS IMAGENS NO HTML Não colocar valores menoresou maiores do que o tamanho real da imagem
  • 126. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  • 127. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  • 128. FAVICON.ICO PEQUENO E CACHEÁVEL
  • 129. Sem 404 Manter pequeno, até 1KB Expires setado (mas não 10 anos à frente). Ao precisar mudar o ícone, você não poderá renomeá-lo
  • 130. QUANDO?
  • 131. SEMPRE!
  • 132. AS EQUIPES MUDAM OS FRAMEWORKS MUDAM AS NECESSIDADES MUDAM MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE
  • 133. LIVROS
  • 134. High Performance Web Sites: Essential Knowledge for Front-End Engineers (Steve Souders)
  • 135. Even Faster Web Sites: Performance Best Practices for Web Developers (Steve Souders)
  • 136. BLOGS High Performance Web Sites blog http://www.stevesouders.com/blog/
  • 137. VÍDEOS Curso - High Performance Web Sites http://www.stevesouders.com/blog/200 9/05/20/stanford-videos-available/ Speed Up Your JavaScript http://www.youtube.com/watch?v=mHt dZgou0qU
  • 138. EVENTOS Velocity http://en.oreilly.com/velocity2009
  • 139. DÚVIDAS?
  • 140. OBRIGADO! FT-SITE http://levycarneiro.com