Leverage Browser Caching for a Lightning-Fast Website

Car light trails on a highway giving the impression that the cars are moving very fast.

Caching is the practice of storing data, like files or page content, in a temporary location so that it can be served up more quickly to the end user. It’s one of the best ways to improve your website’s load times, and if you’re working with WordPress, there are quite a few ways to take advantage of it.

Caching can happen in different places: From the browser where you visit the site, to the server that hosts the files. In this article we’ll be taking a closer look at browser caching.

 

Browser Caching

The browser you use to view websites will attempt to cache different parts of those websites. That’s why a website often loads more quickly after you’ve already visited it. The most common files that the browser will cache are CSS and JavaScript files – files that change infrequently once a site is live and in production (unlike the content of the pages).

How does the browser know to cache which files for how long? When a file is requested from the server it lives on, the server sends along this information with it. The caching configuration can therefore be set up by the server administrator. Plugins like W3 Total Cache and WP Fastest Cache allow a WordPress administrator to enable and configure browser caching – the former more granularly, the latter more generally.

 

Browser Caching – For Developers

When the time comes to update your CSS or JavaScript files, it’s important as a developer to understand “cache busting” – that is, forcing the browser cache to ditch the old version of your file in favor of the new one. A common and simple way to inform the browser that a file has been updated is to include a version number as a query string in the file URL. CSS-Tricks explains this strategy and others.

A similar strategy exists for file resources utilized by WordPress themes and plugins. For example, say you’re a theme developer and you’ve made changes to the theme’s style.css file. The wp_enqueue_style function has a parameter for Version. If you increment this version number every time you make a change to the file, the browser will pull the updated file.

A screenshot showing how to utilize the "version" parameter of the wp_enqueue_style function.
Update the version number when you make changes to your enqueued files.

Browser Caching – For End Users

Because of the cache-busting strategies described above, the end user should never really need to empty out their browser cache. But if the need arises, clearing the browser cache is super easy: on PCs, press Ctrl + F5 while viewing the site in the browser. On Macs, hold down ⇧ Shift and click the Reload button. This is sometimes referred to as a “hard refresh” or “hard reset”.

 

To ensure that your customers get where they need to go quickly and never miss a change, make sure you’re taking advantage of browser caching!

Share

Similar Posts
Also tagged Web Optimization

Decrease load speed on your WordPress website

Also tagged Web Optimization

Website Performance Tools

Also tagged Web Optimization

Web Accessibility: Designing for Disabilites