How to set long cache lifetimes for static files
Images, fonts, CSS and scripts rarely change. Telling browsers to keep them for a year makes every repeat visit faster.
Step by step, with screenshots: Browser caching: what to cache, for how long, and how to set Cache-Control →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
A cache lifetime, or TTL (time to live), is how long a browser may reuse a downloaded file without asking the server again. It is set by the Cache-Control response header, for example Cache-Control: max-age=31536000 for one year.
Images, fonts, CSS and JavaScript rarely change, yet without a long lifetime returning visitors download them again on every visit. Lighthouse flags static files with short lifetimes, and getReport lists them with the bytes that could come from cache. The safe pattern: put a version or hash in static file names and cache them for a year, and keep HTML on no-cache or a short lifetime so updates appear immediately.
What a passing site looks like
- Static files have long cache lifetimeswarning · −2 ptseffort S
Static file caching
Why it matters. Images, fonts, CSS and JS rarely change, yet without a long Cache-Control lifetime returning visitors download them again on every page.
- Set Cache-Control max-age of a year on versioned static files (most CDNs and caching plugins have a "browser caching" switch).
- Add a version or hash to file names so you can still change them.
Questions people ask
What is cache busting?
Cache busting means changing a file's URL whenever its content changes, so browsers that hold a long-lived copy fetch the new version. The usual way is a content hash in the file name, such as app.3f9a2c.js, which build tools like Vite and webpack add automatically; WordPress adds a ?ver= query string instead. With cache busting in place, a one-year cache lifetime is safe.
Why does PageSpeed Insights flag my cache lifetimes?
PageSpeed Insights lists static files, such as images, fonts, CSS and scripts, whose cache lifetime is short, in the audit now called "Use efficient cache lifetimes" and earlier "Serve static assets with an efficient cache policy", with the bytes a returning visitor downloads again. Files from other sites, such as analytics or chat widgets, often appear too; fix your own files and ignore third-party ones you cannot configure.
How do I set cache lifetimes in WordPress?
Most caching plugins, such as WP Rocket, W3 Total Cache and LiteSpeed Cache, add long browser-cache rules for images, CSS, JavaScript and fonts on Apache and LiteSpeed servers. On nginx hosting, ask your host or add an expires or Cache-Control rule for those file types. WordPress already adds a ?ver= version to theme and plugin files, so a long lifetime is safe for them.
What max-age should I use in Cache-Control?
One year (max-age=31536000) for images, fonts, CSS and JavaScript whose file names change when their content changes. For files with fixed names that you do update, such as logo.png, choose a shorter lifetime such as a day or a week, or add a version query string when you change them. For HTML, use no-cache or a lifetime of a few minutes.