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.

Performance Optimizer Plugin for WordPress
Performance Optimizer Plugin for WordPress

  • Performance Optimizer Plugin for WordPress: The caching system includes a wide range of options that you will find in the admin area each option has a detailed description of what it does. I recommend you using this plugin, it has almost features to help you optimize your WordPress website like cache system, .htaccess optimization, gzip content, adding expiry headers, lazy load for images, ...
  • 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.
  • Quick Cache: Speed up your site ~ BIG Time! - If you care about the speed of your site, Quick Cache is a plugin that you absolutely MUST have installed.

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

  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

  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.

  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

  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?

  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

Leave a Comment

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