Browser Caching
Quick Definition
Browser caching stores copies of your website files (CSS, JavaScript, images) in a visitor's browser so they do not have to download them again on repeat visits. It is controlled through HTTP headers like Cache-Control and Expires.
What Is Browser Caching?
Browser caching is when a visitor's web browser saves copies of your website's static files — CSS stylesheets, JavaScript files, images, fonts — on their local device. The next time they visit your site (or navigate to another page), their browser loads these files from its local cache instead of downloading them from your server again.
The result: dramatically faster page loads on repeat visits. A first visit might download 2 MB of files. A return visit might only need 50 KB (just the HTML) because everything else is already cached locally.
How It Works
Browser caching is controlled through HTTP headers that your server sends with each file:
- Cache-Control — The modern standard. Tells the browser how long to cache a file. Example:
Cache-Control: max-age=31536000means "cache this for 1 year." - Expires — The older method. Sets a specific expiration date. Example:
Expires: Thu, 18 Mar 2027 00:00:00 GMT. Still used for compatibility with older proxy servers. - ETag — A unique fingerprint for a file version. Lets the browser ask "has this file changed?" without downloading the whole thing again.
When both Cache-Control and Expires are present, Cache-Control takes precedence. Most WordPress setups use both for maximum compatibility.
Recommended Cache Durations
| File Type | Recommended Cache Time |
|---|---|
| Images (JPG, PNG, WebP) | 1 year (31536000s) |
| CSS stylesheets | 1 year |
| JavaScript files | 1 year |
| Fonts (WOFF2, TTF) | 1 year |
| HTML pages | No cache or very short (handled by page caching) |
Static assets like images and CSS can safely be cached for a year because when you update them, the filename changes (cache busting).
Browser Caching in WordPress
Google PageSpeed Insights flags "Serve static assets with an efficient cache policy" when your browser caching is not configured. Here is how to fix it:
- WP Rocket — Enables browser caching automatically when you activate the plugin. Adds the right Expires headers to your .htaccess file.
- LiteSpeed Cache — Includes browser caching in its optimization suite.
- W3 Total Cache — Has a dedicated "Browser Cache" settings page for fine-grained control.
- Cloudflare — Sets browser cache TTL for all static assets passing through their CDN. Configurable in the Caching settings.
- Manual .htaccess — Add
mod_expiresrules directly to your.htaccessfile for Apache servers.
Why It Matters
Browser caching is one of the easiest performance wins for any WordPress site. It costs nothing, introduces zero risk, and makes every repeat visit nearly instant. The first visit still requires downloading everything, but for returning visitors — which are often your most valuable audience — cached files mean your site feels lightning fast. Google explicitly recommends efficient cache policies as part of Core Web Vitals optimization, and it directly improves your page speed scores.
Sources: Developer.WordPress.org, web.dev