Overview

A common issue many run into when updating certain aspects of their website is the changes not displaying. Where there’s static media involved, this is a common issue as these items are explicitly cached by web browsers and the changes may not display as you expect. Examples of the files affected (but not limited to) are:

  • Images (jpeg, png, gif and similar)
  • Stylesheets (css files)
  • JavaScript files
  • Fonts
  • PDF’s

If you’ve replaced a file with the same name, your web browser won’t request a new version of the file and instead use a copy it has locally. This is to make sites load faster, rather than loading the same thing over and over.

You can test that the browser cache is the reason by opening your site in a different browser (which you haven’t used for the site before) or by using an incognito window (which bypasses the existing cache). If you see the changes, it means the browser is caching the information.

Of course, if you make a change and want this to display, it means you need to use a cache busting method to force it to display.

Cache Busting

Simple Static Website

If your website using using a Content Management System (CMS) such as WordPress and is instead flat HTML. The simple fix here is to simply use a different filename. For example, if you make a change to your stylesheet then instead of using styles.css (for example) as the name, update the name to stylesv2.css. You could also add an optional GET variable to the end, eg:

<link rel='stylesheet' href="/media/styles.css?version=29SEP22v1" type='text/css' />

By simply editing the existing styles.css and then updating the variable (eg, you could change to 29SEP22v2) you’re still loading the same file but the browser will treat it as differently and reload it.

WordPress

Stylesheet changes

All properly coded themes with modern themes and page builders should properly do this for you. However, if you have a hand code theme which needs some updating, you’ll need to ensure it’s using proper functions such as wp_enqueue_style. One simple trick for this is to use the timestamp of the file (which updates when you edit it) as the versioning for wp_enqueue_style which will automatically update anytime you edit the file. For example:

// Version CSS file in a theme
wp_enqueue_style(
	'theme-styles',
	get_stylesheet_directory_uri() . '/style.css',
	array(),
	filemtime( get_stylesheet_directory() . '/style.css' )
);

Source: https://kellenmace.com/force-css-changes-to-go-live-immediately/

Media

If you use the Media Library, this is automatically taken care of for you. However, if you manually replace a file using the Plesk File Manager or FTP, you will run into issues. The solution of course is to always use the WordPress Media Library. If you’ve mistakenly replaced a file and it’s not displaying, we recommend uploading a copy to the media library and then updating content to reference the new image or file.

Was this article helpful?

Related Articles