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

Carlos Antonio

October 01, 2011
Tweet

More Decks by Carlos Antonio

Other Decks in Programming

Transcript

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

    app está morrendo, lenta, demora uma vida para carregar!
  2. SIM! A maior parte do tempo de renderização de uma

    página não é gasto no servidor, mas sim no navegador.
  3. #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
  4. #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.
  5. #1 Diminuir o número de requisições Use CSS Sprites Combine

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

    mais próximos do usuário. Akamai Technologies, EdgeCast, level3
  7. #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.
  8. #3 Evitar src ou href vazios E não precisamos de

    requisições que não valem nada.
  9. #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>
  10. #4 Adicionar header Expires Nginx => HttpHeadersModule if ($request_uri ~*

    "\.(ico|css|js|gif|jpe?g|png)$") { expires 30d; break; }
  11. #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>
  12. #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;
  13. #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" />
  14. #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>
  15. #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" );
  16. #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.
  17. #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
  18. #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?
  19. #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...
  20. #12 Evitar redirects HTTP status 301 e 302 são extremamente

    custosos, e fazem o usuário esperar mais.
  21. #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.
  22. #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
  23. #15 Permitir cache para Ajax Assíncrono != Instântaneo Tenha os

    mesmos cuidados com cache em requisições Ajax.
  24. #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.
  25. #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
  26. #18 Evitar 404 Fazer uma requisição para receber 404 é

    jogar tempo fora. Isso é muito comum com assets!
  27. #19 Reduzir o tamanho dos cookies Cookies são enviados em

    TODOS os requests, inclusive para assets. Quanto menor o tamanho dos cookies, melhor!
  28. #20 Usar domínios sem cookie para componentes Assets não precisam

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

    (www seta cookies) Assets => static.example.org (cookie-free)
  30. #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
  31. #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" />
  32. #23 Ter um favicon.ico pequeno e cacheável É um mal

    necessário, então é melhor não responder com 404.
  33. #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.