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" );
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
