Browser cache

What we check

We load the home page in a real browser and look at all images, stylesheets, scripts and fonts that come from the website's own server. For each file we check whether the server sends a cache setting (Cache-Control with a duration, or Expires).

• If it is missing for at least three files and at least half of all the site's own files, there is a warning.
• If it is missing for individual ones, a note.

Files from foreign services such as Google Fonts or YouTube do not count, because their settings cannot be influenced from the website.

Why it matters

Anyone who visits the website downloads all files on the first visit: logo, fonts, stylesheets, scripts. When moving to the next subpage or visiting the next day, most of them are still the same.

With a cache setting the browser knows that it may keep them, and reuses them without asking. The second page then loads almost instantly.

Without a cache setting the browser asks the server on every page change whether anything has changed, or loads everything again. This costs time and data volume, especially on a smartphone. Precisely those who look at several pages, that is who are seriously interested, then wait the most.

How to fix it

For files that rarely change, a long duration is usual:

File type	Recommended duration
Images, fonts	1 year
CSS and JavaScript with a version number	1 year
CSS and JavaScript without a version number	1 week to 1 month
HTML	short or none at all

Apache (.htaccess)

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

WordPress

Cache plugins such as WP Rocket, W3 Total Cache or LiteSpeed Cache set the cache settings with a tick, usually under "Browser cache". WordPress automatically appends a version number to stylesheets and scripts (?ver=…), so changes still arrive immediately.

Hosting panel and CDN

Many hosting providers have a "Browser caching" setting. A CDN such as Cloudflare also sets the rules, check the "Browser Cache TTL" there.

Wix, Jimdo, Squarespace

The builders handle this themselves. There is nothing to set here.

How to check it yourself

Open the developer tools (F12), "Network" tab, reload the page and click an image file. Under "Response headers" there should be cache-control: max-age=… with a large number (seconds). Reload the page again: for cached files the "Size" column then says "(memory cache)" or "(disk cache)".

Frequently asked questions

Will visitors then not see outdated content?

Not if it is done properly. The HTML itself is not cached for long. Images, stylesheets and scripts get a new file name or a version number with every change, and most CMS do this automatically.

What is the difference from the page cache?

The page cache sits on the server and saves computing time when building the page. The browser cache sits with the visitor and saves downloading files again. The two complement each other.