DIY: Caching Optimization

DIY: Caching Optimization pixelwork

DIY: Caching Optimization

Browser caching is how a browser stores files from your website on a local computer. Browser caching ensures loading of all files without needing unnecessary server connections, which is much faster. In this article, I will tell you how to check if the browser cache is working and how to optimize it in WordPress.

What is browser cache?

The browser cache allows you to bypass server connections and use resources from your local computer. It works like temporary Internet files that take up a lot of space on our computer. You want it to exist, as it helps speed things up, but you don't want it to always exist, as things can change on a website. You can set this refresh rate for whatever the expiration time is, the longer the better.

List of expiration dates

In most cases, expiration times can be set in seconds. Here is a list of possible browser cache expiration dates:

  • 3600 seconds (hour)
  • 86400 seconds (day)
  • 172800 seconds (two days)
  • 604800 seconds (week)
  • 2592000 seconds (month)
  • 31536000 seconds (year)

Google recommends a minimum cache time of one week and preferably up to one year for static sites that change infrequently. For most sites, it's true.

However, the appropriate expiration time depends largely on the frequency of content changes. If you have a news site, your home page changes all the time.

You can set the expiration time for your web page content (HTML) to 3600 seconds (1 hour) without any problem. However, if you load a CSS file on that home page, that will probably only change during a redesign. The expiration time of that CSS file can easily be 31536000 seconds (one year). Please test and find what works best for your type of content.

Checking the browser cache

In this section, I'll show you a couple of site speed tools used to check browser cache. Which one you want to use to check the browser cache for your website depends on personal preference.


My personal favorite for browser cache control is Yahoo's YSlow. It is available as a browser extension, works quite fast and checks much more than just browser cache expiration times. Here is a screenshot:


In addition to a simple header expiration check, YSlow also allows you to check entity tags, which are also called “ETags.” These ETags are used to “determine whether the component in the browser cache matches the one on the origin server.” This helps determine if a new file is available. Keep in mind that ETags tend to slow down a website, so please dive into the topic and see if you really need them.

As you can see in the image, the first file is a CSS file that has an expiration time of one day. I do not think that it's necessary; In most cases, set expiration times for CSS files to one year.

Google Insights PageSpeed

Google provides its own browser caching checker in PageSpeed ​​Insights. If the 'Should fix' section contains the recommendation 'deliver browser cache', you should definitely address this issue.

If these tools are not clear enough, there are more tools that we depend on to do additional checks, such as Pingdom and GT Metrix.

WordPress Plugins That Help Browser Cache

Browser caching is something that can be set, for example, in the .htaccess file. For most users, it's probably not something you do every day. However, if you're using WordPress, you're in luck. There are a number of plugins that can help you with this. We have made a list below.


WP Rocket's simplicity, combined with a wealth of options, make this an essential plugin to speed up optimization. Browser caching is enabled immediately upon activation. Mobile cache can be activated as well.

W3 Total Cache

Due to the maze of options in this plugin, I have stopped recommending W3 Total Cache for the average WordPress user. However, it has more specific browser caching options than most other plugins.

In WordPress (with this plugin installed), go to Performance > Configure Expiry Headers and enable them. After that, go to the separate sections for CSS/JS and HTML and choose the expiration for your specific section.

Rocket WP is really my first recommendation. But if you are well versed in speed optimization, feel free to check out W3 Total Cache as well.