Plop

High Performance Web Sites 14 rules for faster-loading pages Steve Souders [email_address] Tenni Theurer [email_address]

Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object]

Scope ,[object Object],[object Object],[object Object],[object Object],[object Object]

Rough Cuts: now Hardcopy: Summer 2007 http://www.oreilly.com/catalog/9780596514211/

The Importance of Front-End Performance

Back-end vs. Front-end percentage of time spent on the front-end 95% 97% youtube.com 88% 95% yahoo.com 88% 80% wikipedia.org 86% 96% myspace.com 95% 97% msn.com 64% 86% google.com 92% 98% ebay.com 92% 81% cnn.com 86% 94% aol.com 86% 82% amazon.com Full Cache Empty Cache

The Performance Golden Rule ,[object Object],[object Object],[object Object],[object Object]

Schedule ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

slow crawl boring snail stagnant unexceptional yawn unresponsive impatient delay moderate blah subdue drag apathetic prolong slack load sluggish sleepy late unexciting reduced lag complex heavy unmemorable obscure why wait perceived response time what is the end user’s experience? performance speed enjoyable urgent instant accelerate perception snap achievement better improve action pleasant pace quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting

User Perception ,[object Object],[object Object],[object Object]

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

80/20 Performance Rule ,[object Object],[object Object],[object Object],[object Object]

Empty vs. Full Cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com

Empty vs. Full Cache with an empty cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com

Empty vs. Full Cache Expires header 3 user re-requests www.yahoo.com with a full cache 1 user requests www.yahoo.com 2 user requests other web pages

Empty vs. Full Cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How much does this benefit our users? ,[object Object],[object Object],[object Object],[object Object]

Browser Cache Experiment ,[object Object],[object Object],[object Object],[object Object],[object Object],} 1 px

Browser Cache Experiment ,[object Object],[object Object],[object Object]

Browser Cache Experiment total # of 200 responses # of 200 + # of 304 responses What percentage of page views are done with an empty cache? # unique users with at least one 200 response total # unique users What percentage of users view with an empty cache? } 1 px

Surprising Results 40-60% ~20% page views with empty cache users with empty cache

Experiment Takeaways ,[object Object],[object Object]

http://yuiblog.com/blog/2007/03/01/performance-research-part-3

HTTP Quick Review HTTP response header sent by the web server: HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com 1 user requests www.yahoo.com

HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: finance.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 2 user requests finance.yahoo.com

HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: autos.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz ; 1 user requests www.yahoo.com 3 user requests autos.yahoo.com

HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: mail.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 4 user requests mail.yahoo.com

HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: tech.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 5 user requests tech.yahoo.com

Impact of Cookies on Response Time 80 ms delay dialup users +78 ms 156 ms 3000 bytes +63 ms 141 ms 2500 bytes +47 ms 125 ms 2000 bytes +31 ms 109 ms 1500 bytes +16 ms 94 ms 1000 bytes +1 ms 79 ms 500 bytes 0 ms 78 ms 0 bytes Delta Time Cookie Size keep sizes low

Analysis of Cookie Sizes across the Web 500 bytes MySpace 331 bytes eBay 268 bytes MSN 218 bytes YouTube 184 bytes CNN 122 bytes Yahoo 72 bytes Google 60 bytes Amazon Total Cookie Size

Experiment Takeaways ,[object Object],[object Object],[object Object],[object Object],[object Object]

Parallel Downloads Two components in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF

Parallel Downloads Two in parallel Four in parallel Eight in parallel

Maximizing Parallel Downloads response time (seconds) aliases

Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases

Experiment Takeaways ,[object Object],[object Object],[object Object]

Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

14 Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 1: Make fewer HTTP requests ,[object Object],[object Object],[object Object],[object Object]

Image maps ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.w3.org/TR/html401/struct/objects.html#h-13.6

CSS Sprites – Preferred ,[object Object],[object Object],http://alistapart.com/articles/sprites <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"> </span>

Inline Images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://tools.ietf.org/html/rfc2397

Combined Scripts, Combined Stylesheets 3 7 youtube.com 1.5 6.5 Average 1 4 yahoo.com 1 3 wikipedia.org 2 2 myspace.com 1 9 msn.com 1 1 froogle.google.com 2 7 ebay.com 2 11 cnn.com 1 18 aol.com 1 3 amazon.com Stylesheets Scripts

Combined Scripts, Combined Stylesheets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 2: Use a CDN ,[object Object],youtube.com Akamai yahoo.com wikipedia.org Akamai, Limelight myspace.com SAVVIS msn.com google.com Akamai, Mirror Image ebay.com cnn.com Akamai aol.com Akamai amazon.com

