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.

Like this presentation? Why not share!

Optimização de Performance de Web Sites

on

  • 3,733 views

Slides da apresentação "WUX303 - Optimização de Performance de Web Sites". DevDays 09. IST Taguspark. 19 Fevereiro 2009. Tiago Andrade e Silva. Fullsix Portugal. ...

Slides da apresentação "WUX303 - Optimização de Performance de Web Sites". DevDays 09. IST Taguspark. 19 Fevereiro 2009. Tiago Andrade e Silva. Fullsix Portugal.

Resumo:
Na experiência de navegação numa página Web, a maior parte do tempo é gasto após o HTML chegar por completo ao browser do cliente, ou seja, no carregamento de componentes diversos como imagens, scripts, css, etc. Nesta apresentação veremos as 14 regras para melhorar a performance e User Experience do seu site sugeridas por Steve Souders no seu livro “High Performance Web Sites” .

http://blogs.fullsix.pt/2009/02/21/optimizao-de-performance-de-web-sites/

http://www.devdays09.com/DevdaysDetalhe-MX/OptimizacaodePerformancedeWebSites?ChID=5BB241AA-D836-4811-8676-725921F849CA&CID=9E03A6F6-439B-45AE-B880-00143856E35B

Statistics

Views

Total Views
3,733
Views on SlideShare
3,715
Embed Views
18

Actions

Likes
3
Downloads
61
Comments
1

5 Embeds 18

http://www.linkedin.com 6
http://www.slideshare.net 5
https://www.linkedin.com 4
http://www.fachak.com 2
http://www.lmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • Steve Souders Time Spent on the Frontend Steve Souders 8
  • Google Time Spent on the Frontend 9
  • Yahoo! Time Spent on the Frontend 10
  • Time Spent on the Frontend 12
  • Stanford Time Spent on the Frontend 13
  • Agenda • A Importância da performance no Frontend • HTTP Overview • As Regras de optimização 14
  • ?!Perguntas?!
  • Backend Time Spent on the Frontend 16
  • Frontend Time Spent on the Frontend 17
  • 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
  • Para onde vai o tempo ? 9% 91%
  • 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
  • HTTP Time Spent on the Frontend 21
  • HTTP • Verbs: – Get – Post – Head – Put – Delete – Options – Trace 22
  • Compression Time Spent on the Frontend 23
  • Conditional Get Requests Time Spent on the Frontend 24
  • Keep Alive Time Spent on the Frontend 25
  • Pipelining Time Spent on the Frontend 26
  • 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
  • As Regras 1. Make fewer http requests 29
  • Rule #1 - Make fewer http requests Reduzir o número de componentes da página: imagens, scripts, css, etc. 30
  • Como ? Time Spent on the Frontend 32
  • Rule #1 - Make fewer http requests • Image Maps (rectangular) <MAP Name=quot;mymapquot;> <AREA Shape=quot;circlequot; Coords=quot;70,84,51quot; Href=quot;http://www.site.comquot;> <AREA Shape=quot;rectquot; Coords=quot;25,18,8,3quot; Href=quot;http://www.site.com/html/quot;> <AREA Shape=quot;defaultquot; Coords=quot;0,0,500,300quot; ref=quot;http://www.fullsix.pt/quot;> </MAP> <IMG Src=quot;../images/imagemap.gifquot; Width=quot;500quot; Height=quot;300quot; Alt=quot;Image Mapquot; Usemap=quot;#mymapquot; Ismap> 33
  • 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
  • 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
  • Rule #1 - Make fewer http requests • Combinar CSS • Combinar JS • Inline / External CSS / JS • TCP Slow Start 36
  • As Regras 1. Make fewer http requests 2. Use a CDN 37
  • Content Distribution Network                                                                                                         Sem CDN com CDN 38
  • Rule #2 – Use a CDN • Aproximar conteúdo estático do utilizador – Imagens – Flash – Vídeo – Stylesheets – Script 39
  • As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 40
  • 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
  • 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
  • Rule #3 – Add an Expires Header • Deve ser utilizada em componentes que não mudem regularmente • Nomenclatura dos ficheiros 43
  • 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
  • As Regras 1. Make fewer http requests 2. Use a CDN 3. Add an expires header 4. Gzip components 45
  • Rule #4 – Gzip Components • Redução do tamanho dos componentes • Gzip é melhor que deflate (90% browsers) • Compromisso entre CPU e Largura de Banda 46
  • 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
  • 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
  • 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
  • demo Put Stylesheets at the top
  • 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
  • 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
  • Rule #6 – Put Scripts at the bottom • Script bloqueia downloads em simultâneo e interfere com o render da página 53
  • demo Put Scripts at the bottom
  • 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
  • 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
  • • Alive ?
  • 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
  • Rule #8 – Make JS+CSS External • Intuitivamente inline seria mais rápido • Cache ? • Natureza do site 59
  • Regras #9 – Reduce DNS Lookups Browser DNS Cache Configuração TTL Reduzir nº de hosts diferentes. 60
  • 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
  • Regras #10 – Minify Javascript Retirar comentários, espaços, tabs, newline,… Obfuscation 62
  • Rule #11 – Avoid Redirects • Redirects demoram! • Falta do „/‟ Final implica um redirect (ie) 63
  • 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
  • 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
  • Regras #12 – Remove Duplicate Scripts Download script duplicado (FF vs IE) Tempo de Execução desperdiçado 66
  • Rule #13 – Configure ETags • Controle de cache para além do Last- Modified • Em webfarms só prejudica • Remover se não utilizado 67
  • Regras #14 – Make Ajax Cachable Aplicar as mesmas regras: Gzip, Reduzir DNS Minify Redirects Etags … 68
  • Ferramentas Time Spent on the Frontend 69
  • demo Ferramentas
  • YSlow 71
  • performance.webpagetest.org:8080 72
  • Visual Round Trip Analyser
  • HttpWatch 74
  • IBM Page Detailer 75
  • Fiddler 2 76
  • 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
  • Blogs • http://blogs.fullsix.pt/ • http://tiagonmas.blogspot.com • Tas [a t] fullsix [ dot ] com
  • Questionário A sua opinião é importante! Complete o questionário de avaliação e devolva-o no balcão da recepção.
  • 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
  • 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
  • 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
  • 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
  • [BI] Resort GASP GetCertified GetVirtual Mundo Móvel PocketPT PontoNetPT UC’ed ScrumPT ZoomIn
  • Q&A
  • Instituto Superior Técnico Campus do Taguspark