Speeding up WordPress with Leverage Browser Caching

Site speed and page load times are now an important component of the Google ranking algorithm, which can affect search engine rankings of your site. If you have tested your webpage for speed by using Google PageSpeed and found out that you need to use browser caching, here is how you do it.

Why does your website need browser caching?

Browser caching can help by storing some of these files locally in the user’s browser. If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, JavaScript, pdf, swf etc. from local disks rather than over the network. This means that when a visitor goes to another page on your website it does not have to go get your website’s elements like logo or CSS file again, because it already has it “remembered”. The end result of this is that your pages load much faster.

Speed up WordPress with Leverage Browser Caching
Speed up WordPress with Leverage Browser Caching

So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster.

Online tools to testing your website speed

I found many online tools to help you test your website’s speed. To get the best result, I recommend you use more than 3 tools and methods to test your website because they working from each differences location and use they own testing methods. I used some tools:

  • Google PageSpeed: Fast and optimized pages lead to higher visitor engagement, retention, and conversions. The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.
  • Pingdom Tools: All tests are done with real web browsers, so the results match the end-user experience exactly. They use a bunch of instances of Google’s Chrome web browser to load websites, record performance data, and so on. Tests are done from dedicated Pingdom servers.
  • GTmetrix: GTmetrix uses Google Page Speed and Yahoo! YSlow to grade your site’s performance and provides actionable recommendations to fix these issues.
  • WebPagetest: Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

How to Speeding Up your Website with Leverage Browser Caching?

Fortunately, you can enable Leverage Browser Caching with .htaccess file.
First of all, we need to disable ETag header since we are going to use Expires. ETag technology is known as slow and problematic – even YSlow complains about it.

Header unset Pragma
FileETag None
Header unset ETag

Now, we’ll enabling Leverage Browser Caching

## Leverage Browser Caching ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

## Leverage Browser Caching ##

Upload .htaccess file to the /public_html folder on your web server and then re-testing your webpage. You’ll see the Leverage Browser Caching was enabled.
The expires values can modifiable depending on your specific requirements. The values above are pretty optimized for most webpages and blogs. If you want to know more about Leverage Browser Caching you can read the Apache Module mod_expires documents and how generation of Expires and Cache-Control HTTP headers instruct the client about the document’s validity and persistence. The more static or unchangeable your resource, longer the period you can enable browser caching.

The .htaccess is too large, can I optimize it?

Yes, you can. We can use regular expressions to make it smaller and look more beautiful

  ExpiresActive on ExpiresDefault "access plus 14 year" Header set Cache-Control "public"    Header set Cache-Control "max-age=7200, must-revalidate"  

I'm using NGINX, how can I enable it?

The corresponding settings in NGINX would look something like this:
location ~* .(jpg|png|gif|jpeg|css|js)$ {
        expires 1m;
}

Use WordPress plugins to help you enable Browser Caching

I found some WordPress can help you enable and set the expires values of Leverage Browser Caching feature.

Fresh Performance Cache
Fresh Performance Cache

I recommend you using this plugin, it has almost features to help you boost your WordPress site performance by minifying, combining, compressing and caching your files.
Main Features

  • White Label Admin – no advertising or Fresh branding anywhere
  • Small Footprint – The interface is located directly in “WP-admin -> Settings -> Performance Cache”
  • Minifies CSS/JS
  • Uses gzip compression – huge boost when it comes to file size compression
  • Super fast Cache
  • Intelligent combining of cached files – Can skip problematic files, automatically skips conditional stylesheets and much more
  • Files are cached and combined together in the same order they were in originally
  • Native one-click updates to new versions from “WP-admin -> Dashboard -> Updates” – you do not need any purchase code, it just works
  • Great for ThemeForest authors to include in their WordPress themes for sale – requires Extended license

Alternative WordPress plugins

  • W3 Total Cache: Improve site performance and user experience via caching: browser, page, object, database, minify and content delivery network support.
  • WP Super Cache: A very fast caching engine for WordPress that produces static html files.
  • Borlabs Cache: SA cache plugin like Borlabs Cache saves the dynamically generated content as a static file on your server’s storage. When the page is requested, this static file is loaded and send to the visitor, which is dramatically faster than the regular database requests. But that is not all. Your pages contain a lot of unnecessary whitespace or HTML-Comments, which only increases the overall size of the page, but are not important for your e.g. layout or design. Borlabs Cache removes all of them and uses GZIP to compress your page, which saves your and your visitor’s traffic.

Whew! Still reading?

If so, great! You’re well on your way to a much faster website. It's so easy to improve your website speed with simple steps and the you get the great result. We hope you follow some of these tips and make your site faster. Share with your friends and post your tips in comments.

18 thoughts on “Speeding up WordPress with Leverage Browser Caching”

  1. Hello,
    very complete post but WP Super Cache does not sett an expiry date or a maximum age in the HTTP headers for static resources !
    I’m looking for a plugin just for that, do you have a clue ?
    Regards

    Reply
  2. WP Super Cache can set it, you need check via Compatibility Check button. My hosting has same problem but I contact with hosting service admin, they fix it for me.
    Plz try again

    Reply
  3. I did this on htaccess file. I want to know how much time would it take to come in effect? As it’s been some minutes now.

    Reply
  4. i want ask you , is adding the code above , is first way , and active plugin is another way?
    or all related , run this and that ?

    because i have cach wp plugin active , and support of web hosting told me that it will add the code automatically ;

    shall i disable the plugin to add the code about lever caching browser ?

    thank you

    Reply
  5. Hey, I am trying to copy-paste the code for leverage browser caching.

    I already have WP Super Cache plugin activated in my site.

    When I look at the .htaccess file, there are already a few hundred lines of code of the plugin.

    So, to copy paste the code for leverage browser caching in .htaccess, should I deactivate the plugin, or deactivating isn’t necessary?

    Reply
  6. OK so I have not got .Htaccess capabilities as my site is on a windows box but have done the equivalent in web config.

    My question is though do external resources have an impact on your site overall ranking if coming from highly rated sites.

    I am creating a dance class site for my daughter as a new venture and pride myself on technical perfection. I have jumped through 99.9% of the hoops to improve the site in GTmetrics, Pingdom and pagespeed however I find it is mostly the external resources that are causing the issue.

    I see that most want print friendly resources so added a plugin hoping it would help the street dance website but it says I must leverage browser caching on that file.

    Will this actually effect anything

    Reply

Leave a Comment

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