Rule 3: Add an Expires header ,[object Object],26 days 0% 0/7 0/3 0/32 youtube.com 100% 75% 0% 80% 4% 55% 1% 48% 0% % n/a 4/4 1/1 23/23 yahoo.com 1 day 2/3 1/1 6/8 wikipedia.org 1 day 0/2 0/2 0/18 myspace.com 34 days 3/9 1/1 32/35 msn.com 454 days 0/1 0/1 1/23 froogle.google.com 140 days 0/7 0/2 16/20 ebay.com 227 days 2/11 0/2 0/138 cnn.com 217 days 6/18 1/1 23/43 aol.com 114 days 0/3 0/1 0/62 amazon.com Median Age Scripts Stylesheets Images

Rule 4: Gzip components ,[object Object],[object Object]

Gzip vs. Deflate Gzip compresses more Gzip supported in more browsers Deflate Gzip 67% 4.7K 73% 3.7K 14.1K Stylesheet 52% 0.5K 56% 0.4K 1.0K Stylesheet 58% 16.6K 64% 14.5K 39.7K Script 66% 1.1K 67% 1.1K 3.3K Script Savings Size Savings Size Size

Gzip: not just for HTML ,[object Object],some some x youtube.com x x x yahoo.com x x x wikipedia.org x x x myspace.com deflate deflate x msn.com x x x froogle.google.com x ebay.com cnn.com some some x aol.com x amazon.com Stylesheets Scripts HTML

Gzip Configuration ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],needed for proxies

Gzip Edge Cases ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 5: Put CSS at the top ,[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 6: Move scripts to the bottom ,[object Object],[object Object],[object Object],[object Object]

Rule 7: Avoid CSS expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

One-Time Expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Event Handlers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 8: Make JS and CSS external ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Post-Onload Download ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Dynamic Inlining ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 9: Reduce DNS lookups ,[object Object],[object Object],[object Object]

TTL (Time To Live) TTL – how long record can be cached browser settings override TTL 5 minutes www.youtube.com 1 minute www.yahoo.com 1 hour www.wikipedia.org 1 hour www.myspace.com 5 minutes www.msn.com 5 minutes www.google.com 1 hour www.ebay.com 10 minutes www.cnn.com 1 minute www.aol.com 1 minute www.amazon.com

Browser DNS Cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Reducing DNS Lookups ,[object Object],[object Object]

Rule 10: Minify JavaScript minify inline scripts, too no yes no no yes yes yes no no no Minify External? no www.youtube.com yes www.yahoo.com no www.wikipedia.org no www.myspace.com yes www.msn.com yes froogle.google.com no www.ebay.com no www.cnn.com no www.aol.com no www.amazon.com Minify Inline?

Minify vs. Obfuscate minify – it's safer http://crockford.com/javascript/jsmin http://dojotoolkit.org/docs/shrinksafe Dojo Savings JSMin Savings Original 21K (25%) 17K (21%) 85K Average 10K (29%) 8K (22%) 34K www.youtube.com 16K (38%) 14K (34%) 42K www.wikipedia.org 24K (28%) 23K (27%) 88K www.myspace.com 24K (25%) 19K (20%) 98K www.cnn.com 4K (10%) 4K (10%) 44K www.aol.com 48K (24%) 31K (15%) 204K www.amazon.com

Rule 11: Avoid redirects ,[object Object],[object Object],[object Object],[object Object],[object Object],http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Redirects no yes – secondary page yes – secondary page yes – secondary page yes – initial page no yes – secondary page yes – initial page yes – secondary page no Redirects www.youtube.com www.yahoo.com www.wikipedia.org www.myspace.com www.msn.com froogle.google.com www.ebay.com www.cnn.com www.aol.com www.amazon.com

Avoid Redirects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 12: Remove duplicate scripts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Script Insertion Functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 13: Turn off ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Problem with ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 14: Make AJAX cacheable and small ,[object Object],[object Object]

AJAX Example: Yahoo! Mail Beta ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

IBM Page Detailer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://alphaworks.ibm.com/tech/pagedetailer

http://alphaworks.ibm.com/tech/pagedetailer

Fasterfox ,[object Object],[object Object],[object Object],[object Object],http://fasterfox.mozdev.org/

LiveHTTPHeaders ,[object Object],[object Object],[object Object],http://livehttpheaders.mozdev.org/

Firebug ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://getfirebug.com/

YSlow ,[object Object],[object Object],[object Object],[object Object]

Takeaways ,[object Object],[object Object],[object Object],[object Object]

Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Plop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Destaque

Destaque (7)

Semelhante a Plop

Semelhante a Plop (20)

Último

Último (20)

Plop