Browser caching is the way a browser stores files from your website on a local computer. Browser caching makes sure all files load without unnecessary server connections, which is much faster. In this article, we’ll tell you how to check if that browser cache works and how to optimize it in WordPress. We’ll tell you how we approach this in our website reviews.

What is browser cache?

Browser cache allows you to skip server connections and pull resources right from your local computer. This cache works like the temporary internet files that take up so much space on our computer. You want it there, as it helps to speed up things. But you don’t want it there forever, as things might change on a website. You can set this ‘refresh’ rate to whatever expiration time your want: the longer, the better.

List of expiration times

In most cases, you can set expiration times in seconds. Here’s a handy list of possible expiration times for your browser cache:

• 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 assets or assets that change infrequently. For the majority of sites, that’s right. However, the right time of expiration largely depends on how often your content changes. If you have a news site, your homepage changes all the time. You can set the expiration time for your homepage’s content (HTML) at 3600 seconds (1 hour) without a problem. But if you load a CSS file in that homepage, that will probably only change during a redesign. The expiration time for that CSS file can easily be 31536000 seconds (a year). Please test and find what works best for your type of content.

Order your review NOW and we’ll throw in a one-year license premium plugin of your choice for free. We’ll configure that plugin for you as well!

Buy now for just $699! »
Offer valid until the 30th of June

Testing your browser cache

In this section, we’ll show you a couple of site speed tools we use to check browser caching in our reviews. Which one you’d like to use to check browser caching for your website, depends on personal preferences as well.

YSlow

My personal favorite for checking browser caching is Yahoo’s YSlow. It’s available as a browser extension, works pretty fast and checks a lot more that just the expiration times of your browser cache. Here’s a screenshot:

ETags

Besides just a simple expire headers check, YSlow also allows you to check for entity tags, which are also called ‘ETags’. These ETags are used to “determine whether the component in the browser’s cache matches the one on the origin server.” This helps a browser determine if a new file is available. Note that ETags tend to slow down a website, so please dive into the subject and see if you really need these.

As you can see in that image (click to enlarge), the first file is a CSS file that has a one day expiration time. The screenshot was taken June, 20th and the file expires on the 21st of June. I don’t think that is necessary; in most cases, set expiration times for CSS files to a year.

Google PageSpeed Insights

Google provides its own check for browser caching in PageSpeed Insights. If the section ‘Should Fix’ contains the recommendation ‘Leverage browser caching’, you should definitely address this.

As you can see in the image above, like YSlow, Google PageSpeed Insights tells you which files need a (far future) expiration date. And that these are usually CSS files,  JavaScript files or (template) images.

If these tools aren’t clear enough, there are more tools we rely on to do extra checks, like Pingdom and GT Metrix.

WordPress plugins that help browser caching

Browser caching is something you can for instance set in your .htaccess file. For most users, that’s probably not something you do every day. However, if you are using WordPress, you’re in luck. There is a number of plugins that can help you with this. We have listed two for you below.

WP Rocket

At Yoast, we’re fans of the WP Rocket plugin. It’s simplicity, combined with a lot of options, make this our to-go-to speed optimization plugin. Browser caching is enabled right after activation of the plugin. Feed cache and mobile cache can be enabled in the plugin. Find out more here.

W3 Total Cache

Because of the labyrinth of options this plugin has, we stopped recommending W3 Total Cache for the average WordPress user. However, it does have more specific browser caching options than most other plugins. In WordPress (with this plugin installed), go to Performance > Set expire headers and enable these. After that, go to the separate sections for CSS/JS and HTML and choose your section-specific expire time.

WP Rocket is really our first recommendation. But if you know your way around speed optimization, feel free to check W3 Total Cache as well.