When visitors return to your website, you can make their experience lightning-fast by efficiently caching your static assets, and using the longest 'lifetime' possible. This guide explains what the Serve static assets with an efficient cache policy Lighthouse audit checks for and how to fix it.
Why caching static assets matters
Every time someone visits your website, their browser needs to download all the resources that make up your page - images, JavaScript files, stylesheets, fonts, and more. This downloading process takes time and uses bandwidth.
With proper HTTP caching, a browser can be told: "You've downloaded this file already. You can reuse it from your local storage instead of downloading it again." This is known as a cache hit, and it's much faster than a cache miss, where the browser has to download the file again. It means:
- Faster page loads for returning visitors
- Reduced bandwidth usage for both your users and your server
- Lower server costs from fewer requests
Consider this example of a user visiting a page for the first time:
It was necessary to download main.js
from the server the first time the user visited the page. However, the browser stored main.js
in its cache, so it can be reused on future visits.
Consider this example of a user visiting a page for the second time:
Here, the browser can reuse main.js
from its cache, bypassing the network entirely.
Understanding the Lighthouse audit
The "Serve static assets with an efficient cache policy" audit appears in a Lighthouse report. It identifies static resources that could be cached but aren't, or that have ineffective cache settings.
What the audit checks
When Lighthouse runs this audit, it examines most resources loaded by your page, including:
- Images: Such as JPEGs, PNGs, and SVGs
- JavaScript files: For example, your main-v1.js or vendor.js files
- CSS stylesheets: Like styles.css or main-v2.css
- Fonts: Web fonts you might be using, such as a woff2 file
- Media files (videos, audio): If you have any on your page, like an mp4 video
For each resource, it checks if:
- The resource has a successful HTTP status code (200, 203, or 206)
- There's no explicit
no-cache
policy - The cache duration is appropriate
If a resource fails these checks, it will appear as a recommendation in the Lighthouse report, along with details on applicable resources.
Use our website cache checker to check your cache-control headers and CDN cache status.