Brief overview of Steve Souders web optimization techniques.

1. Creating High Performance Web Sites

2. Agenda Steve Souders My Experiences Tools The Rules References Questions?

3. Steve Souders Works at Google Author Creator of YSlow Teacher at Stanford Former Chief Performance Yahoo! Startup Veteran

4. My Experiences 1.5 Million Unique Users 10 Million Page Views .Net Technology Stack Ektron Cachefly CDN

6. JS Beautified

7. JS Minified

8. CSS Compressor

9. Smush ItChrome IE Dev Tools Fiddler Microsoft Network Monitor

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

11. User Perception User perception is more relevant than actual unload-to-onload response time Varies from one web page to the next

12. The (First Set of) Rules Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components Put Stylesheets at the Top Put Scripts at the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicates Scripts Configure ETags Make Ajax Cacheable

13. Make Fewer HTTP Requests Combined files CSS sprites Image maps Inline images In a stylesheet

14. Use a Content Delivery Network Akamai EdgeCast Level3 Static content Offload traffic Locate content geographically closer to users

15. Add an Expires Header Static components – use Expires header Something like 10 years from now Dynamic components – use Cache-Control header Max-age in seconds Use this to “prime” the browser cache Need to change filename or use a “cache buster” when contents change yahoo_2.0.6.js yahoo.js?20110310

16. Gzip Components Web server compression of files being served Generally reduces size by 70% Supported by about 90% browsers used today

17. Put Stylesheets at the Top Makes page appear to render faster Allows page to render progressively

18. Put Scripts at the Bottom Scripts block parallel downloads Even across hostnames

19. Avoid CSS Expressions Not commonly used Deprecated starting with IE8 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

20. Make JavaScript and CSS External Improves cacheability

21. Reduce DNS Lookups Typical lookup takes 20-120ms per hostname Cached for performance IE ~30 minutes FF ~60 minutes Reduce the number of unique hostnames Leverage CNAMES media1.spacex.com, media2.spacex.com, etc Rough guideline is 2-4 for static files

22. Minify JavaScript Remove unnecessary characters to reduce size and improve load time Removes comments and unnecessary whitespace characters Can obfuscate as well myReallyLongVariableName becomes x

23. Avoid Redirects 301 and 302 status codes Wasteful and slows down response times http://astrology.yahoo.com/astrologyresults in a 301 redirect to http://astrology.yahoo.com/astrology/ Can use CNAMEs here as well

24. Remove Duplicates Scripts 2 of 10 Top US websites contain at least one duplicate script Doubles execution time and blocking time

25. Configure ETags aka Entity Tags Sort of like a checksum for a file Used as a caching mechanism Be careful in web farm scenarios HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195 GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified

26. Make Ajax Cacheable Apply all the concepts to your ajax responses These could include xml results, web service calls/responses, etc.

27. More Rules Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie free domains for components Minimize DOM access Develop smart event handlers Choose <link> over @import Avoid filters Optimize images Optimize CSS sprites Don’t scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document Avoid empty image src

28. References http://getfirebug.com/ http://developer.yahoo.com/yslow/ http://developer.yahoo.com/performance/rules.html http://stevesouders.com/hpws/rules.php