If you've run a Lighthouse audit and encountered the "Serve static assets with an efficient cache policy" warning, you're missing out on one of the easiest wins in web performance.
Every time a user visits your site, their browser has to download HTML, CSS, JavaScript, images, and fonts. If they visit another page on your site, or return tomorrow, should they have to download all those exact same files again?
Absolutely not. That's where caching comes in.
How Browser Caching Works (The TL;DR)
When your server sends a file (like main.css) to a user's browser, it includes HTTP response headers. The Cache-Control header is the most important one. It tells the browser exactly how long it's allowed to store that file locally on the user's hard drive.
If the user needs that file again before the time expires, the browser loads it instantly from the local disk. No network request required. 0ms load time.
The Optimal Strategy: Immutable Caching + Cache Busting
The industry standard for optimal performance is to cache everything for as long as possible, but use file versioning so you can still push updates.
Here is the golden rule: Cache HTML for 0 seconds. Cache static assets for 1 year.
1. HTML Documents (No Cache)
Your HTML files are the entry point. Because you want users to always get the latest version of your site, HTML should never be aggressively cached in the browser.
Cache-Control: no-cache
(Note: no-cache means "check with the server to see if it changed," not "don't store it". Use no-store if it contains sensitive data.)
2. Static Assets (Max Cache)
Files like CSS, JS, Images, and Web Fonts rarely change without you intentionally updating them. Modern build tools (Vite, Next.js, Webpack) automatically add a hash to the filename when the file changes (e.g., style.a8f2bdc.css).
Because the filename itself changes when the content changes, you can safely tell the browser to cache these assets forever.
Cache-Control: public, max-age=31536000, immutable
(31,536,000 seconds = 1 year)
How to Implement Efficient Caching
Implementation depends on your hosting setup. Here are common examples:
Using Express.js (Node server)
If you are running a custom Node server, you can configure your static middleware:
const express = require('express');
const app = express();
app.use(express.static('public', {
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
res.setHeader('Cache-Control', 'no-cache');
} else {
// 1 Year for JS, CSS, Images, Fonts
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
}
}
}));
Using Nginx
Add this to your server block to target static files:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Vercel / Netlify / Cloudflare Providers
If you use a modern hosting platform, they usually handle the optimal Cache-Control headers for you automatically as part of their build and deployment pipeline! Just make sure you aren't accidentally overriding them in a vercel.json or _headers file.