Invalidate Browser Cache the Easy and Smart Way

Browser caching is a mechanism that allows static files such as CSS, JavaScript, and images to be stored locally on the user's device in order to improve website performance and reduce bandwidth consumption. When a user visits a web page, the browser checks whether it has previously downloaded certain resources and, if they are still valid, loads them from the local cache instead of requesting them from the server again.

🔗 Do you like Techelopment? Check out the site for all the details!

How Caching Works

The browser determines whether to use the cache based on previously received HTTP response headers. The most important of these are:

• Cache-Control: Specifies caching rules, for example max-age=3600 indicates that the resource can be reused for one hour (3600 seconds).
• ETag: A unique identifier that changes when the resource is modified. The browser can send an If-None-Match to the server to check if the file has been updated.
• Last-Modified: Indicates when the file was last modified. The browser can send an If-Modified-Since and get a 304 Not Modified response code if the file is still valid.

If the resource is already in the cache and the headers indicate that it can be reused, the browser loads it locally without making a new request.
For example, if an HTML page references a CSS file:

<link rel="stylesheet" href="styles.css">

The browser could store style.css and reuse it for subsequent visits without having to download it each time.

Resource Update Problem

Although caching improves loading speed, it can create problems when updating static resources. If a CSS or JavaScript file is modified, users may continue to see the previous version because the browser is still using the cached one.

In fact, most of the time the response headers (Cache-Control, ETag, Last-Modified described above) are set to cache resources for a very long time or even indefinitely. This behavior, while useful to reduce the number of requests to the server, may not match the needs of updating resources, especially in case of urgent bugfixing or release of new features that must be made available to users immediately.

Solution: Add a Timestamp in the Query String

A common way to force the browser to download an updated version of a resource is to add a parameter to the URL query string, such as a timestamp that changes with each update.
For example, instead of:

<link rel="stylesheet" href="styles.css">

you can use:

<link rel="stylesheet" href="styles.css?t=1739708130">

This way, when you want to update the styles.css file, you just need to change the timestamp value:

<link rel="stylesheet" href="styles.css?t=1739710000">

Since the URL changes, the browser will not use the previous version from the cache but will download the new one.
It is important to note that the timestamp is just a value used to ensure a unique parameter in the URL and is not necessarily linked to the actual date of update of the resource. We could use any other parameter in query string, such as:

<link rel="stylesheet" href="styles.css?x=value1">

and subsequently:

<link rel="stylesheet" href="styles.css?x=value2">

The important thing is to make sure that the chosen value has not been used in the past, otherwise the browser may still have the cached copy of the resource associated with the old value and not download the new version (this is why using timestamp is safer).

Implementation in JavaScript and PHP

If you want to automate this process, you can generate the parameter dynamically. In PHP, you could do this:

<link rel="stylesheet" href="styles.css?t=<?php echo time(); ?>">

Or based on the last modification of the file:

<link rel="stylesheet" href="styles.css?t=<?php echo filemtime('styles.css'); ?>">

In JavaScript, you might do something like this:

const cssFile = 'styles.css?t=' + new Date().getTime();
document.write('<link rel="stylesheet" href="' + cssFile + '">');

Using browser caching is essential for improving website performance, but when updating static files, it is important to ensure that users download the latest version. Adding a unique parameter to the URL of static resources is a simple and effective technique to force the browser to get the latest files without compromising the benefits of caching.

---

Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment