Web Performance Client Side

2.347 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.347
No SlideShare
0
A partir de incorporações
0
Número de incorporações
29
Ações
Compartilhamentos
0
Downloads
45
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web Performance Client Side

  1. 1. WEB PERFORMANCE CLIENT-SIDE
  2. 2. SITES LENTOS
  3. 3. RAIVA
  4. 4. FRUSTRAÇÃO
  5. 5. ABANDONO
  6. 6. O QUE É?
  7. 7. ESCALAR UM SITE PARA MILHÕES DE USUÁRIOS
  8. 8. Receber a página do servidor: 200 ms Carregar a página no browser: 3,8 s TOTAL = 4 s
  9. 9. Otimizando server time em 50% 200 ms -> 100 ms
  10. 10. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  11. 11. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  12. 12. DE 80 A 90% DO TEMPO PARA CARREGAR UM SITE É USADO PARA BAIXAR COMPONENTES DA PÁGINA: IMAGENS, CSS, SCRIPTS, FLASH, ETC.
  13. 13. POR QUÊ?
  14. 14. NÚMEROS
  15. 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. 16. Um delay de 400ms causou uma redução de 0.59% em buscas por usuário
  17. 17. 2 segundos causou uma redução de Demora de 4,3% em receita por usuário
  18. 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. 19. Usuários que experimentam load times mais rápidos visualizam 50% mais páginas por visita
  20. 20. Redução de 2 para 1 segundo em load time, reduziu Exit Rate de 15% para 10%
  21. 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. 22. QUEM?
  23. 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. 24. COMO?
  25. 25. YSLOW
  26. 26. PAGE SPEED
  27. 27. SAFARI
  28. 28. INICIATIVAS
  29. 29. YAHOO Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  30. 30. GOOGLE Let’s make the web faster http://code.google.com/speed/
  31. 31. REDUZIR O NÚMERO DE CONEXÕES HTTP
  32. 32. AGRUPAR ARQUIVOS CSS E JS EM ARQUIVOS ÚNICOS E CACHEADOS
  33. 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. 34. Na view: <%= javascript_include_tag :all, :cache => true %> HTML gerado: <script type="text/javascript" src="/javascripts/all.js"></script>
  35. 35. Na view: <%= javascript_include_tag :all, :cache => “shop” %> HTML gerado: <script type="text/javascript" src="/javascripts/shop.js"></script>
  36. 36. Na view: <%= stylesheet_link_tag :all, :cache => “styles” %> HTML gerado: <link href="/stylesheets/styles.css" media="screen" rel="stylesheet" type="text/css" />
  37. 37. CSS SPRITES
  38. 38. a.buy { transparent url(/images/sprites.gif) no-repeat scroll -358px -268px; }
  39. 39. DIVIDIR COMPONENTES ENTRE DOMÍNIOS
  40. 40. css.static.mysite.com img.static.mysite.com scripts.static.mysite.com
  41. 41. 2 CONEXÕES EM PARALELO
  42. 42. 4 CONEXÕES EM PARALELO
  43. 43. 8 CONEXÕES EM PARALELO
  44. 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. 45. FIREFOX about:config network.http.max-persistent-connections- per-server
  46. 46. IE Chave no Registro
  47. 47. USAR UMA CDN Content Delivery Network
  48. 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. 49. SERVIÇOS PÚBLICOS Google AJAX Libraries YUI hosting on Yahoo! network (somente javascript)
  50. 50. SERVIÇOS PAGOS Amazon Cloudfront S3 Akamai
  51. 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. 52. ARQUIVOS ESTÁTICOS NÃO EXPIRAM NUNCA
  53. 53. AO MUDAR UM ARQUIVO, ADICIONAR UM TIMESTAMP À QUERYSTRING OU AO NOME DE ARQUIVO
  54. 54. DICA: NÃO USAR TIMESTAMP NA QUERYSTRING <link href="/stylesheets/ styles.css?20090815142059“ media="screen" rel="stylesheet" type="text/css" />
  55. 55. USAR TIMESTAMP NO NOME DE ARQUIVO <link href="/stylesheets/ styles.20090815142059.css“ media="screen" rel="stylesheet" type="text/css" />
  56. 56. .htaccess RewriteRule ^(.+).(d{14}).(js|css|png|gif|jpg)$ $1.$3 [L]
  57. 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. 58. ETAG É uma chave para verificar se uma página ainda é a mesma Etag: "620b360455bf03e96951d2…"
  59. 59. LAST_MODIFIED Quando uma página foi modificada pela última vez?
  60. 60. GZIPAR COMPONENTES CSS, HTML, Scripts (imagens, PDF, Flash já são compactados)
  61. 61. 90% dos browsers atuais suportam gzip
  62. 62. STYLESHEETS NO TOPO DA PÁGINA
  63. 63. Páginas ‘parecem’ carregar mais rapidamente HTML sendo montado serve como indicação do carregamento da página
  64. 64. JAVASCRIPTS NO FINAL DA PÁGINA
  65. 65. Scripts bloqueiam downloads paralelos Scripts com document.write Atributo DEFER
  66. 66. EVITAR EXPRESSÕES CSS
  67. 67. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Eventos são executados muitas vezes (gerando processamento adicional)
  68. 68. USAR JAVASCRIPT E CSS EXTERNAMENTE
  69. 69. Exceção: Sites com poucos pageviews por sessão podem se beneficiar de usar javascript e CSS embutidos diretamente no HTML
  70. 70. REDUZIR QUERIES DNS
  71. 71. Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4 hostnames diferentes.
  72. 72. Google Chrome acelera navegação fazendo pre-resolv de links
  73. 73. REDUZIR TAMANHO DE ARQUIVOS JS E CSS (MINIFY)
  74. 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. 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. 76. EVITAR REDIRECTS Conexões desnecessárias
  77. 77. HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
  78. 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. 79. REMOVER SCRIPTS DUPLICADOS Isso acontece!
  80. 80. CACHEAR AJAX
  81. 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. 82. EM REQUISIÇÕES AJAX USE O MÉTODO GET
  83. 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. 84. POST LOAD DE COMPONENTES
  85. 85. Drag-and-drop Animações Imagens e vídeos depois do “fold”
  86. 86. YUI Image Loader YUI Get utility
  87. 87. PRE LOAD DE COMPONENTES
  88. 88. UNCONDITIONAL PRELOAD Assim que o evento “onLoad” é disparado, sua página começa a baixar alguns componentes extras.
  89. 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. 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. 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. 92. ANTICIPATED PRELOAD “O novo site é legal, mas está mais lento do que antes”
  93. 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. 94. REDUZIR A QUANTIDADE ELEMENTOS DOM Buscar otimização de markup
  95. 95. document.getElementsByTagName('*').length
  96. 96. REDUZIR USO DE IFRAMES
  97. 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. 98. IFRAMES compartilham o pool de conexões do browser, deixando o site mais lento
  99. 99. SEM ERROS 404 Em scripts, css, imagens
  100. 100. REDUZIR TAMANHO DE COOKIES
  101. 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. 102. DOMÍNIOS SEM COOKIES PARA COMPONENTES Browser não deve enviar cookies ao requisitar css, scripts e imagens
  103. 103. SMART EVENT HANDLERS Event Handling vs. Event Delegation
  104. 104. EVENT HANDLING Atachar eventos a vários links dentro de um DIV
  105. 105. PROBLEMAS Muitos eventos atachados Memory Leaks Possibilidade alta de crash Degradação de performance Precisa atachar eventos novamente, caso o DOM mude
  106. 106. EVENT BUBBLING Atachar eventos a um elemento-pai (um DIV por exemplo) e capturar os eventos de seus links
  107. 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. 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. 109. NÃO USAR @IMPORT
  110. 110. <link rel='stylesheet' href='a.css'>
  111. 111. <style> @import url('a.css'); </style>
  112. 112. <link rel='stylesheet' href='a.css'> <style> @import url('b.css'); </style> IE 6,7,8
  113. 113. Dentro do HTML: <link rel='stylesheet' href='a.css'> Dentro de a.css: @import url('b.css'); Todos os browsers
  114. 114. <link rel='stylesheet' href='a.css'> <link rel='stylesheet' href='b.css'> Downloads em paralelo (em todos os browsers)
  115. 115. OTIMIZAÇÃO DE IMAGENS
  116. 116. Verificar se GIFs estão usando tamanho de paleta de cores adequada Converter GIFs para PNG
  117. 117. Otimizar PNG pngcrush image.png -rem alla -reduce - brute result.png Otimizar JPG jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  118. 118. OTIMIZAÇÃO DE CSS SPRITES
  119. 119. Arranjar imagens horizontalmente geralmente resulta em arquivos menores Manter cores similares dentro do sprite, idealmente dentro de 256 cores, para usar PNG8
  120. 120. SELETORES CSS EFICIENTES
  121. 121. SELETOR-CHAVE Primeiro elemento à direita. Quanto mais abrangente, pior DIV.content * { }
  122. 122. Não qualificar regras de ID com tags ou classes BAD! button#backButton { } .menu-left#newMenuIcon { } GOOD! #backButton { } #newMenuIcon { }
  123. 123. Não qualificar regras de Classe com tags BAD! span.indented { } GOOD! .span-indented { }
  124. 124. USAR ARQUIVOS JS QUE SÓ CONTENHAM CÓDIGO QUE SERÁ USADO NA PÁGINA Framework YUI
  125. 125. COLOQUE O TAMANHO DAS IMAGENS NO HTML Não colocar valores menoresou maiores do que o tamanho real da imagem
  126. 126. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  127. 127. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  128. 128. FAVICON.ICO PEQUENO E CACHEÁVEL
  129. 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. 130. QUANDO?
  131. 131. SEMPRE!
  132. 132. AS EQUIPES MUDAM OS FRAMEWORKS MUDAM AS NECESSIDADES MUDAM MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE
  133. 133. LIVROS
  134. 134. High Performance Web Sites: Essential Knowledge for Front-End Engineers (Steve Souders)
  135. 135. Even Faster Web Sites: Performance Best Practices for Web Developers (Steve Souders)
  136. 136. BLOGS High Performance Web Sites blog http://www.stevesouders.com/blog/
  137. 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. 138. EVENTOS Velocity http://en.oreilly.com/velocity2009
  139. 139. DÚVIDAS?
  140. 140. OBRIGADO! FT-SITE http://levycarneiro.com

×