1,2,3 live! fronted optimizations @ guru sc - 2011.10.01

  • 1,495 views
Uploaded on

A maior parte do tempo gasto para abrir uma página normalmente não é no servidor, mas no cliente, no navegador. …

A maior parte do tempo gasto para abrir uma página normalmente não é no servidor, mas no cliente, no navegador.

Este é uma revisão sobre o porquê disto, e como podemos agir de forma ativa para melhorar drasticamente a performance de aplicações web.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,495
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
9
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 1, 2, 3... LIVE! Performance no frontend: faça suas aplicações voaremMonday, October 3, 11
  • 2. Carlos Antonio @cantoniodasilvaMonday, October 3, 11
  • 3. @plataformatecMonday, October 3, 11
  • 4. Desenvolvemos aplicações em Rails @plataformatecMonday, October 3, 11
  • 5. Desenvolvemos aplicações em Rails @plataformatec Coaching em Rails e AgileMonday, October 3, 11
  • 6. Desenvolvemos aplicações em Rails @plataformatec Coaching em Consultoria Rails e AgileMonday, October 3, 11
  • 7. Novo projeto => Yay!Monday, October 3, 11
  • 8. X meses depois...Monday, October 3, 11
  • 9. DONE!Monday, October 3, 11
  • 10. Hora do deploy o/Monday, October 3, 11
  • 11. Setup do servidor - ruby, rubygems, etc... Setup do apache ou nginx Passenger Capistrano ...Monday, October 3, 11
  • 12. cap production deploy... Sucesso!Monday, October 3, 11
  • 13. Hora das férias?Monday, October 3, 11
  • 14. yeah!Monday, October 3, 11
  • 15. No 1º (feliz) dia de férias: O cliente liga: a app está morrendo, lenta, demora uma vida para carregar!Monday, October 3, 11
  • 16. 1 vida == 10sMonday, October 3, 11
  • 17. :bomb:Monday, October 3, 11
  • 18. Esperar é um saco.Monday, October 3, 11
  • 19. E a culpa é de quem?Monday, October 3, 11
  • 20. Ruby é lento.Monday, October 3, 11
  • 21. Será mesmo?Monday, October 3, 11
  • 22. 80 a 90% do tempo de renderização é gasto no navegador.Monday, October 3, 11
  • 23. WTF!?!Monday, October 3, 11
  • 24. SIM! A maior parte do tempo de renderização de uma página não é gasto no servidor, mas sim no navegador.Monday, October 3, 11
  • 25. Performance? Vamos otimizar o frontend!Monday, October 3, 11
  • 26. Hora do checklist!Monday, October 3, 11
  • 27. #1 Diminuir o número de requisições #2 Utilizar um CDN #3 Evitar src ou href vazios #4 Adicionar header Expires #5 Habilitar Gzip #6 Colocar CSS no topo #7 Colocar JS no final #8 Evitar expressões CSS #9 Deixar JS e CSS em arquivos externos #10 Reduzir Lookups DNS #11 Minificar JS e CSS #12 Evitar redirects #13 Remover scripts duplicados #14 Configurar ETags #15 Permitir cache para Ajax #16 Usar GET para requisições Ajax #17 Reduzir o número de elementos DOM #18 Evitar 404 #19 Reduzir o tamanho dos cookies #20 Usar domínios sem cookie para componentes #21 Evitar filtros #22 Não escalar imagens no HTML #23 Ter um favicon.ico pequeno e cacheávelMonday, October 3, 11
  • 28. Ahhhhhhhhhhh! Tudo isso?Monday, October 3, 11
  • 29. Easy!Monday, October 3, 11
  • 30. #1 Diminuir o número de requisições Combine arquivos JS CSSMonday, October 3, 11
  • 31. #1 Diminuir o número de requisições Sirva 1 arquivo js e 1 arquivo css em produção. Arquivos separados ajudam a organizar em Jammit, Asset Packager, Rails 3.1 asset pipeline, etc. desenvolvimento. Mas o usuário não precisa disso.Monday, October 3, 11
  • 32. #1 Diminuir o número de requisiçõesMonday, October 3, 11
  • 33. #1 Diminuir o número de requisições Use CSS Sprites Combine imagens pequenas em uma única imagem maior.Monday, October 3, 11
  • 34. #2 Utilizar um CDN Distribua seus assets em diferentes lugares, mais próximos do usuário. Akamai Technologies, EdgeCast, level3Monday, October 3, 11
  • 35. #2 Utilizar um CDN Para aplicações realmente grandes! $$Monday, October 3, 11
  • 36. #3 Evitar src ou href vazios <img src=""> Browsers constumam fazer uma nova requisição para a página atual. Isso está definido em RFC, então em teoria os browsers estão fazendo o correto. Browsers novos ignoram isso. HTML 5 adicionou na RFC instrução para ignorar src/href vazios.Monday, October 3, 11
  • 37. #3 Evitar src ou href vazios E não precisamos de requisições que não valem nada.Monday, October 3, 11
  • 38. #4 Adicionar header Expires Diga para seu navegador fazer cache de assets por algum tempo.Monday, October 3, 11
  • 39. #4 Adicionar header Expires Mas não eternamente! 1 mês ~ 1 anoMonday, October 3, 11
  • 40. #4 Adicionar header Expires Apache => mod_expires <IfModule mod_expires.c> <FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$"> ExpiresActive On ExpiresDefault "access plus 1 month" </FilesMatch> </IfModule>Monday, October 3, 11
  • 41. #4 Adicionar header Expires Nginx => HttpHeadersModule if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") { expires 30d; break; }Monday, October 3, 11
  • 42. #5 Habilitar Gzip Compacte todo texto que sai do seu servidor!Monday, October 3, 11
  • 43. #5 Habilitar Gzip html css javascript Todo texto == xml json etc...Monday, October 3, 11
  • 44. #5 Habilitar Gzip Até 70% de ganhos ao compactar usando gzip.Monday, October 3, 11
  • 45. #5 Habilitar Gzip Apache => mod_deflate <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/x-javascript application/ javascript AddOutputFilterByType DEFLATE application/rss+xml </IfModule>Monday, October 3, 11
  • 46. #5 Habilitar Gzip Nginx => HttpGzipModule gzip on; gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;Monday, October 3, 11
  • 47. #6 Colocar CSS no topo CSS é carregado e interpretado mais rápido. <!DOCTYPE html> Mais feedback visual <html> para o usuário! <head> <meta charset="UTF-8"> <title>Example App</title> <link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />Monday, October 3, 11
  • 48. #7 Colocar JS no final Scripts bloqueiam downloads paralelos e renderização da página. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> </body> </html>Monday, October 3, 11
  • 49. #8 Evitar expressões CSS Expressões são executadas a cada render, resize, scroll, ou movimento do mouse! background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );Monday, October 3, 11
  • 50. #9 Deixar JS e CSS em arquivos externos Arquivos externos podem ser cacheados. Js/css inline, não. Remover do html também diminui o tamanho final da página.Monday, October 3, 11
  • 51. #10 Reduzir Lookups DNS Muitos hosts diferentes que não estão cacheados, significam mais tempo para lookup de DNS. Navegadores possuem cache de DNS, e cada navegador expira isso em um tempo diferente. 100~120 ms por lookup de DNSMonday, October 3, 11
  • 52. #10 Reduzir Lookups DNS 3 Lookups de DNS foo.com/image1.png bar.com/image2.png baz.com/image3.pngMonday, October 3, 11
  • 53. #11 Minificar JS e CSS Elimine tudo que não é necessário dos arquivos: espaços, comentários, etc. Diferença entre minificar e obfuscar?Monday, October 3, 11
  • 54. #11 Minificar JS e CSS 20 ~ 25% de ganho no tamanho dos arquivos.Monday, October 3, 11
  • 55. #11 Minificar JS e CSS Mas não faça isso manualmente! Existem diversas ferramentas para ajudar nesse processo. Closure Compiler,YUI Compressor, UglifyJS, Packer, JSMin, CSSMin, etc...Monday, October 3, 11
  • 56. #12 Evitar redirects HTTP status 301 e 302 são extremamente custosos, e fazem o usuário esperar mais.Monday, October 3, 11
  • 57. #13 Remover scripts duplicados Duplo trabalho? Quem gosta. É mais comum do que imaginamos. Um estudo do Yahoo mostrou que 2 dos 10 sites mais acessados dos EUA possuía scripts duplicados.Monday, October 3, 11
  • 58. #14 Configurar ETags Cache, cache, cache! Configuração de servidor Apache / Nginx ETag: "10c24bc-4ab-457e1c1f"Monday, October 3, 11
  • 59. #14 Configurar ETags Requisição 1 Requisição 1 200 OK 200 OK + ETag Requisição 2 + Requisição 2 ETag em cache 200 OK 304 Not modifed Padrão Otimizado Ser vidor envia header ETag junto com o componente requisitado. Navegador requisita o componente novamente, enviando ETag em cache. Ser vidor retorna 304 se a ETag do componente não mudou. If-None-MatchMonday, October 3, 11
  • 60. #15 Permitir cache para Ajax Assíncrono != Instântaneo Tenha os mesmos cuidados com cache em requisições Ajax.Monday, October 3, 11
  • 61. #16 Usar GET para requisições Ajax POST usa 2 etapas: 1 para enviar os cabeçalhos, outro para enviar o body. Não quer dizer que não é para usar POST. Quer dizer: não use POST por usar.Monday, October 3, 11
  • 62. #17 Reduzir o número de elementos DOM Muitos elementos significam uma página complexa de renderizar, e mais lenta para acessar usando javascript. document.getElementsByTagName(*).lengthMonday, October 3, 11
  • 63. #17 Reduzir o número de elementos DOM Cuidado com <div></div> para montar seu layout!Monday, October 3, 11
  • 64. #18 Evitar 404 Fazer uma requisição para receber 404 é jogar tempo fora. Isso é muito comum com assets!Monday, October 3, 11
  • 65. #19 Reduzir o tamanho dos cookies Cookies são enviados em TODOS os requests, inclusive para assets. Quanto menor o tamanho dos cookies, melhor!Monday, October 3, 11
  • 66. #20 Usar domínios sem cookie para componentes Assets não precisam de cookies. Eles são tráfego de rede desnecessário.Monday, October 3, 11
  • 67. #20 Usar domínios sem cookie para componentes Site => www.example.org (www seta cookies) Assets => static.example.org (cookie-free)Monday, October 3, 11
  • 68. #20 Usar domínios sem cookie para componentes Site => example.org (seta cookies) Assets => static.example.org (seta cookies - já era) Use outro host diferente static-example.orgMonday, October 3, 11
  • 69. #21 Evitar filtros AlphaImageLoader para corrigir transparência do IE < 7. Esqueça!Monday, October 3, 11
  • 70. #22 Não escalar imagens no HTML Imagem maior == download maior. Escalar no navegador == mais processamento para renderizar. <img width="100" height="100" src="mycat.jpg" alt="My Cat" />Monday, October 3, 11
  • 71. #23 Ter um favicon.ico pequeno e cacheável É um mal necessário, então é melhor não responder com 404.Monday, October 3, 11
  • 72. #23 Ter um favicon.ico pequeno e cacheável Mantenha pequeno, abaixo de 1kb. Define um header Expires para alguns meses no futuro. Não coloque muito tempo de Expires, pois o seu nome não pode ser mudado para expirar o cache.Monday, October 3, 11
  • 73. E agora, quem poderá nos ajudar?Monday, October 3, 11
  • 74. YSlow http://developer.yahoo.com/yslow/Monday, October 3, 11
  • 75. Page Speed http://code.google.com/speed/page-speed/Monday, October 3, 11
  • 76. Smush.it http://www.smushit.com/ysmush.it/Monday, October 3, 11
  • 77. Sprite.me http://spriteme.org/Monday, October 3, 11
  • 78. Sucesso! Hora de voltar para aquelas merecidas férias...Monday, October 3, 11
  • 79. Finalizando...Monday, October 3, 11
  • 80. Seu cliente não liga para isso.Monday, October 3, 11
  • 81. Seu cliente não liga nem um pouco para isso.Monday, October 3, 11
  • 82. Ele só quer resposta rápida ao invés de “carregando...”Monday, October 3, 11
  • 83. 10s não é rápido o suficiente.Monday, October 3, 11
  • 84. 10s não é aceitável.Monday, October 3, 11
  • 85. Otimize no frontend. E 80% dos seus problemas de performance serão resolvidos.Monday, October 3, 11
  • 86. No final, o que ganhamos?Monday, October 3, 11
  • 87. Trabalho extra! :)Monday, October 3, 11
  • 88. Uma web melhor!Monday, October 3, 11
  • 89. E lembre-se: Com grandes poderes vêm grandes responsabilidades. Uncle BenMonday, October 3, 11
  • 90. @cantoniodasilva blog.plataformatec.com.br Obrigado!Monday, October 3, 11