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. 1, 2, 3... LIVE!
    Performance no frontend:
    faça suas aplicações voarem

    View Slide

  2. Carlos Antonio
    @cantoniodasilva

    View Slide

  3. @plataformatec

    View Slide

  4. Desenvolvemos
    aplicações em Rails
    @plataformatec

    View Slide

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

    View Slide

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

    View Slide

  7. Novo projeto => Yay!

    View Slide

  8. X meses depois...

    View Slide

  9. DONE!

    View Slide

  10. Hora do deploy \o/

    View Slide

  11. Setup do servidor - ruby,
    rubygems, etc...
    Setup do apache ou nginx
    Passenger
    Capistrano
    ...

    View Slide

  12. cap production deploy...
    Sucesso!

    View Slide

  13. Hora das férias?

    View Slide

  14. yeah!

    View Slide

  15. No 1º (feliz) dia de férias:
    O cliente liga: a app está
    morrendo, lenta, demora uma
    vida para carregar!

    View Slide

  16. 1 vida == 10s

    View Slide

  17. :bomb:

    View Slide

  18. Esperar é um saco.

    View Slide

  19. E a culpa é de quem?

    View Slide

  20. Ruby é lento.

    View Slide

  21. Será mesmo?

    View Slide

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

    View Slide

  23. WTF!?!

    View Slide

  24. SIM!
    A maior parte do tempo de
    renderização de uma página não é
    gasto no servidor, mas sim no
    navegador.

    View Slide

  25. Performance?
    Vamos otimizar o frontend!

    View Slide

  26. Hora do checklist!

    View Slide

  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

    View Slide

  28. Ahhhhhhhhhhh!
    Tudo isso?

    View Slide

  29. Easy!

    View Slide

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

    View Slide

  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.

    View Slide

  32. #1 Diminuir o número de requisições

    View Slide

  33. #1 Diminuir o número de requisições
    Use CSS Sprites
    Combine imagens pequenas
    em uma única imagem maior.

    View Slide

  34. #2 Utilizar um CDN
    Distribua seus assets em
    diferentes lugares, mais
    próximos do usuário.
    Akamai Technologies, EdgeCast, level3

    View Slide

  35. #2 Utilizar um CDN
    Para aplicações realmente
    grandes! $$

    View Slide

  36. #3 Evitar src ou href vazios

    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.

    View Slide

  37. #3 Evitar src ou href vazios
    E não precisamos de
    requisições que não valem nada.

    View Slide

  38. #4 Adicionar header Expires
    Diga para seu navegador
    fazer cache de assets por
    algum tempo.

    View Slide

  39. #4 Adicionar header Expires
    Mas não eternamente!
    1 mês ~ 1 ano

    View Slide

  40. #4 Adicionar header Expires
    Apache => mod_expires


    ExpiresActive On
    ExpiresDefault "access plus 1 month"


    View Slide

  41. #4 Adicionar header Expires
    Nginx => HttpHeadersModule
    if ($request_uri ~* "\.(ico|css|js|gif|jpe?g|png)$") {
    expires 30d;
    break;
    }

    View Slide

  42. #5 Habilitar Gzip
    Compacte todo texto que
    sai do seu servidor!

    View Slide

  43. #5 Habilitar Gzip
    html
    css
    javascript
    xml
    json
    etc...
    Todo texto ==

    View Slide

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

    View Slide

  45. #5 Habilitar Gzip
    Apache => mod_deflate

    AddOutputFilterByType DEFLATE text/html text/plain text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/x-javascript application/
    javascript
    AddOutputFilterByType DEFLATE application/rss+xml

    View Slide

  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;

    View Slide

  47. #6 Colocar CSS no topo
    CSS é carregado e
    interpretado mais rápido.
    Mais feedback visual
    para o usuário!




    Example App

    View Slide

  48. #7 Colocar JS no final
    Scripts bloqueiam
    downloads paralelos e
    renderização da página.

    View Slide

  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" );

    View Slide

  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.

    View Slide

  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

    View Slide

  52. #10 Reduzir Lookups DNS
    3 Lookups de DNS
    foo.com/image1.png
    bar.com/image2.png
    baz.com/image3.png

    View Slide

  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?

    View Slide

  54. #11 Minificar JS e CSS
    20 ~ 25% de ganho no
    tamanho dos arquivos.

    View Slide

  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...

    View Slide

  56. #12 Evitar redirects
    HTTP status 301 e 302 são
    extremamente custosos, e
    fazem o usuário esperar mais.

    View Slide

  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.

    View Slide

  58. #14 Configurar ETags
    Cache, cache, cache!
    Configuração de servidor
    Apache / Nginx
    ETag: "10c24bc-4ab-457e1c1f"

    View Slide

  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

    View Slide

  60. #15 Permitir cache para Ajax
    Assíncrono != Instântaneo
    Tenha os mesmos cuidados com
    cache em requisições Ajax.

    View Slide

  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.

    View Slide

  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

    View Slide

  63. #17 Reduzir o número de elementos DOM
    Cuidado com

    para montar seu layout!

    View Slide

  64. #18 Evitar 404
    Fazer uma requisição para receber
    404 é jogar tempo fora.
    Isso é muito comum com assets!

    View Slide

  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!

    View Slide

  66. #20 Usar domínios sem cookie para componentes
    Assets não precisam de cookies. Eles
    são tráfego de rede desnecessário.

    View Slide

  67. #20 Usar domínios sem cookie para componentes
    Site => www.example.org
    (www seta cookies)
    Assets => static.example.org
    (cookie-free)

    View Slide

  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

    View Slide

  69. #21 Evitar filtros
    AlphaImageLoader para corrigir
    transparência do IE < 7.
    Esqueça!

    View Slide

  70. #22 Não escalar imagens no HTML
    Imagem maior == download maior.
    Escalar no navegador == mais
    processamento para renderizar.

    View Slide

  71. #23 Ter um favicon.ico pequeno e cacheável
    É um mal necessário, então é melhor
    não responder com 404.

    View Slide

  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.

    View Slide

  73. E agora, quem poderá nos
    ajudar?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. Finalizando...

    View Slide

  80. Seu cliente não liga para isso.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  85. Otimize no frontend.
    E 80% dos seus problemas de
    performance serão resolvidos.

    View Slide

  86. No final, o que ganhamos?

    View Slide

  87. Trabalho extra! :)

    View Slide

  88. Uma web melhor!

    View Slide

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

    View Slide

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

    View Slide