Avoiding Caching(CSS & JS) During Dev

Avoiding Caching(CSS & JS) During Dev

In this post, we are going to take a look at how we can avoid browser caching during the development of our WordPress site. But before moving forward let’s begin with a question.

What is Caching?

Have you ever noticed during development that despite the fact you have made changes to your CSS or JS file and you are refreshing the webpage after saving the changed file, you still see the old copy of the page and not the updated one.

For beginners, it can be confusing and frustrating but the culprit is usually caching. Your web browser is using a cached or downloaded copy of the file instead of actually re-downloading and using the newest copy of the CSS or JS file.

Let’s see how we can see caching in action in your web browser. So on our site, you can right-click anywhere on the page and choose to inspect. This will open up the developer tools window in the chrome browser. Then click on the tab that is named Network.

Now with this Network tab open if we refresh the page, we can see all of the different files that this website needs.

For our quick example to learn about how caching really works let’s click on a JS tab in the filter bar on developer tool.

Now take a look at the file named scripts-bundled.js and pay attention to the size and time columns against this file.

Notice that every time we refresh, it says that it takes 0 ms to load that file. Now whenever you see 0 ms or in the size column – from memory or from disk, this means that the browser is not re-downloading the file instead it’s just using the saved or cached copy. Now a lot of time that’s great. It can make your site load faster for your visitors, however, during development, we are going to be changing our files very regularly and when we switch back from our text editor back to our browser, we want the browser to be always using the updated copy of our file

So the question becomes how can we force the web browser to re-download our copy of JS or CSS file?

Solution

Within your theme folder jump into the file named functions.php which enqueues the JS and CSS file via code like below:

<?php

function university_files() {
  wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'university_files');

?>

Notice in the above code when we loaded the main JS file scripts-bundled.js we set its version to ‘1.0‘. Now just as a test let’s change the version to ‘2.0‘ and save our file and then reload the webpage with developer tool open on the Networks tab. You will see something like below:

Notice that our scripts-bundled.js file now shows that it is 93KB in size and it took 627ms to load. This is because the web browser saw that the ver=2.0 at the end of the file request is different. However, if we refresh again. Now the browser is going to use its cached copy of ver=2.0 request.

Now obviously we do not want to keep going back and forth to our functions file and change the version number every time we update our javascript or CSS file.

So instead there is a neat little trick to avoid caching all together in WordPress during the development phase of your website.

Delete the version number you have for the CSS or JS file in your function.php file and even delete the quotes but keep the comma. In the place where quotes and version number lived type out a php function named microtime(). So the code in function.php now becomes:

<?php

function university_files() {
  wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, microtime(), true);
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'university_files');

?>

Save the function.php file and reload the browser with dev tool open on Networks tab

You can see in the picture above that the microtime()function generates the current time in seconds and milliseconds which is always going to be unique. So every time you refresh, you will see that file has a size and it has a time that it took to download it.

Now the browser is forced to actually reload that file.

Caution

You will never ever want to do this on a live production website that the general public is visiting but during development when you are coding and your files are changing all the time, this is a lifesaver.

What about CSS?

For CSS as well we will use the same technique. So the CSS line of code in functions.php file becomes:

wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());

And the entire code becomes:

<?php

function university_files() {
  wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, microtime(), true);
  wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());
}

add_action('wp_enqueue_scripts', 'university_files');

?>

Chrome Dev Tool’s Disable Cache Option

You might be thinking that we could have simply checked the checkbox named disable cache in chrome’s dev tool.

By using this option, literally every single file is going to be redownloaded every time and that can just slow down your development process.

We should only strive to disable caching for only key select files. Also in Google chrome, this will disable caching for all websites and not just your development website.

That brings this lesson to a close. Hope you find this useful.

XOXO 🙂