Web Development

How to Leverage Browser Caching

When I published our new site I had to go back to basics on a number of things. In fact 2 weeks later I’m nowhere near done but I have made significant headway and wanted to share a few things that I found – then main one being How to Leverage Browser Caching.

On-page SEO is dead

On-page SEO these days is just about dead. Of course we all still need to add the basics like Title tags and basic metadata and other basic things as keywords in H1 tags and so forth but your On-page optimization these days should be focused on site speed and making your website appear in a visitor’s window as quickly as possible. As well as the usability factor this is also a ranking metric so it’s in your interest to make your site download and render as fast as possible. Fortunately many of the things that affect PageSpeed are handled on the server side. These are such things as gzip compression, Accept-Encoding (proxy compression) and Keep-Alive settings. One thing we can also do on the server side is “Leverage Browser Caching”. But many people have hosts that don’t set these things.

How to Leverage Browser Caching

When someone visits your website your front-end files are downloaded to a temporary folder on the visitor’s computer. This is known as caching and hopefully it’s something that most webmasters are familiar with. Leverage Browser Caching means your website is telling a browser how to handle the caching, what to cache and how long to cache the files for. So your site will always load fast for repeat visitors.

How to Leverage Browser Caching on Linux servers.

To enable Browser Caching on Linux servers you will need to edit the .htaccess (or create one if you don’t have one). This is a hidden file in many FTP programs so make sure you have your FTP program set to see hidden files. Or alternative your control panel’s file manager will display by default. There are a few ways to do this but the following is the simplest (in my opinion).
Add this to the top of your .htaccess:

1
2
3
4
5
6
# 1 Month for most static assets
<filesmatch ".(css|jpg|jpeg|png|gif|js|ico|woff|woff2)$">
Header set Cache-Control "max-age=2592000, public"
 
  <filesmatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"

The first “filesMatch” line is specifying what type of files to cache. This willl be your images files, css, javascript and in mine I also have some font extensions.
The second line instructs how long to cache for. The “max-age” variable is in seconds so 1 day being 86400 seconds multiplied by 30 and we get age=2592000. Many set this to one year so research and set what you feel if a good fit for your site.

How to Leverage Browser Caching on Windows servers.

On Windows server in Plesk’s httpdocs you will have a web.config file. Find this code:

1
<system .webServer></system>

Simply add the following code straight after:

1
2
3
<staticcontent>
<clientcache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"></clientcache>
</staticcontent>

The above obviously sets a one year cache. You can change 30 to 365 to instruct a browser to cache for a year. Conventional best practices state that the caching should be at least a month so consider that before setting a lower cache timeframe.

Test It Actually Works

There are some fantastic tools that will tell you if this is working or not and also report on many other things you should consider and also provide the solutions.

https://tools.pingdom.com/

https://gtmetrix.com/

I’ll write more about the different types of caching you can do at a later date. Caching is often misunderstood and webmasters often use not enough or too much. There is a delicate balance that can be acquired for database driven sites like WordPress but it’s handy to understand what you are actually doing rather than activate multiple plugins that can often cause conflicts and resource issues.

About the author

Laurence Flynn

Hey! I'm Laurence, hosting industry veteran and entrepreneur, obsessed with web performance. My aim is to build the cheapest and fastest Optimized WordPress Hosting platform available today. Our back-end systems include Nginx and Redis combined with PHP 7, FPM and MariaDB to deliver maximum performance. Our front-end UI is powered by the beautiful Plesk control panel to deliver a smooth user experience. All secured with Imunify360, artificial intelligence and machine learning. Connect with me on LinkedIn.

8 Comments

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Hi Laurence – I’m one of your happy HN customers in Australia – I’d be even happier if pasting the code snippet in your article into htaccess work – but unfortunately on the WP site I’m trying to speed up – it causes the site to die with an Internal Server Error:-(
    Cheers
    Shane Dickinson
    iPresence

  • Hi,
    I have these lines in my virtual server config 000-default.conf:

    ## EXPIRES CACHING ##

    ExpiresActive On
    ExpiresByType image/jpg “access plus 1 week”
    ExpiresByType image/gif “access plus 1 week”
    ExpiresByType image/png “access plus 1 week”
    ExpiresByType text/css “access plus 1 week”
    ExpiresByType text/js “access plus 1 week”
    ExpiresByType application/pdf “access plus 1 week”
    ExpiresByType text/x-javascript “access plus 1 week”
    ExpiresByType image/x-icon “access plus 1 year”
    ExpiresDefault “access plus 1 week”

    1. Should I replace them with your code?
    2. Should I use your code in htaccess only, or use the virtual host conf file?
    3. Should I place your code inside ?

    Thanks!

  • Follow up:
    In question 3 my post was cut due to tags from the original code, should be like this:

    3. Should I place your code inside IfModule mod_expires.c?

    Here’s the code without tags:

    ## EXPIRES CACHING ##
    IfModule mod_expires.c
    ExpiresActive On
    ExpiresByType image/jpg “access plus 1 week”
    ExpiresByType image/gif “access plus 1 week”
    ExpiresByType image/png “access plus 1 week”
    ExpiresByType text/css “access plus 1 week”
    ExpiresByType text/js “access plus 1 week”
    ExpiresByType application/pdf “access plus 1 week”
    ExpiresByType text/x-javascript “access plus 1 week”
    ExpiresByType image/x-icon “access plus 1 year”
    ExpiresDefault “access plus 1 week”
    IfModule mod_expires.c

    • Can you let me know a little more about your hosting environment? Are you using a control panel? Is this shared hosting? There are many methods and routes to the same outcome and I have seen your code used. But using .htaccess for apache directives is the way to go. If you’re on a VPS and .htaccess isn’t working you need to edit the apache conf file to add “Options Indexes FollowSymLinks”. Your code is great if you need different cache expiries on different files but my code handles all file types. Test your site on Pingdom or GTMetrix to ensure your browser caching is working. Then you can play around with different code, test, and stick with whatever works best for you.

      • Hi Laurence,

        I’ve been using that code since about 5 years ago on all my vps servers.

        I’m not sure where I copied that code but I recall it has something to do with google’s page seo tester (from google webmaster?) flagging the lack of cache expires. Found that code, used it, and the site passed the test.

        Haven’t thought about testing them to sites you mentioned, so that’s the next thing I’ll be doing.

        Thank for your response. Very helpful post you shared.