What is browser caching?

Browser caching: definition and benefits

On the first visit to a website, the browser has to fetch every file from the server. On further page views, however, the logo, fonts, stylesheet, and scripts usually do not change. Browser caching makes sure these files stay on the visitor's device. Subsequent pages and later visits therefore load noticeably faster.

The server controls this through HTTP headers, above all Cache-Control. The site owner uses it to define which files may be cached and for how long. The mechanism is described in the HTTP standard RFC 9111. Without suitable headers, the browser decides on its own, which often leads to unnecessary or outdated caching.

How caching works

With every file, the server sends headers that determine its lifetime in the cache. When it expires, the browser asks whether the file has changed. If it is unchanged, the server answers with just the short status code 304 (Not Modified) and thus saves the repeated transfer.

• Cache-Control: max-age – duration in seconds for which a file counts as current
• ETag and Last-Modified – identifiers the browser uses to check for changes
• no-cache – check with the server before every use
• no-store – do not store at all, for example for sensitive data
• immutable – the file never changes, no revalidation needed

Real-world example: a car dealership changes its design

A car dealership changes the colors in its website's stylesheet. Regular customers still see the old design because their browser still has the file in its cache. The solution is called cache busting: static files get a hash in their name, for example style.3f9a1c.css. When the content changes, the file name changes, and the browser loads the new version right away.

Such versioned files may stay in the cache for up to a year, because every change automatically gets a new name. The HTML document itself, by contrast, gets a short lifetime or no-cache so that it always points to the current file names as soon as a file has changed.

Benefits, limits, and common mistakes

Good caching shortens load times, relieves the server, and reduces data usage. It is one of the most effective page speed measures, without changing design or content. It only helps returning visitors, though; the first visit does not benefit and still needs lean files. Common mistakes:

• Long lifetime without versioned file names: changes do not arrive
• No cache headers at all: every file is reloaded every time
• Personalized content accidentally cached publicly
• HTML pages with a long lifetime: visitors see outdated content

Imple­menta­tion

Caching is configured in the web server (Apache, Nginx), in the CDN, or via plugin. Nano Concepts configures cache headers to fit the application, sets up versioned file names in the build process, and uses measurement tools to check that all files are delivered correctly and changes reach visitors.