DIY: Optimize your browser cache

DIY: Optimize your browser cache

June 20th, 2016 – 21 Comments

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 Yoast SEO care.

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.

Become a technical SEO expert with our Technical SEO 1 training! »

Technical SEO 1 training$ 199 - Buy now » Info

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:

Browser cache: yslow 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.

Browser caching: pagespeed insights screenshot

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 :)


21 Responses to DIY: Optimize your browser cache

  1. Sascha
    By Sascha on 30 June, 2016

    Thanks for another great article.

    Being a W3 Total Cache user myself I’d sure agree about it’s myriad of options and possible pitfalls. Would you say WP Rocket is able to achieve similar speed gains despite it’s simplicity?

    • Michiel Heijmans
      By Michiel Heijmans on 1 July, 2016

      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.

  2. raj
    By raj on 29 June, 2016

    I will definitely try WP Rocket Plugin.

  3. priya
    By priya on 29 June, 2016

    Is cloudfare fine?

    • Michiel Heijmans
      By Michiel Heijmans on 29 June, 2016

      Don’t know, have you tested it on your website? That’s really the best way to find out. MaxCDN is also an alternative, for a comparison see here.

  4. 250
    By 250 on 29 June, 2016

    Thank you, for the helpful information .

  5. Alessia Martalò
    By Alessia Martalò on 28 June, 2016

    WP Fastest Cache, in my opinion, is absolutely the best caching plugin :)

  6. Stefan
    By Stefan on 25 June, 2016

    Hi,

    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 ? :-)

    • Michiel Heijmans
      By Michiel Heijmans on 28 June, 2016

      Nope, but I’d give WP Rocket a spin for sure. I really like it!

  7. laura routh
    By laura routh on 24 June, 2016

    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.

  8. ankita
    By ankita on 21 June, 2016

    Great information.. this article is very helpful for seo point of view.

  9. Doc
    By Doc on 20 June, 2016

    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.

    • Michiel Heijmans
      By Michiel Heijmans on 21 June, 2016

      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.

      Anyone any thoughts on this? Please do comment!

  10. Jan Reilink
    By Jan Reilink on 20 June, 2016

    Nice article. And what about AppCache (manifest) next to browser cache, any opinion?

    • Michiel Heijmans
      By Michiel Heijmans on 21 June, 2016

      Depends on multiple things, enable it and test it ;-)

  11. Montar loja Virtual
    By Montar loja Virtual on 20 June, 2016

    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.

    I got good results with W3TC but the host also helps a lot .

  12. Martin
    By Martin on 20 June, 2016

    Why not add the code for the htaccess in this blog as well? For those who want to limit their plugin numbers.

    • Michiel Heijmans
      By Michiel Heijmans on 21 June, 2016

      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.

      If you want to use .htaccess for browser caching, please check this article by GT Metrix.

      • Martin
        By Martin on 25 June, 2016

        Your link doesn’t seem to work. Could you point me to the correct page?
        I know what to add to the htaccess but I would still like to read that article to see if there are any pointers I missed.

        • Michiel Heijmans
          By Michiel Heijmans on 28 June, 2016

          Fixed, Martin. I forgot to include http:// in the link. Done now :)


Check out our must read articles about WordPress