Faster (re)load times with the right HTTP cache

Update: sonarwhal has been renamed to webhint. Check the announcement to know what else has change.

There’s no question that performance is a hot topic in web development. Rare is the day where there isn’t a new framework, plugin, pattern, or standard that can help websites be faster.

While all these new things are important, we believe that web developers should know the fundamentals before looking into other techniques. There are many things that can improve the load time of a website with very little

effort. One of these things is to have the right cache strategy.

Some of the benefits of a good caching strategy are:

• Shorter load times
• Less bandwidth required
• Reduce server costs
• Have a predictable behavior across browsers

Even though this might seem obvious, about 50% of resources on the web can’t be cached due to their configuration, and 36% do not have a Cache-Control header.

To help you identify possible issues with your site and browser caches, we’ve developed the http-cache rule. This rule tests that:

• All responses have a cache-control header
• The cache-control directives are correct
• Static assets (scripts, stylesheets, images, etc.) use cache busting, have a long expiry value (1 year by default), and use the immutable directive
• HTML content has a short expiry value (3 minutes or less)

As usual, sonarwhal allows you to configure this rule to better fit your needs allowing you to:

• Use another regular expression for cache busting in case the built-in one doesn't work for you
• Modify the recommended values for max-age for static assets and HTML content

If you want to know more about browser caching and the reasons of the tests above, we recommend you read “Caching best practices & max-age gotchas” by Jake Archibald.

The rule is enabled on sonarwhal’s online scanner, so you can check how well your site is doing right now!