Lighthouse: Serve static assets with an efficient cache policy
Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.
When browser caching is enabled, a user's first visit to your page won't be any quicker; however, subsequent visits to the page will be, due to the cached content.
How does your site score on this audit?
How does an efficient cache policy affect page performance?
When the browser caches your page's static resources, it stores a local copy of these resources in its cache.
The server providing the file can tell the browser how long it should cache the file for. This is known as a caching policy.
Longer cache policies instruct the browser to keep these files for longer (e.g., 1 year). This is important for resources that are unlikely to change frequently, like a logo image, or page fonts.
Depending on the cache-policy for the specific resource, when a user visits your page again, the browser may serve the cached/local copy instead of downloading it again from the server.
Resources that have short cache policies are likely to be downloaded from the server again, on repeat visits.
Caching ensures that your webpage loads fast for returning users.
Conversely, setting up long cache policies for frequently changing content may cause the browser to serve previously cached/outdated content to your visitors, even though the actual content has been updated recently.
How does GTmetrix trigger this audit?
GTmetrix considers a resource cacheable if it meets all of the following conditions:
- It is a font, image, stylesheet, script, or media file.
- It returns a 200, 203, or 206 HTTP status code.
- It doesn't have an explicit no-cache policy.
Based on the above criteria, GTmetrix flags all the static resources that aren't efficiently cached.
Clicking the audit reveals the list of resources, along with the transfer size and the cache time-to-live (TTL).
How to serve static assets with an efficient cache policy?
To set up an efficient cache policy, follow the instructions below, depending on the web server used to serve your static assets:
1) For Apache servers
Copy and paste the below code into your
2) For other servers
Read the following guides to learn how to setup browser caching on other server types:
3) For WordPress (or other CMS users)
If you're using a CMS (e.g., WordPress), you can use a caching plugin to automatically set a cache policy for your website.