1. High Performance Web Sites best practices for faster pages Steve Souders souders@google.com http://stevesouders.com/docs/webguild.ppt

2. Speed Matters users notice pride in our work engineering best practices Google: +500 ms -20% traffic * Amazon: +100 ms -1% sales * * http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

3. The Importance of Frontend Performance Backend: 5% Frontend: 95% Even primed cache, frontend = 88%

4. 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%

5. The Performance Golden Rule Greater potential for improvement Simpler Proven to work 80-90% of the end-user response time is spent on the frontend. Start there.

6. Performance Research

7. Browser Cache Experiment Add a pixel image to the page: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT # users with at least one 200 response total # unique users users with empty cache page views with empty cache # of 200 responses total # responses

8. Browser Cache Expt Results page views with empty cache users with empty cache 20% 40-60 %

9. Experiment Takeaways empty cache user experience is more prevalent than you think! a majority of page views are done with a primed cache need to optimize for both

10. 14 Rules

11. 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

12. Evangelism

13. High Performance Web Sites September 2007 October 2007: –Slashdot –Amazon: #1 in Computers & Internet Today:

14. YSlow http://developer.yahoo.com/yslow/ performance lint tool grades web pages for each rule Firefox add-on integrated with Firebug open source license

15. http://developer.yahoo.com/yslow/ performance lint tool grades web pages for each rule Firefox add-on integrated with Firebug open source lincense

16. Ten Top U.S Web Sites Page Weight Response Time YSlow Grade www.amazon.com405K15.9 secD www.aol.com182K11.5 secF www.cnn.com502K22.4 secF www.ebay.com275K9.6 secC froogle.google.com18K1.7 secA www.msn.com221K9.3 secF www.myspace.com205K7.8 secD www.wikipedia.org106K6.2 secC www.yahoo.com178K5.9 secA www.youtube.com139K9.6 secD

17. Strong Correlation total page weight response time inverse YSlow grade correlation(resp time, page weight) = 0.94 correlation(resp time, inverse YSlow) = 0.76

18. 14 Rules

19. Rule 1: Make fewer HTTP requests CSS sprites combined scripts, combined stylesheets image maps inline images

20. CSS Sprites size of combined image is less <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;">

21. Rule 2: Use a CDN distribute your static content before distributing your dynamic content amazon.comAkamai aol.comAkamai cnn.com ebay.comAkamai, Mirror Image google.com msn.comSAVVIS myspace.comAkamai, Limelight wikipedia.org yahoo.comAkamai youtube.com

22. Rule 3: Add an Expires header not just for images ImagesStylesheetsScripts % with Expires Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days froogle.google.com1/230/1 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days ImagesStylesheetsScripts % with Expires Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days froogle.google.com1/230/1 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days

23. Rule 4: Gzip components you can affect users' download times 90%+ of browsers support compression

24. HTMLScriptsStylesheets amazon.comyesno aol.comyessome cnn.comno ebay.comyesno froogle.google.comyes msn.comyesdeflate myspace.comyes wikipedia.orgyes yahoo.comyes youtube.comyessome Gzip: not just for HTML gzip scripts, stylesheets, XML, JSON (not images, PDF) HTMLScriptsStylesheets amazon.comyesno aol.comyessome cnn.comno ebay.comyesno froogle.google.comyes msn.comyesdeflate myspace.comyes wikipedia.orgyes yahoo.comyes youtube.comyessome

25. Rule 5: Put stylesheets at the top stylesheets block rendering in IE solution: put stylesheets in HEAD (per spec) avoids Flash of Unstyled Content use LINK (not @import)

26. Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnames scripts block rendering of everything below them in the page script defer attribute is not a solution –blocks rendering and downloads in FF –slight blocking in IE

27. Rule 7: Avoid CSS expressions used to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? 600px : auto ); problem: expressions execute many times –mouse move, key press, resize, scroll, etc. alternatives: –one-time expressions –event handlers

28. Rule 8: Make JS and CSS external inline: HTML document is bigger external: more HTTP requests, but cached variables –page views per user (per session) –empty vs. primed cache stats –component re-use external is typically better extra credit: post-onload download, dynamic inlining

29. Rule 9: Reduce DNS lookups typically 20-120 ms block parallel downloads OS and browser both have DNS caches

30. minify inline scripts, too Rule 10: Minify JavaScript Minify External? Minify Inline? www.amazon.comno www.aol.comno www.cnn.comno www.ebay.comyesno froogle.google.comyes www.msn.comyes www.myspace.comno www.wikipedia.orgno www.yahoo.comyes www.youtube.comno Minify External? Minify Inline? www.amazon.comno www.aol.comno www.cnn.comno www.ebay.comyesno froogle.google.comyes www.msn.comyes www.myspace.comno www.wikipedia.orgno www.yahoo.comyes www.youtube.comno

31. Minify vs. Obfuscate OriginalJSMin SavingsDojo Savings www.amazon.com204K31K (15%)48K (24%) www.aol.com44K4K (10%) www.cnn.com98K19K (20%)24K (25%) www.myspace.com88K23K (27%)24K (28%) www.wikipedia.org42K14K (34%)16K (38%) www.youtube.com34K8K (22%)10K (29%) Average85K17K (21%)21K (25%) minify – it's safer not much difference

32. Rule 11: Avoid redirects 3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://stevesouders.com/newuri add Expires headers to cache redirects worst form of blocking

33. Rule 12: Remove duplicate scripts hurts performance –extra HTTP requests (IE only) –extra executions atypical? –2 of 10 top sites contain duplicate scripts team size, # of scripts

34. Rule 13: Configure ETags unique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT used in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT if ETag doesn't match, can't send 304 ETag format –Apache: inode-size-timestamp –IIS: Filetimestamp:ChangeNumber Use 'em or lose 'em –Apache: FileETag none –IIS: http://support.microsoft.com/kb/922703/

35. Rule 14: Make AJAX cacheable XHR, JSON, iframe, dynamic scripts can still be cached (and minified, and gzipped) a personalized response should still be cacheable for that person

36. Next Rules split dominant content domains reduce cookie weight make static content cookie-free minify CSS use iframes wisely optimize images http://news.google.com

37. Split Dominant Content Domains http://news.google.com

38. Live Analysis

39. Takeaways focus on the frontend harvest the low-hanging fruit small investment up front keeps on giving you do control user response times LOFNO – be an advocate for your users

40. Steve Souders souders@yahoo-inc.com

41. CC Images Used "Need for Speed" by Amnemona: 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/ "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/ "Robert's Legion" by dancharvey: http://www.flickr.com/photos/dancharvey/2647529/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/ "new briefcase" by dcJohn: http://www.flickr.com/photos/dcjohn/85504455/