Optimização de Performance de Web Sites

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Optimização de Performance de Web Sites - Presentation Transcript

    1. Optimização de Performance de Web Sites A importância da performance no Frontend Tiago Andrade e Silva CTO Grupo Fullsix Portugal Tas [at] fullsix [dot] com
    2. Steve Souders Time Spent on the Frontend Steve Souders 8
    3. Google Time Spent on the Frontend 9
    4. Yahoo! Time Spent on the Frontend 10
    5. Time Spent on the Frontend 12
    6. Stanford Time Spent on the Frontend 13
    7. Agenda • A Importância da performance no Frontend • HTTP Overview • As Regras de optimização 14
    8. ?!Perguntas?!
    9. Backend Time Spent on the Frontend 16
    10. Frontend Time Spent on the Frontend 17
    11. Tempo Gasto no Frontend Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97% 18
    12. Para onde vai o tempo ? 9% 91%
    13. The Performance Golden Rule “Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% is spent downloading all the components in the page” 20
    14. HTTP Time Spent on the Frontend 21
    15. HTTP • Verbs: – Get – Post – Head – Put – Delete – Options – Trace 22
    16. Compression Time Spent on the Frontend 23
    17. Conditional Get Requests Time Spent on the Frontend 24
    18. Keep Alive Time Spent on the Frontend 25
    19. Pipelining Time Spent on the Frontend 26
    20. HTTP Pedido: GET /silverlight.js HTTP/1.1 Host: www.fullsix.com User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0… Accept-Encoding: gzip, deflate … Resposta: HTTP/1.1 200 OK Content-Type: text/javascript Last-Modified: Wed, 22 Feb 2008 04:15:54 GMT … Content-Encoding: gzip … 27
    21. As Regras 1. Make fewer http requests 29
    22. Rule #1 - Make fewer http requests Reduzir o número de componentes da página: imagens, scripts, css, etc. 30
    23. Como ? Time Spent on the Frontend 32
    24. Rule #1 - Make fewer http requests • Image Maps (rectangular) <MAP Name=\"mymap\"> <AREA Shape=\"circle\" Coords=\"70,84,51\" Href=\"http://www.site.com\"> <AREA Shape=\"rect\" Coords=\"25,18,8,3\" Href=\"http://www.site.com/html/\"> <AREA Shape=\"default\" Coords=\"0,0,500,300\" ref=\"http://www.fullsix.pt/\"> </MAP> <IMG Src=\"../images/imagemap.gif\" Width=\"500\" Height=\"300\" Alt=\"Image Map\" Usemap=\"#mymap\" Ismap> 33
    25. Rule #1 - Make fewer http requests • CSS Sprites <div style=“background-image: url(„sprite.gif‟); Background-position: -206px -90px; Width: 26px; height: 24px;”></div> 34
    26. Rule #1 - Make fewer http requests • Inline Images (não suportado IE7) <IMG SRC=“data:image/gif;base64,R+asdASDLKSDF343AD..”> – Max 100k em Firefox – Cache 35
    27. Rule #1 - Make fewer http requests • Combinar CSS • Combinar JS • Inline / External CSS / JS • TCP Slow Start 36
    28. As Regras 1. Make fewer http requests 2. Use a CDN 37
    29. Content Distribution Network                                                                                                         Sem CDN com CDN 38
    30. Rule #2 – Use a CDN • Aproximar conteúdo estático do utilizador – Imagens – Flash – Vídeo – Stylesheets – Script 39
    31. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 40
    32. Rule #3 – Add an Expires Header • Vai mais além que o Conditional get • Indicação para utilizar a cópia local sem consultar servidor 41
    33. Rule #3 – Add an Expires Header • Exemplo Expires Header: HTTP/1.0 200 OK Date: Tue, 10 Feb 2009 17:40:18 GMT Server: Apache/1.3.33 (Unix) PHP/4.4.0 Expires: Fri, Jan 1 2010 00:00:00 GMT … 42
    34. Rule #3 – Add an Expires Header • Deve ser utilizada em componentes que não mudem regularmente • Nomenclatura dos ficheiros 43
    35. Empty vs Primed Cache • Empty cache: 30 pedidos HTTP 194Kb transferidos 3.382 segundos • primed (mesma sessão): 1 pedido HTTP 15 cache reads 8Kb transferidos 0.515 segundos • primed (sessão diferente): 4 pedidos HTTP 28 cache reads 13Kb transferidos 0.920 segundos
    36. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 45
    37. Rule #4 – Gzip Components • Redução do tamanho dos componentes • Gzip é melhor que deflate (90% browsers) • Compromisso entre CPU e Largura de Banda 46
    38. Rule #4 – Gzip Components • O que comprimir ? – CSS, Script, XML, JSON … – Não comprimir imagens • Ganhos típicos de 70% • Proxy Caching: – Vary: Accept-Encoding – Vary: * (disable) 47
    39. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 5. Put Stylesheets at the top 48
    40. Rule #5 – Put Stylesheets at the top • Browsers bloqueiam rendering até todos CSS serem carregados (+IE)! • “Blank White Screen” e FOUC • colocar Link no HEAD. No style. 49
    41. demo Put Stylesheets at the top
    42. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 5. Put Stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 51
    43. Downloads em simultâneo • Browsers efectuam [2;8] downloads simultâneos por hostname • Optimizações: – Utilizar hostnames diferentes – Muitos downloads paralelos podem degradar performance – Ideal utilizar 2 (melhores resultados que 1, 4 ou 10) 52
    44. Rule #6 – Put Scripts at the bottom • Script bloqueia downloads em simultâneo e interfere com o render da página 53
    45. demo Put Scripts at the bottom
    46. Rule #6 – Put Scripts at the bottom • Solução para scripts bloqueados: – Colocar scripts essenciais para render no HEAD, – tudo o resto no final. • Soluções Avançadas – XHR Eval – XHR Injection – Script in Iframe – Script DOM Element – Script Defer (Só IE) <script defer src='A.js'></script> – document.write Script Tag 55
    47. Rule #7 – Avoid CSS Expressions • CSS Expressions permitem alterar dinamicamente as propriedades dos elementos (>=ie5) Background-color: expression (( new date()).getHours()%2 ? “#B8D4FF” : “#F08A00” • Reavaliadas com grande frequência • Alternativas ? – One-Time Expressions – Event Handlers • Optimização após rendering da página 56
    48. • Alive ?
    49. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 5. Put Stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make Javascript and CSS external 9. Reduce DNS lookups 58
    50. Rule #8 – Make JS+CSS External • Intuitivamente inline seria mais rápido • Cache ? • Natureza do site 59
    51. Regras #9 – Reduce DNS Lookups Browser DNS Cache Configuração TTL Reduzir nº de hosts diferentes. 60
    52. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 5. Put Stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make Javascript and CSS external 9. Reduce DNS lookups 10. Minify Javascript 11. Avoid Redirects 61
    53. Regras #10 – Minify Javascript Retirar comentários, espaços, tabs, newline,… Obfuscation 62
    54. Rule #11 – Avoid Redirects • Redirects demoram! • Falta do „/‟ Final implica um redirect (ie) 63
    55. Rule #11 – Avoid Redirects • Primeiro Pedido GET http://www.superbock.pt/SuperMovies/Motor_Pesquisa HTTP/1.1 Resposta HTTP/1.0 301 Moved Permanently Location: http://www.superbock.pt/SuperMovies/Motor%5FPesquisa/ • Segundo Pedido GET http://www.superbock.pt/SuperMovies/Motor%5FPesquisa/ HTTP/1.1 Resposta HTTP/1.0 302 Moved Temporarily Location: /SuperMovies/Motor_Pesquisa/Cinema_Pesquisa.aspx 64
    56. As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 5. Put Stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make Javascript and CSS external 9. Reduce DNS lookups 10. Minify Javascript 11. Avoid Redirects 12. Remove duplicate scripts 13. Configure Etags 14. Make ajax cacheable 65
    57. Regras #12 – Remove Duplicate Scripts Download script duplicado (FF vs IE) Tempo de Execução desperdiçado 66
    58. Rule #13 – Configure ETags • Controle de cache para além do Last- Modified • Em webfarms só prejudica • Remover se não utilizado 67
    59. Regras #14 – Make Ajax Cachable Aplicar as mesmas regras: Gzip, Reduzir DNS Minify Redirects Etags … 68
    60. Ferramentas Time Spent on the Frontend 69
    61. demo Ferramentas
    62. YSlow 71
    63. performance.webpagetest.org:8080 72
    64. Visual Round Trip Analyser
    65. HttpWatch 74
    66. IBM Page Detailer 75
    67. Fiddler 2 76
    68. A reter desta sessão: •10 a 20% Backend ; 80 a 90 % Frontend •Regra: Reduzir o nº pedidos http •Regra: Adicionar Expires Header •Ferramentas 77
    69. Blogs • http://blogs.fullsix.pt/ • http://tiagonmas.blogspot.com • Tas [a t] fullsix [ dot ] com
    70. Questionário A sua opinião é importante! Complete o questionário de avaliação e devolva-o no balcão da recepção.
    71. Software em versão completa para avaliação Suporte técnico 24x7 para incidentes Acesso antecipado às versões beta Microsoft Office Software Assurance formação gratuita ….e muito mais. w w w. m i c r o s o f t . c o m / p o r t u g a l / m s d n / s u b s c r i c o e s
    72. w w w. m i c r o s o f t . c o m / l e a r n i n g / m c p / o f f e r s / s e c o n d s h o t
    73. MSDN Flash w w w. m i c r o s o f t . c o m / p o r t u g a l / m s d n / m s d n f l a s h
    74. Participe nos próximos ciclos Traga Amigos a assistir e … …ganhe uma Xbox, trolleys e livros w w w. m i c r o s o f t . c o m / p o r t u g a l / m s d n / w e b c a s t s 4 s h a r e
    75. [BI] Resort GASP GetCertified GetVirtual Mundo Móvel PocketPT PontoNetPT UC’ed ScrumPT ZoomIn
    76. Q&A
    77. Instituto Superior Técnico Campus do Taguspark

    + Tiago Andrade e SilvaTiago Andrade e Silva, 8 months ago

    custom

    705 views, 2 favs, 1 embeds more stats

    Slides da apresentação "WUX303 - Optimização de more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 705
      • 704 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 15
    Most viewed embeds
    • 1 views on http://www.fachak.com

    more

    All embeds
    • 1 views on http://www.fachak.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories