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=\"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

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