What is browser caching and how does it speed up a website?

When a browser downloads an image, script or stylesheet, it can keep a copy on the visitor's device. Cache headers sent by your server tell it how long that copy is good for. With sensible headers, a visitor's second page and their next visit load almost instantly, because most of the files are already there.

Why it matters

Without cache headers, or with very short ones, the browser downloads the same logo, the same stylesheet and the same fonts on every page of every visit. Visitors who browse five pages download the site five times. Caching makes the first page no faster, but it makes every page after it dramatically faster, and it is the second and third pages that turn a visitor into an enquiry.

How it works

The server sends a Cache-Control header with each file saying, for example, "max-age=31536000", meaning keep this for a year. Files that never change, such as images and fonts, can be cached for a very long time. The page itself is usually cached for a few minutes or not at all, so that edits appear promptly. To change a cached file safely, sites give the new version a new name or a version number in its address.

How to check

Our check reads the cache headers on the files linked from your home page and reports how many have none, or a very short lifetime. Google's PageSpeed Insights lists the same files under "Serve static assets with an efficient cache policy".

How to fix it

It is a few lines of server configuration, which on Apache go in the .htaccess file and on most hosts is a control panel setting called expires headers or browser caching. WordPress caching plugins set it for you. If you use a content delivery network it usually applies sensible defaults. Aim for at least a month on images, fonts, scripts and stylesheets.

Not sure how your own site does on this? Run the free check: it takes about twenty seconds and reports on this and thirty other things.

Check my website

More guides