Overview
HTTP caching can speed up your page load time on repeat visits.
When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store or "cache" the resource. For any subsequent request for that resource, the browser uses its local copy, rather than going to the network to get it.
Recommendations
Configure your server to return the Cache-Control HTTP response header.
Cache-Control: max-age=86400
The max-age directive tells the browser how long it should cache the resource, in seconds.
86400 corresponds to 1 day (60 seconds * 60 minutes * 24 hours).
There are many directives for customizing how the browser caches different resources. See the links below for more guidance.
The Size column in Chrome DevTools can help you verify that a resource has been cached.
Chrome serves the most requested resources from the memory cache, which is very fast, but is cleared when the browser is closed.
The Headers tab can help you verify a resource's Cache-Control header is set
as expected.
Cache-Control header via the Headers tab
More information
Lighthouse considers a resource cache-able if:
- It's a font, image, media file, script, or stylesheet.
- It has a
200,203, or206HTTP status code. - It doesn't have an explicit no-cache policy.
Lighthouse then estimates how much network data you could have saved your users if the resources had been cached. This estimate includes some calculations of optimal cache duration for each resource, based on aggregate usage statistics reported to Chrome. A longer duration is not necessarily better. Check out the audit source for details. Ultimately, it's up to you to decide what the optimal cache duration is for your resources.
Sources:
Feedback
Was this page helpful?