Slide 1

High Performance Web Sites 14 rules for faster pages Steve Souders Tenni Theurer http://developer.yahoo.com/performance/ Slide 2 Exceptional Performance quantify and improve the performance of all Yahoo! products worldwide center of expertise build tools, analyze data gather, research, and evangelize best practices Slide 3 Scope performance breaks into two categories response time efficiency current focus is response time of web products Slide 4 The Importance of Frontend Performance Backend = 5% Frontend = 95% Even primed cache, frontend = 88% Slide 5 Time Spent on the Frontend Empty CachePrimed 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 6 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. Greater potential for improvement Simpler Proven to work Slide 7 Agenda Performance Research 14 Rules Case Studies Evangelism Live Analysis Slide 8 Performance Research Slide 9 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 10 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 11 http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ Slide 12 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 13 Empty vs. Primed Cache user requests www.yahoo.com with an empty cache Slide 14 Empty vs. Primed Cache user re-requests www.yahoo.com with a primed cache Expires header Slide 15 Empty vs. Primed Cache empty cache 2.4 seconds primed cache 0.9 seconds 83% fewer bytes 90% fewer HTTP requests Slide 16 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 17 http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ Slide 18 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 19 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 20 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 21 Surprising Results page views with empty cache 40-60% ~20% users with empty cache Slide 22 Experiment Takeaways The empty cache user experience is more prevalent than you think! Optimize for both primed cache and empty cache experience. Slide 23 http://yuiblog.com/blog/2007/03/01/performance-research-part-3 Slide 24 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 25 .yahoo.com cookie sizes Slide 26 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 27 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 28 http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Slide 29 Parallel Downloads Two componentsin parallelper hostname GIF HTTP/1.1 Slide 30 Two in parallel Four in parallel Eight in parallel Parallel Downloads Slide 31 Maximizing Parallel Downloads response time (seconds) aliases Slide 32 Maximizing Parallel Downloads response time (seconds) aliases Slide 33 Maximizing Parallel Downloads response time (seconds) aliases Slide 34 Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases Slide 35 Experiment Takeaways consider the effects of CPU thrashing DNS lookup times vary across ISPs and geographic locations domain names may not be cached Slide 36 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 37 14 Rules Slide 38 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put stylesheets at the top 6.Move scripts 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.Configure ETags 14.Make AJAX cacheable Slide 39 Rule 1: Make fewer HTTP requests CSS sprites combined scripts, combined stylesheets image maps inline images Slide 40 CC Images Used "Need for Speed" by Amnemon: http://www.flickr.com/photos/marinacvinhal/379111290/ "Max speed 15kmh" by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/ "maybe" by Tal Bright: http://www.flickr.com/photos/bright/118197469/ "takeout" by dotpolka: http://www.flickr.com/photos/dotpolka/249129144/ "how do they do that" by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/ "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: http://www.flickr.com/photos/two-wrongs/205467442/ "Zipper Pocket" by jogales: http://www.flickr.com/photos/jogales/11519576/ "new briefcase" by dcJohn: http://www.flickr.com/photos/dcjohn/85504455/ "Told you it was me!" by Pug!: http://flickr.com/photos/pugspace/1277023154/ "Robert's Legion" by dancharvey: http://www.flickr.com/photos/dancharvey/2647529/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/ document.write(between.get_banner_code('728x90')); Download "High Performance Web Sites 14 rules for faster pages Steve Souders Tenni Theurer http://developer.yahoo.com/performance/"