Better Browser Caching is More Important than No Javascript or Fast Networks for HTTP Performance
Wednesday, January 30, 2013 at 9:30AM
HighScalability Team in Performance, Strategy
Performance guru Steve Souders gave his keynote presentation, Cache is King! (slides), at the HTML5DevCon, besides being an extremely clear explanation of how caching works on the Internet and how to optimize your use of HTTP to get the best performance, Steve ran experiments that found some surprising results on what gave the best web site performance improvements.
In his base line test, page loads took 7.65 seconds (median of three runs). What change--Fast Network, No Javascript, or Primed Cache--would make the biggest performance improvement? It was Primed Cache.
Fast Network - Using a fast FIOS network the load time was 4.13 seconds. Steve was surprised how big a difference this made, given how much work must happen in the browser.
No JavaScript - 4.74 seconds after disabling JavaScript. Both reduces transfers and skips parsing by the browser. Steve thought the effect would have been larger.
Primed Cache - 3.46 seconds using a warm cache, less than half than the empty cache page view time because it reduced the number of HTTP requests and reduced the total transfer times. Key for mobile where higher latencies are common.
The implication being that caching is important so you must understand how HTTP caching works and how to make the best use of it. That's the rest of the talk.
Some key takeaways:
Use HTTP cache control mechanisms: max-age, etag, last-modified, if-modified-since, if-none-match, no-cache, must-revalidate, no-store. Want to prevent HTTP sending conditional GET requests, especially over high latency mobile networks. Use a long max-age and change resource names any time the content changes so that it won't be cached improperly.
Be explicit. Don't rely on heuristic caching. Decide on your caching policy for each resource. Don't leave it up to the whims of caching intermediaries or proxys to determine your cache policy. Be decisive. If something does not change very much or you can change the file name when it changes then make it cacheable for a year. If something shouldn't be cached the say no-cache. Always specify Cache-Control, no-cache, or max-age.
The cache header crisis is not improving. In practice the top 1000 sites are better configured than the long tale of websites, some are quite good, many are horrible, and it looks like there's a lot of room for improvement.
Approximately 70% of users do not have a full cache. Caches fill in 4 hours of browsing. Mobile devices have smaller caches. Since users anchor on a negative experience empty caches make your users unhappy.
Gather more cache stats for your users using the transparent pixel technique. Monitor, feedback, and control.
Some room for improvement:
Application Cache - an HTML5 mechanism for smarter caching and minimizing network traffic, seems to have a lot of developer difficulties
Local Storage - used to store JavaScript and CSS locally.
Smarter browsers. Bigger caches. Smarter purging. Prioritizing web sites.