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.

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.



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.


	
Related