Tired of using the sentence “Please clear your browser cache…” with your clients over and over again? It’s time to learn how to clear CSS cache in visitor’s browsers after modifying your style sheets. Furthermore, prevent browser from caching CSS files and load the latest version.
Why browsers cache CSS files?
When loading a web page, all modern browsers save elements of the web site on the visitor’s in their cache folders. Those elements are usually images, various scripts and CSS files. Next time when the visitor access that web site, those elements won’t be downloaded again, but loaded from the visitor’s browser cache folder on the computer (smartphone, tablet, etc..). That way the web page will load much faster than if it downloads the cached files again. Therefore, the whole point of CSS cache is to enhance the web site loading speed.
With that explained, caching CSS files is a very useful feature of web browsers. So why and when should we clear CSS cache and prevent further caching of CSS files?
Why and when should you clear CSS cache in visitor’s browsers?
Every WordPress or any other web developer edit and modify CSS files quite often in the work process. To see the changes on the front end, each time developers need to clear CSS cache by performing a cache-bust. It’s a routine operation, until it comes to present the final product to the customer or put the web site live for visitors.
When a finished web site is presented to the customer, in most cases some visual corrections will be additionally requested. When corrections which will most likely include modifications of the CSS files are done, the customer reviews the web site once again. Since the customer’s browser already cached the previous version of the CSS file, most likely it won’t download the modified version, resulting with no changes in the visual appearance of the web site. In some cases it can even result with completely broken design. That’s why we need to clear CSS cache before delivering the final product.
The same scenario occurs when modifications to CSS files are done to live websites with a lot of traffic. Most visitors of such sites have the previous version of the style sheets cached in their browsers. In the best case scenario visitor won’t notice any difference in the visual appearance, but in worst cases they could witness broken designs and be unable to use the web site. Another important reason to clear CSS cache and prevent further caching of CSS files in visitor’s browsers.
NOTE: Browsers can keep the CSS files in their cache up to 1 year.
Avoid using the question “Have you cleared your browser’s cache?” with your clients over and over again. Preventing visitor’s browsers from caching CSS files is a quite simple trick.
How to clear CSS cache and prevent further caching of CSS files in browsers?
There’s no dedicated function that would make browsers clear CSS cache or delete cached CSS files when the visitor reloads a website. Luckily, there’s a way around and it consists of sending a new version of the CSS style sheet each time it’s modified. This method is pretty simple. All you have to do is change the version number of the style sheet after you’re done editing it. The version of the CSS file needs to be changed in the <link> tag in your web site’s <head> section that embeds the style sheet.
Here’s an example that shows how it works:
/* Original CSS file */
<link rel='stylesheet' id='mycustomstyle' href='/wp-content/themes/mytheme/customstyle.css' type='text/css' media='all' />
/* Original CSS file with version added */
<link rel='stylesheet' id='mycustomstyle' href='/wp-content/themes/mytheme/customstyle.css?ver=1.0' type='text/css' media='all' />
/* Modified CSS file with updated version */
<link rel='stylesheet' id='mycustomstyle' href='/wp-content/themes/mytheme/customstyle.css?ver=1.1' type='text/css' media='all' />The numerical value of the CSS file version can be any number with or without the decimal point. You can even use more decimal points, for example 1.0.0.1.
When the visitor loads a web site for the first time, his browser will cache the original CSS file, in our example customstyle.css. When the visitor returns to the web site next time, his browser won’t download the original style sheet again, but load it from it’s cache instead to enhance loading time. If you modified the original CSS file between the two visits, the browser won’t show any changes unless the visitors manually clear CSS cache.
By adding the query string parameter ?ver= at the end of the CSS file name, we’ll make the browser compare the version of the previously cached style sheet and the version currently on the website. If the version number on the website is different from the cached version, the browser will download the CSS file instead using the cached version.
NOTE: Some browsers won’t cache CSS files containing the ?ver= parameter at all, which means using the version query string would disable caching of CSS files. Nowadays, more and more browsers cache version parameters, so the best practice would be to update the version number each time the style sheet is modified.
Pro Tip: At this point we assume you are familiar with embedding custom CSS files into WordPress or any other web sites. If you’re not sure how to do it, please read our Tutorial about embedding CSS files into WordPress before you continue.
Changing CSS file version number in hard coded style sheet embeds
Even though hard coding of CSS files into a WordPress website <head> sections is not the recommended practice, such cases are quite common. Hard coded CSS file embed means that the CSS <link> tags are manually coded into the website <head> section.
To add the file version to your embedded style sheet simply paste the ?ver=1.0 parameter at the end of the CSS file name inside the <link> tag. Every time you modify the CSS file, simply update the version parameter to make sure the visitor’s browser clear CSS cache.
Changing CSS file version number in regularly embedded style sheets
CSS files are regularly embedded into WordPress websites using wp_register_style() and wp_enqueue_style() functions inside the functions.php file. If you’re not familiar with this procedure, please read our Tutorial covering that topic.
Adding the CSS file version to the embedded style sheets is quite simple. All you have to do is add the version querry string parameter to the wp_register_style() function the way shown in the following example:
Standard wp_register_style() function without the CSS file version number:
wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );Modified wp_register_style() function containing the CSS file version number:
wp_register_style( 'custom', get_template_directory_uri().'/custom.css', '', '1.0' );Furthermore, you can skip the step of manually updating the CSS file version, and generate a new version number automatically on each page load. To do that, you need to add a function that will generate a random number to the CSS embed function. That way you can completely prevent visitor’s browsers to cache your website’s CSS files and load your pages each time with clear CSS cache.
Here’s an example of the wp_register_style() function using a randomly generated CSS file version number:
$random = rand( 1, 10000 );
wp_register_style( 'custom', get_template_directory_uri().'/custom.css', '', $random );
Prevent browser from caching CSS files and clear CSS cache using a WordPress plugin
For the less experienced users not comfortable with editing theme files, the easiest solution is using a clear CSS cache WordPress plugin. There are a couple of plugins available in the WP Plugins Repository that will prevent browsers from caching CSS files. Those plugins will allow you to change CSS files version number without any code editing.
Prevent Browser Caching by Kostya Tereshchuk is one of the most popular clear CSS cache WordPress plugins. By default, This plugin will generate a new CSS file version on each page load. You can disable this mode in the plugin settings and add a Update CSS/JS button to the WP Taskbar. That way you can generate a new random version number manually each time you modify your CSS files. The plugin will also generate a new version parameter for each JavaScript file your website uses.
Downsides of preventing browsers from caching CSS files
As the whole point of browsers caching CSS files is to enhance website loading speed, preventing them from doing it will result in slightly slower loading speed. The impact on the loading speed is not severe, but in some cases is worth taking it in consideration.
Nowadays that loading speed is a important factor in SEO optimization, many developers are optimizing websites for speed and trying to avoid anything that slows sites down. Therefore, try not to update your CSS file version too often. Update it only when it’s really necessary, for example when showing changes to your clients. Try to avoid randomly generated version numbers on each page load, unless it’s necessary for your specific project.
Featured Tutorial
- Install WordPress in cPanel – Detailed step by step tutorial
The creation of any WP based website, from simple personal blogs over popular web magazines to sophisticated web shops start ...