DIY: Optimize your browser cache

DIY: Optimize your browser cache

Post author

Categories

Tags

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.

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.

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’d like to highlight our favorite.

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.

WP Rocket is really our first recommendation. Having said that, WP Engine as a host is also caching very well by default! At yoast.com, we use WP Engine in combination with Sucuri’s WAF. Just to be complete :)

Get free SEO tips!

Get weekly tips on how to optimize your website's SEO, usability and conversion

Be the first to know about new features and other cool (free) plugins.

Get our free 50-page SEO guide right away to help you become an SEO genius.

Michiel is one of the partners at Yoast and our COO. He's happily married to Esther and proud father of his two daughters Puck and Linde. He was one of the first bloggers in the Netherlands and co-founded one of the first Dutch blogs about web design and blogging. At Yoast, he works as a senior SEO consultant for both customers and colleagues. And obviously is a daily, heavy user of all of our plugins!

I do. The thing is that W3 Total Cache allows you to tweak performance even more, gaining perhaps some extra points in for instance Google PageSpeed. But for the majority of things to do when optimizing for speed both work, but WP Rockets is definitely the one to use for the vast majority of WordPress users.

I’ve been using your plug-ins for some time now and it’s great. Thank you for this article. I still use W3 Total Cache on all my websites and did try WP Rocket : I’m thinking of switching, because I’m not sure that W3TC is still developped and/or supported (it’s been said on the support forum), but I have no confirmation.
Do you have insider information about that ? :-)

Thanks for this! I tried W3 Total cache with no luck. Then, I decided to try WP Super Cache, and now, after doing some reading, I’m afraid to uninstall it. I’ve heard good reviews about WP Rocket and wish that I had tried them first. Because they offer support, maybe they can help me uninstall WP Super Cache. I’m afraid of messing up my site. Thank you, again, for the helpful information.

Great article, thanks.
Any suggestions for additional caching when running under CloudFlare? All CF speed options are toggled including Rocket Loader.
I have seen a noticeable increase in performance when caching pages to disk with W3TC on top of CF.

To be honest, I haven’t tested Cloudflare enough to answer that question. I do know that if you have the option to cache ro anything else than disk (probably still your own server, right), that might work eveb better.

Very good post. Really who does not know the confgurar W3TC can do very badly. I have seen several websites mangled because of it. And each webste need a different configuration for the host and the theme can infuence much.

Hi Martin, thanks for your comment! .htaccess is a powerful thing to play with and a lot of website owners haven’t even heard of it, I left it out so no harm can be done on the account of this article. Plugins, especially WP Rocket, make browser caching a lot easier.