CSS Changes Don’t Show Up

In this Article

If you are making changes to the CSS files on your site and you've cleared the WP Rocket cache,  but you don't see the changes right away, it's because they are getting stuck in your browser's cache. You'll notice that no matter how many times you clear the WP Rocket cache, you still see the old file, and can only see the new one after clearing your own browser's cache.

Browser Caching

For a more detailed information on how browser caching works, please read this article: 
https://wp-rocket.me/blog/browser-caching-explained-in-plain-english/

To give a very short summary of the issue and what's going on: 

Let's say you have a file: style.css
When you visit your website, your browser downloads that file and keeps a copy of it in it's local cache, ie. it lives on your computer, in that specific browser, not in the WP Rocket cache. 

When you update that CSS file, you need to let your browser know that it's been updated, otherwise it will say, "I already have style.css right here, no need to download it again, here it is....voilà!" and it shows you the old version.

To prevent this, usually files have a version number appended like this: 

style.css? ver=1

And when the file is updated, the version is updated: style.css? ver=1.1
This lets the browser know to download the new version instead of reusing the old, stored version.This is called "busting the browser cache".

How To Bust The Browser Cache

The most important thing to do is always make sure the version number is updated. You do that by simply changing the version number at the top of your stylesheet after you make a change: 

This version will be reflected in the new query string, triggering the browser to download the new version.

If you use the  Static Resources option in WP Rocket, updating the stylesheet version triggers the plugin to generate the new version of your stylesheet, correctly cache busted without query strings. So your visitors will always see the latest version. 

Our Static Resources option encodes the version number into the filename to correctly bust the browser cache. If you are using a different plugin to remove the query strings on your files, they usually do it incorrectly by simply removing the query string without providing any way to bust the cache, so you should not use a plugin like that ;)

Note: If you have other caching layers like Cloudflare, Sucuri's CloudProxy, or a CDN service, you may also need to clear the caches there to see your latest CSS  updates.

Unique Themes - Genesis, X Theme etc

When using some themes, like Genesis and its child themes, you have to do something a little different to update the stylesheet version. When using a Genesis child theme, the version number in the query string defaults to the version number of the parent theme. This is problematic because even if you update your child theme version, it doesn't change the query string. 

With Genesis, you have to add the following line to your functions.php and then update the version number here, instead of in the stylesheet:

define( 'CHILD_THEME_VERSION', '2.1.8' );

With X Theme you have to do something similar. You can find the details in their  forum (login required).