Slide 1

High Performance Web Sites 14 rules for faster-loading pages Steve Souders souders@yahoo-inc.com Tenni Theurer tenni@yahoo-inc.com Slide 2 Introduction Slide 3 Exceptional Performance started in 2004 quantify and improve the performance of all Yahoo! products worldwide center of expertise build tools, analyze data gather, research, and evangelize best practices Slide 4 Scope performance breaks into two categories response time efficiency current focus is response time of web products Slide 5 Rough Cuts: now Hardcopy: Summer 2007 http://www.oreilly.com/catalog/9780596514211/ Slide 6 The Importance of Front-End Performance Slide 7 percentage of time spent on the front-end Back-end vs. Front-end Empty CacheFull Cache amazon.com82%86% aol.com94%86% cnn.com81%92% ebay.com98%92% google.com86%64% msn.com97%95% myspace.com96%86% wikipedia.org80%88% yahoo.com95%88% youtube.com97%95% Slide 8 The Performance Golden Rule 80-90% of the end-user response time is spent on the front-end. Start there. Greater potential for improvement Simpler Proven to work Slide 9 Schedule Performance Research break 14 Rules break Case Studies Live Analysis Slide 10 Performance Research Slide 11 perceived response time what is the end users experience? 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 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 Slide 12 User Perception Usability and perception are important for performance. The users perception is more relevant than actual unload-to-onload response time. Definition of "user onload" is undefined or varies from one web page to the next. Slide 13 http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ Slide 14 80/20 Performance Rule Vilfredo Pareto: 80% of consequences come from 20% of causes Focus on the 20% that affects 80% of the end-user response time. Start at the front-end. Slide 15 1 1 user requests www.yahoo.com 2 2 user requests other web pages 3 3 user re-requests www.yahoo.com Empty vs. Full Cache Slide 16 1 1 user requests www.yahoo.com 2 2 user requests other web pages 3 3 user re-requests www.yahoo.com Empty vs. Full Cache with an empty cache Slide 17 1 1 user requests www.yahoo.com 2 2 user requests other web pages 3 3 user re-requests www.yahoo.com Empty vs. Full Cache Slide 18 Expires header 1 1 user requests www.yahoo.com 2 2 user requests other web pages 3 3 user re-requests www.yahoo.com with a full cache Slide 19 Empty vs. Full Cache empty cache 2.4 seconds full cache 0.9 seconds 83% fewer bytes 90% fewer HTTP requests Slide 20 How much does this benefit our users? It depends on how many users have components in cache. What percentage of users view a page with an empty cache * ? * Empty cache means the browser has to request the components instead of pulling them from the browser disk cache. What percentage of page views are done with an empty cache * ? Slide 21 http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ Slide 22 Add a new image to your page with the following response headers: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT } 1 px Browser Cache Experiment Slide 23 Requests from the browser will have one of these response status codes: 200 The browser does not have the image in its cache. 304 The browser has the image in its cache, but needs to verify the last modified date. Slide 24 Browser Cache Experiment What percentage of users view with an empty cache? # unique users with at least one 200 response total # unique users What percentage of page views are done with an empty cache? total # of 200 responses # of 200 + # of 304 responses } 1 px Slide 25 Surprising Results page views with empty cache 40-60% ~20% users with empty cache Slide 26 Experiment Takeaways Keep in mind the empty cache user experience. It might be more prevalent than you think! Use different techniques to optimize full versus empty cache experience. Slide 27 http://yuiblog.com/blog/2007/03/01/performance-research-part-3 Slide 28 1 1 user requests www.yahoo.com 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 Slide 29 1 1 user requests www.yahoo.com HTTP Quick Review 2 2 user requests finance.yahoo.com 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; Slide 30 1 1 user requests www.yahoo.com 3 3 user requests autos.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; Slide 31 1 1 user requests www.yahoo.com 4 4 user requests mail.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; Slide 32 1 1 user requests www.yahoo.com 5 5 user requests tech.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; Slide 33 Impact of Cookies on Response Time 80 ms delay dialup users Cookie SizeTimeDelta 0 bytes78 ms0 ms 500 bytes79 ms+1 ms 1000 bytes94 ms+16 ms 1500 bytes109 ms+31 ms 2000 bytes125 ms+47 ms 2500 bytes141 ms+63 ms 3000 bytes156 ms+78 ms keep sizes low Slide 34 .yahoo.com cookie sizes Slide 35 Analysis of Cookie Sizes across the Web Total Cookie Size Amazon60 bytes Google72 bytes Yahoo122 bytes CNN184 bytes YouTube218 bytes MSN268 bytes eBay331 bytes MySpace500 bytes Slide 36 Experiment Takeaways eliminate unnecessary cookies keep cookie sizes low set cookies at appropriate domain level set Expires date appropriately earlier date or none removes cookie sooner Slide 37 http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Slide 38 Parallel Downloads Two componentsin parallelper hostname GIF HTTP/1.1 Slide 39 Parallel Downloads Two in parallel Four in parallel Eight in parallel Slide 40 Maximizing Parallel Downloads response time (seconds) aliases Slide 41 Maximizing Parallel Downloads response time (seconds) aliases Slide 42 Maximizing Parallel Downloads response time (seconds) aliases Slide 43 Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases Slide 44 Experiment Takeaways consider the effects of CPU thrashing DNS lookup times vary across ISPs and geographic locations domain names may not be cached Slide 45 Summary What the 80/20 Rule Tells Us about Reducing HTTP Requests http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Browser Cache Usage Exposed! http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ When the Cookie Crumbles http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ Maximizing Parallel Downloads in the Carpool Lane http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Slide 46 14 Rules Slide 47 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put CSS at the top 6.Move JS to the bottom 7.Avoid CSS expressions 8.Make JS and CSS external 9.Reduce DNS lookups 10.Minify JS 11.Avoid redirects 12.Remove duplicate scripts 13.Turn off ETags 14.Make AJAX cacheable and small Slide 48 Rule 1: Make fewer HTTP requests image maps CSS sprites inline images combined scripts, combined stylesheets Slide 49 Image maps server-side http://.../navbar.cgi?127,13 client-side preferred drawbacks: must be contiguous defining area coordinates tedious, errors http://www.w3.org/TR/html401/struct/objects.html#h-13.6 Slide 50