Creating high-performance-web-sites


Published on

Brief overview of Steve Souders web optimization techniques.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating high-performance-web-sites

  1. 1. Creating High Performance Web Sites<br />
  2. 2. Agenda<br />Steve Souders<br />My Experiences<br />Tools<br />The Rules<br />References<br />Questions?<br />
  3. 3. Steve Souders<br />Works at Google<br />Author<br />Creator of YSlow<br />Teacher at Stanford<br />Former Chief Performance Yahoo!<br />Startup Veteran<br />
  4. 4. My Experiences<br />1.5 Million Unique Users<br />10 Million Page Views<br />.Net Technology Stack<br />Ektron<br />Cachefly CDN<br />
  5. 5. Tools<br />Firefox<br />+ Firebug<br />+ YSlow<br /><ul><li>JS Lint
  6. 6. JS Beautified
  7. 7. JS Minified
  8. 8. CSS Compressor
  9. 9. Smush It</li></ul>Chrome<br />IE Dev Tools<br />Fiddler<br />Microsoft Network Monitor<br />
  10. 10. The Performance Golden Rule<br />80-90% of the end user response time is spent on the front end. Start there.<br />Greater potential for improvement<br />Simpler<br />Proven to work<br />
  11. 11. User Perception<br />User perception is more relevant than actual unload-to-onload response time<br />Varies from one web page to the next<br />
  12. 12. The (First Set of) Rules<br />Make Fewer HTTP Requests <br />Use a Content Delivery Network <br />Add an Expires Header <br />Gzip Components <br />Put Stylesheets at the Top <br />Put Scripts at the Bottom <br />Avoid CSS Expressions <br />Make JavaScript and CSS External <br />Reduce DNS Lookups <br />Minify JavaScript <br />Avoid Redirects <br />Remove Duplicates Scripts <br />Configure ETags<br />Make Ajax Cacheable <br />
  13. 13. Make Fewer HTTP Requests<br />Combined files<br />CSS sprites<br />Image maps<br />Inline images<br />In a stylesheet<br />
  14. 14. Use a Content Delivery Network <br />Akamai<br />EdgeCast<br />Level3<br />Static content<br />Offload traffic<br />Locate content geographically closer to users<br />
  15. 15. Add an Expires Header <br />Static components – use Expires header<br />Something like 10 years from now<br />Dynamic components – use Cache-Control header<br />Max-age in seconds<br />Use this to “prime” the browser cache<br />Need to change filename or use a “cache buster” when contents change<br />yahoo_2.0.6.js<br />yahoo.js?20110310<br />
  16. 16. Gzip Components <br />Web server compression of files being served<br />Generally reduces size by 70%<br />Supported by about 90% browsers used today<br />
  17. 17. Put Stylesheets at the Top <br />Makes page appear to render faster<br />Allows page to render progressively<br />
  18. 18. Put Scripts at the Bottom <br />Scripts block parallel downloads<br />Even across hostnames<br />
  19. 19. Avoid CSS Expressions <br />Not commonly used<br />Deprecated starting with IE8<br />background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );<br />
  20. 20. Make JavaScript and CSS External <br />Improves cacheability<br />
  21. 21. Reduce DNS Lookups <br />Typical lookup takes 20-120ms per hostname<br />Cached for performance<br />IE ~30 minutes<br />FF ~60 minutes<br />Reduce the number of unique hostnames<br />Leverage CNAMES<br />,, etc<br />Rough guideline is 2-4 for static files<br />
  22. 22. Minify JavaScript<br />Remove unnecessary characters to reduce size and improve load time<br />Removes comments and unnecessary whitespace characters<br />Can obfuscate as well<br />myReallyLongVariableName becomes x<br />
  23. 23. Avoid Redirects<br />301 and 302 status codes<br />Wasteful and slows down response times<br /> in a 301 redirect to<br />Can use CNAMEs here as well<br />
  24. 24. Remove Duplicates Scripts<br />2 of 10 Top US websites contain at least one duplicate script<br />Doubles execution time and blocking time<br />
  25. 25. Configure ETags<br />aka Entity Tags<br />Sort of like a checksum for a file<br />Used as a caching mechanism<br />Be careful in web farm scenarios<br />HTTP/1.1 200 OK <br />Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT <br />ETag: "10c24bc-4ab-457e1c1f" <br />Content-Length: 12195<br />GET /i/yahoo.gif HTTP/1.1 <br />Host: <br />If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT <br />If-None-Match: "10c24bc-4ab-457e1c1f" <br />HTTP/1.1 304 Not Modified<br />
  26. 26. Make Ajax Cacheable<br />Apply all the concepts to your ajax responses<br />These could include xml results, web service calls/responses, etc.<br />
  27. 27. More Rules<br />Use GET for AJAX requests<br />Post-load components<br />Preload components<br />Reduce the number of DOM elements<br />Split components across domains<br />Minimize the number of iframes<br />No 404s<br />Reduce cookie size<br />Use cookie free domains for components<br />Minimize DOM access<br />Develop smart event handlers<br />Choose <link> over @import<br />Avoid filters<br />Optimize images<br />Optimize CSS sprites<br />Don’t scale images in HTML<br />Make favicon.ico small and cacheable<br />Keep components under 25K<br />Pack components into a multipart document<br />Avoid empty image src<br />
  28. 28. References<br /><br /><br /><br /><br />