Optimização de Performance de Web Sites

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

Instituto Superior Técnico Campus do Taguspark

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

Optimização de Performance de Web Sites

by Tiago Andrade e Silva

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 12

Statistics

Optimização de Performance de Web Sites Presentation Transcript