If you can't read please download the document
Upload
danny-roa
View
3.104
Download
1
Embed Size (px)
Citation preview
2.
3. Exceptional Performance
4. Scope
5. Rough Cuts: now Hardcopy: Summer 2007 http://www.oreilly.com/catalog/9780596514211/ 6. The Importance of Front-End Performance 7. 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 8. The Performance Golden Rule
9. Schedule
10.
11. slow crawl boring snail stagnant unexceptional yawn unresponsive impatient delay moderate blah subdue drag apathetic prolong slack load sluggish sleepy late unexciting reduced lag complexheavy unmemorable obscure whywait perceived response time what is the end users experience? performancespeedenjoyableurgent instant accelerate perceptionsnapachievementbetter improve actionpleasantpace quickpromote swift cool maximum drive promptadvancefasthurry rush satisfyingfeelexceptional brisk rapidexciting 12. User Perception
13. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ 14. 80/20 Performance Rule
15. Empty vs. Full Cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com 16. 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 17. Empty vs. Full Cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com 18. 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 19. Empty vs. Full Cache
20. How much does this benefit our users?
21. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ 22. Browser Cache Experiment
} 1px 23. Browser Cache Experiment
24. Browser Cache Experiment total # of 200 responses # of 200 + # of 304 responses What percentage ofpage viewsare done with an empty cache? # unique users with at least one 200 response total # unique users What percentage ofusersview with an empty cache? } 1px 25. Surprising Results 40-60%~20%page views with empty cache users with empty cache 26. Experiment Takeaways
27. http://yuiblog.com/blog/2007/03/01/performance-research-part-3 28. 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 29. 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 30. 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 31. 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 32. 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 33. 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 34. .yahoo.com cookie sizes 35. 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 36. Experiment Takeaways
37. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ 38. Parallel Downloads Two components in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF 39. Parallel Downloads Two in parallel Four in parallel Eight in parallel 40. Maximizing Parallel Downloads response time (seconds) aliases 41. Maximizing Parallel Downloads response time (seconds) aliases 42. Maximizing Parallel Downloads response time (seconds) aliases 43. Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases 44. Experiment Takeaways
45. Summary
46.
47. 14 Rules
48. Rule 1: Make fewer HTTP requests
49. Image maps
http://www.w3.org/TR/html401/struct/objects.html#h-13.6 50. CSS Sprites Preferred
http://alistapart.com/articles/sprites 51. Inline Images
http://tools.ietf.org/html/rfc2397 52. 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 53. Combined Scripts, Combined Stylesheets
54. Rule 2: Use a CDN
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 55. Rule 3: Add an Expires header
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 56. Rule 4: Gzip components
57. 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 58. Gzip: not just for HTML
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 59. Gzip Configuration
needed for proxies 60. Gzip Edge Cases