Upgrade to Pro — share decks privately, control downloads, hide ads and more …

1,2,3 Live! Frontend Optimizations @ GuruSC

1,2,3 Live! Frontend Optimizations @ GuruSC

77237b97a465ae5a293ad323b7296837?s=128

Carlos Antonio

October 01, 2011
Tweet

Transcript

  1. 1, 2, 3... LIVE! Performance no frontend: faça suas aplicações

    voarem
  2. Carlos Antonio @cantoniodasilva

  3. @plataformatec

  4. Desenvolvemos aplicações em Rails @plataformatec

  5. Desenvolvemos aplicações em Rails Coaching em Rails e Agile @plataformatec

  6. Desenvolvemos aplicações em Rails Consultoria Coaching em Rails e Agile

    @plataformatec
  7. Novo projeto => Yay!

  8. X meses depois...

  9. DONE!

  10. Hora do deploy \o/

  11. Setup do servidor - ruby, rubygems, etc... Setup do apache

    ou nginx Passenger Capistrano ...
  12. cap production deploy... Sucesso!

  13. Hora das férias?

  14. yeah!

  15. No 1º (feliz) dia de férias: O cliente liga: a

    app está morrendo, lenta, demora uma vida para carregar!
  16. 1 vida == 10s

  17. :bomb:

  18. Esperar é um saco.

  19. E a culpa é de quem?

  20. Ruby é lento.

  21. Será mesmo?

  22. 80 a 90% do tempo de renderização é gasto no

    navegador.
  23. WTF!?!

  24. SIM! A maior parte do tempo de renderização de uma

    página não é gasto no servidor, mas sim no navegador.
  25. Performance? Vamos otimizar o frontend!

  26. Hora do checklist!

  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ável
  28. Ahhhhhhhhhhh! Tudo isso?

  29. Easy!

  30. #1 Diminuir o número de requisições Combine arquivos JS CSS

  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 desenvolvimento. Mas o usuário não precisa disso. Jammit, Asset Packager, Rails 3.1 asset pipeline, etc.
  32. #1 Diminuir o número de requisições

  33. #1 Diminuir o número de requisições Use CSS Sprites Combine

    imagens pequenas em uma única imagem maior.
  34. #2 Utilizar um CDN Distribua seus assets em diferentes lugares,

    mais próximos do usuário. Akamai Technologies, EdgeCast, level3
  35. #2 Utilizar um CDN Para aplicações realmente grandes! $$

  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.
  37. #3 Evitar src ou href vazios E não precisamos de

    requisições que não valem nada.
  38. #4 Adicionar header Expires Diga para seu navegador fazer cache

    de assets por algum tempo.
  39. #4 Adicionar header Expires Mas não eternamente! 1 mês ~

    1 ano
  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>
  41. #4 Adicionar header Expires Nginx => HttpHeadersModule if ($request_uri ~*

    "\.(ico|css|js|gif|jpe?g|png)$") { expires 30d; break; }
  42. #5 Habilitar Gzip Compacte todo texto que sai do seu

    servidor!
  43. #5 Habilitar Gzip html css javascript xml json etc... Todo

    texto ==
  44. #5 Habilitar Gzip Até 70% de ganhos ao compactar usando

    gzip.
  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>
  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;
  47. #6 Colocar CSS no topo CSS é carregado e interpretado

    mais rápido. Mais feedback visual para o usuário! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example App</title> <link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />
  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>
  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" );
  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.
  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 DNS
  52. #10 Reduzir Lookups DNS 3 Lookups de DNS foo.com/image1.png bar.com/image2.png

    baz.com/image3.png
  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?
  54. #11 Minificar JS e CSS 20 ~ 25% de ganho

    no tamanho dos arquivos.
  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...
  56. #12 Evitar redirects HTTP status 301 e 302 são extremamente

    custosos, e fazem o usuário esperar mais.
  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.
  58. #14 Configurar ETags Cache, cache, cache! Configuração de servidor Apache

    / Nginx ETag: "10c24bc-4ab-457e1c1f"
  59. #14 Configurar ETags Padrão Otimizado 304 Not modifed 200 OK

    Requisição 1 Requisição 2 200 OK Requisição 1 Requisição 2 + ETag em cache 200 OK + ETag Servidor envia header ETag junto com o componente requisitado. Navegador requisita o componente novamente, enviando ETag em cache. Servidor retorna 304 se a ETag do componente não mudou. If-None-Match
  60. #15 Permitir cache para Ajax Assíncrono != Instântaneo Tenha os

    mesmos cuidados com cache em requisições Ajax.
  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.
  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('*').length
  63. #17 Reduzir o número de elementos DOM Cuidado com <div></div>

    para montar seu layout!
  64. #18 Evitar 404 Fazer uma requisição para receber 404 é

    jogar tempo fora. Isso é muito comum com assets!
  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!
  66. #20 Usar domínios sem cookie para componentes Assets não precisam

    de cookies. Eles são tráfego de rede desnecessário.
  67. #20 Usar domínios sem cookie para componentes Site => www.example.org

    (www seta cookies) Assets => static.example.org (cookie-free)
  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.org
  69. #21 Evitar filtros AlphaImageLoader para corrigir transparência do IE <

    7. Esqueça!
  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" />
  71. #23 Ter um favicon.ico pequeno e cacheável É um mal

    necessário, então é melhor não responder com 404.
  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.
  73. E agora, quem poderá nos ajudar?

  74. YSlow http://developer.yahoo.com/yslow/

  75. Page Speed http://code.google.com/speed/page-speed/

  76. Smush.it http://www.smushit.com/ysmush.it/

  77. Sprite.me http://spriteme.org/

  78. Sucesso! Hora de voltar para aquelas merecidas férias...

  79. Finalizando...

  80. Seu cliente não liga para isso.

  81. Seu cliente não liga nem um pouco para isso.

  82. Ele só quer resposta rápida ao invés de “carregando...”

  83. 10s não é rápido o suficiente.

  84. 10s não é aceitável.

  85. Otimize no frontend. E 80% dos seus problemas de performance

    serão resolvidos.
  86. No final, o que ganhamos?

  87. Trabalho extra! :)

  88. Uma web melhor!

  89. E lembre-se: Com grandes poderes vêm grandes responsabilidades. Uncle Ben

  90. @cantoniodasilva blog.plataformatec.com.br Obrigad o!