How to optimize the web cache?

Web cache is a critical technology for optimizing performance on today's websites. Like any type of cache, its function is to store information temporarily to speed up a process, in this case being the loading of websites along with its elements. Similarly, this also reduces the computational load on the servers.

The web cache has become practically essential for a good browsing experience, since each time the sites are getting bigger and heavier. Thanks to this technology, load times can be imperceptible for users, in addition to reducing the consumption of their mobile data.

In a way, this action of using temporary information instead of the most recent one (sent again by the server) can cause problems. Because it is composed of static files (such as scripts, style sheets and images), it may be that when making changes to any of these resources, these may not be sent to the client in their most recent form, but instead keep the old information . Because of this, something on the site may stop working or may simply not reflect the latest changes.

There are a number of ways to solve these problems and continue to take full advantage of this technology. We will talk about some techniques in this article so if you are a programmer, keep reading.

Techniques for optimizing the web cache

The following are some techniques of Cache Busting, which can be implemented quickly and safely.

Modify file name

It simply consists of modifying the file name, preferably as a version control. After changing it, the browser cannot determine that it is cached, so it is forced to load it from the server. For example:

It must be taken into account that the file with that name must exist, in case of not resorting to the technique of modifying .htaccess, which we will not cover in this article. Renaming can be done automatically with a JS or CSS compiler, avoiding manual work.

Modify file directory

It consists of modifying the file directory, preferably as a version control. Being a different URL, the browser will not use what it has in cache. For example:

Keep in mind that the file has to exist in the specified directory for it to work.

Query strings

It consists of adding a query string to the file's URL, causing the browser to interpret it as a completely new resource. It is one of the simplest methods and used by CDNs.

Do not forget to change the version every time it is necessary or, failing that, assign a random value or even a timestamp.

An example to generate the version dynamically, through pure PHP would be:

< link rel=”stylesheet” href=”/css/style.css?version= ”/>

Although it would be better if we could take advantage of the benefits of the cache and forget them at your convenience. For this, you can rely on the following example in PHP:

< link rel=”stylesheet” href=”/css/style.css?version= ”/>

<script src=”js/miScriptImportante.js?version=<?php echo filemtime(“js/ miScriptImportante.js”)  ?>”></script>

Note that the important thing is to use the function filemtime ("fileAddress"), to obtain the date of the last modification of the file. This way we can ensure that the cache is ignored only when a file has changed. Of course, you have to make sure that they are worthwhile changes, since any small change would cause the most recent file to be sent.

conclusion

While Web Cache is a technology capable of dramatically reducing site loading time, it can create some headaches by not reflecting major resource changes. For this reason, it is important to take into account the techniques to ignore it when necessary.

Share if you like it