1, 2, 3... LIVE!                     Performance no frontend:                   faça suas aplicações voaremMonday, October...
Carlos Antonio                        @cantoniodasilvaMonday, October 3, 11
@plataformatecMonday, October 3, 11
Desenvolvemos      aplicações em Rails                        @plataformatecMonday, October 3, 11
Desenvolvemos      aplicações em Rails                         @plataformatec         Coaching em         Rails e AgileMon...
Desenvolvemos      aplicações em Rails                         @plataformatec         Coaching em                         ...
Novo projeto => Yay!Monday, October 3, 11
X meses depois...Monday, October 3, 11
DONE!Monday, October 3, 11
Hora do deploy o/Monday, October 3, 11
Setup do servidor - ruby,                             rubygems, etc...                        Setup do apache ou nginx    ...
cap production deploy...                               Sucesso!Monday, October 3, 11
Hora das férias?Monday, October 3, 11
yeah!Monday, October 3, 11
No 1º (feliz) dia de férias:                          O cliente liga: a app está                        morrendo, lenta, d...
1 vida == 10sMonday, October 3, 11
:bomb:Monday, October 3, 11
Esperar é um saco.Monday, October 3, 11
E a culpa é de quem?Monday, October 3, 11
Ruby é lento.Monday, October 3, 11
Será mesmo?Monday, October 3, 11
80 a 90% do tempo de                         renderização é gasto no                             navegador.Monday, October...
WTF!?!Monday, October 3, 11
SIM!                 A maior parte do tempo de               renderização de uma página não é                 gasto no ser...
Performance?                        Vamos otimizar o frontend!Monday, October 3, 11
Hora do checklist!Monday, October 3, 11
#1 Diminuir o número de requisições                        #2 Utilizar um CDN                        #3 Evitar src ou href...
Ahhhhhhhhhhh!                           Tudo isso?Monday, October 3, 11
Easy!Monday, October 3, 11
#1 Diminuir o número de requisições                           Combine arquivos                         JS                 ...
#1 Diminuir o número de requisições                          Sirva 1 arquivo js e 1                        arquivo css em ...
#1 Diminuir o número de requisiçõesMonday, October 3, 11
#1 Diminuir o número de requisições                                Use CSS Sprites                        Combine imagens ...
#2 Utilizar um CDN                        Distribua seus assets em                        diferentes lugares, mais        ...
#2 Utilizar um CDN                        Para aplicações realmente                               grandes! $$Monday, Octob...
#3 Evitar src ou href vazios                               <img src="">                        Browsers constumam fazer   ...
#3 Evitar src ou href vazios                         E não precisamos de                   requisições que não valem nada....
#4 Adicionar header Expires                         Diga para seu navegador                        fazer cache de assets p...
#4 Adicionar header Expires                        Mas não eternamente!                            1 mês ~ 1 anoMonday, Oc...
#4 Adicionar header Expires                          Apache => mod_expires                        <IfModule mod_expires.c>...
#4 Adicionar header Expires                        Nginx => HttpHeadersModule                    if ($request_uri ~* ".(ic...
#5 Habilitar Gzip                        Compacte todo texto que                          sai do seu servidor!Monday, Octo...
#5 Habilitar Gzip                                                     html                                                ...
#5 Habilitar Gzip                        Até 70% de ganhos ao                        compactar usando gzip.Monday, October...
#5 Habilitar Gzip                        Apache => mod_deflate            <IfModule mod_deflate.c>             AddOutputFilt...
#5 Habilitar Gzip                        Nginx => HttpGzipModule         gzip       on;         gzip_types text/plain text...
#6 Colocar CSS no topo                              CSS é carregado e                          interpretado mais rápido.  ...
#7 Colocar JS no final                                    Scripts bloqueiam                                  downloads para...
#8 Evitar expressões CSS                        Expressões são executadas a                        cada render, resize, sc...
#9 Deixar JS e CSS em arquivos externos                        Arquivos externos podem                             ser cac...
#10 Reduzir Lookups DNS                        Muitos hosts diferentes que                           não estão cacheados, ...
#10 Reduzir Lookups DNS                        3 Lookups de DNS                         foo.com/image1.png                ...
#11 Minificar JS e CSS                         Elimine tudo que não é                         necessário dos arquivos:     ...
#11 Minificar JS e CSS                        20 ~ 25% de ganho no                        tamanho dos arquivos.Monday, Octo...
#11 Minificar JS e CSS                   Mas não faça isso manualmente!                        Existem diversas ferramentas...
#12 Evitar redirects                          HTTP status 301 e 302 são                          extremamente custosos, e ...
#13 Remover scripts duplicados                        Duplo trabalho? Quem gosta.                           É mais comum d...
#14 Configurar ETags                          Cache, cache, cache!                        Configuração de servidor          ...
#14 Configurar ETags                        Requisição 1                                         Requisição 1              ...
#15 Permitir cache para Ajax                          Assíncrono != Instântaneo                        Tenha os mesmos cui...
#16 Usar GET para requisições Ajax                         POST usa 2 etapas: 1 para enviar os                        cabe...
#17 Reduzir o número de elementos DOM                           Muitos elementos significam uma                        pági...
#17 Reduzir o número de elementos DOM                                  Cuidado com                                 <div></...
#18 Evitar 404                        Fazer uma requisição para receber                             404 é jogar tempo fora...
#19 Reduzir o tamanho dos cookies                        Cookies são enviados em TODOS os                          request...
#20 Usar domínios sem cookie para componentes                        Assets não precisam de cookies. Eles                 ...
#20 Usar domínios sem cookie para componentes                               Site => www.example.org                       ...
#20 Usar domínios sem cookie para componentes                                  Site => example.org                        ...
#21 Evitar filtros                        AlphaImageLoader para corrigir                           transparência do IE < 7....
#22 Não escalar imagens no HTML                        Imagem maior == download maior.                          Escalar no...
#23 Ter um favicon.ico pequeno e cacheável                        É um mal necessário, então é melhor                     ...
#23 Ter um favicon.ico pequeno e cacheável                         Mantenha pequeno, abaixo de 1kb.                       ...
E agora, quem poderá nos                                  ajudar?Monday, October 3, 11
YSlow                        http://developer.yahoo.com/yslow/Monday, October 3, 11
Page Speed                        http://code.google.com/speed/page-speed/Monday, October 3, 11
Smush.it                        http://www.smushit.com/ysmush.it/Monday, October 3, 11
Sprite.me                        http://spriteme.org/Monday, October 3, 11
Sucesso!                        Hora de voltar para aquelas                            merecidas férias...Monday, October ...
Finalizando...Monday, October 3, 11
Seu cliente não liga para isso.Monday, October 3, 11
Seu cliente não liga                        nem um pouco                             para isso.Monday, October 3, 11
Ele só quer resposta rápida ao                            invés de “carregando...”Monday, October 3, 11
10s não é rápido o suficiente.Monday, October 3, 11
10s não é aceitável.Monday, October 3, 11
Otimize no frontend.                        E 80% dos seus problemas de                        performance serão resolvido...
No final, o que ganhamos?Monday, October 3, 11
Trabalho extra! :)Monday, October 3, 11
Uma web melhor!Monday, October 3, 11
E lembre-se:                        Com grandes poderes vêm                        grandes responsabilidades.             ...
@cantoniodasilva         blog.plataformatec.com.br                        Obrigado!Monday, October 3, 11
Upcoming SlideShare
Loading in...5
×

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

1,595

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,595
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 1, 2, 3... LIVE! Performance no frontend: faça suas aplicações voaremMonday, October 3, 11
  2. 2. Carlos Antonio @cantoniodasilvaMonday, October 3, 11
  3. 3. @plataformatecMonday, October 3, 11
  4. 4. Desenvolvemos aplicações em Rails @plataformatecMonday, October 3, 11
  5. 5. Desenvolvemos aplicações em Rails @plataformatec Coaching em Rails e AgileMonday, October 3, 11
  6. 6. Desenvolvemos aplicações em Rails @plataformatec Coaching em Consultoria Rails e AgileMonday, October 3, 11
  7. 7. Novo projeto => Yay!Monday, October 3, 11
  8. 8. X meses depois...Monday, October 3, 11
  9. 9. DONE!Monday, October 3, 11
  10. 10. Hora do deploy o/Monday, October 3, 11
  11. 11. Setup do servidor - ruby, rubygems, etc... Setup do apache ou nginx Passenger Capistrano ...Monday, October 3, 11
  12. 12. cap production deploy... Sucesso!Monday, October 3, 11
  13. 13. Hora das férias?Monday, October 3, 11
  14. 14. yeah!Monday, October 3, 11
  15. 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. 16. 1 vida == 10sMonday, October 3, 11
  17. 17. :bomb:Monday, October 3, 11
  18. 18. Esperar é um saco.Monday, October 3, 11
  19. 19. E a culpa é de quem?Monday, October 3, 11
  20. 20. Ruby é lento.Monday, October 3, 11
  21. 21. Será mesmo?Monday, October 3, 11
  22. 22. 80 a 90% do tempo de renderização é gasto no navegador.Monday, October 3, 11
  23. 23. WTF!?!Monday, October 3, 11
  24. 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. 25. Performance? Vamos otimizar o frontend!Monday, October 3, 11
  26. 26. Hora do checklist!Monday, October 3, 11
  27. 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. 28. Ahhhhhhhhhhh! Tudo isso?Monday, October 3, 11
  29. 29. Easy!Monday, October 3, 11
  30. 30. #1 Diminuir o número de requisições Combine arquivos JS CSSMonday, October 3, 11
  31. 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. 32. #1 Diminuir o número de requisiçõesMonday, October 3, 11
  33. 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. 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. 35. #2 Utilizar um CDN Para aplicações realmente grandes! $$Monday, October 3, 11
  36. 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. 37. #3 Evitar src ou href vazios E não precisamos de requisições que não valem nada.Monday, October 3, 11
  38. 38. #4 Adicionar header Expires Diga para seu navegador fazer cache de assets por algum tempo.Monday, October 3, 11
  39. 39. #4 Adicionar header Expires Mas não eternamente! 1 mês ~ 1 anoMonday, October 3, 11
  40. 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. 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. 42. #5 Habilitar Gzip Compacte todo texto que sai do seu servidor!Monday, October 3, 11
  43. 43. #5 Habilitar Gzip html css javascript Todo texto == xml json etc...Monday, October 3, 11
  44. 44. #5 Habilitar Gzip Até 70% de ganhos ao compactar usando gzip.Monday, October 3, 11
  45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 54. #11 Minificar JS e CSS 20 ~ 25% de ganho no tamanho dos arquivos.Monday, October 3, 11
  55. 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. 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. 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. 58. #14 Configurar ETags Cache, cache, cache! Configuração de servidor Apache / Nginx ETag: "10c24bc-4ab-457e1c1f"Monday, October 3, 11
  59. 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. 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. 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. 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. 63. #17 Reduzir o número de elementos DOM Cuidado com <div></div> para montar seu layout!Monday, October 3, 11
  64. 64. #18 Evitar 404 Fazer uma requisição para receber 404 é jogar tempo fora. Isso é muito comum com assets!Monday, October 3, 11
  65. 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. 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. 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. 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. 69. #21 Evitar filtros AlphaImageLoader para corrigir transparência do IE < 7. Esqueça!Monday, October 3, 11
  70. 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. 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. 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. 73. E agora, quem poderá nos ajudar?Monday, October 3, 11
  74. 74. YSlow http://developer.yahoo.com/yslow/Monday, October 3, 11
  75. 75. Page Speed http://code.google.com/speed/page-speed/Monday, October 3, 11
  76. 76. Smush.it http://www.smushit.com/ysmush.it/Monday, October 3, 11
  77. 77. Sprite.me http://spriteme.org/Monday, October 3, 11
  78. 78. Sucesso! Hora de voltar para aquelas merecidas férias...Monday, October 3, 11
  79. 79. Finalizando...Monday, October 3, 11
  80. 80. Seu cliente não liga para isso.Monday, October 3, 11
  81. 81. Seu cliente não liga nem um pouco para isso.Monday, October 3, 11
  82. 82. Ele só quer resposta rápida ao invés de “carregando...”Monday, October 3, 11
  83. 83. 10s não é rápido o suficiente.Monday, October 3, 11
  84. 84. 10s não é aceitável.Monday, October 3, 11
  85. 85. Otimize no frontend. E 80% dos seus problemas de performance serão resolvidos.Monday, October 3, 11
  86. 86. No final, o que ganhamos?Monday, October 3, 11
  87. 87. Trabalho extra! :)Monday, October 3, 11
  88. 88. Uma web melhor!Monday, October 3, 11
  89. 89. E lembre-se: Com grandes poderes vêm grandes responsabilidades. Uncle BenMonday, October 3, 11
  90. 90. @cantoniodasilva blog.plataformatec.com.br Obrigado!Monday, October 3, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×