Leverage Browser caching is an important parameter that google and y-slow used to analyze the performance of your webpage. If you’ve ever run Google PageSpeed test on your website, it’s highly recommend you leverage browser cachetomake your webpages faster.
How does it work?
When a user visit your webpage for the first time, their browser will store the copies of static files (images, java script, css, favicon, etc) of your webpage locally in their computer. This means the browser doesn’t have to download them again in-case the user re-visit your webpage, because browser will fetch data from the cache instead of asking the server. The end result is your webpage will appear to load faster in user’s browser. This process is called browser caching.
Why leverage browser caching?
Setting an expiry date or maximum age in the HTTP headers for static resources (images, js, css, etc) instructs the browser to load previously downloaded resources from local disk rather than over the network. (source -Google)
This means, a first time visitor to your page will make several HTTP requests to cache several static resources. But the cacheable resources have short freshness lifetime. With HTTP header, you need to tell your website visitor’s browser to keep the resources for a certain period of time until the expiry date or maximum age is reached. This avoids unnecessary HTTP requests on subsequent page views.
By leverage browser caching, you can
Minimize the number of HTTP requests; which in turn reduce the load time of your site dramatically.
Save your visitor’s time if they visit your site more than once.
Reduces the load on your web server and Save bandwidth.
How to leverage browser caching?
1) Tweak your .htaccess in your website’s root folder
Modify your .htaccess file which can be found in the root of your site’s directory. Make a backup of your .htaccess file before you make the change.
Login your web hosting account
Goto cPanel –> file manager
When the popup box appears, select Web Root (public_html) (make sure that the “Show hidden files” option is checked)
Right click the .htaccess file is in there, then click on “Code Edit”
Add the following code to the very top of your .htaccess file
## EXPIRES CACHING ##
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 application/x-shockwave-flash"access plus 1 month"
ExpiresByType image/x-icon"access plus 1 year"
ExpiresDefault"access plus 2 days"
## EXPIRES CACHING ##
2) Using WordPress plugins
If you are not familiar with how to access .htaccess file in your website’s root folder, this might be an easiest way for non-techies to leverage browser cache within your wordpress blog.
WordPress SEO Yoast
Leveraging browser caching is just a matter of a few seconds if you use wordpress SEO yoast plugin. Editing your .htaccess files has never been this easy. You can edit them straight from the Files menu of the WordPress SEO plugin.
click “SEO” on the left side of your WordPress dashboard
Add the above code to the top of .htaccess box
W3 total cache
Install W3 Total Cache wordpress plugin.
click Performance on the left side of your WordPress dashboard >> General settings >> Enable “browser cache“
Click performance >> Browser Cache. Apply the following settings.
Browser Cache – General Settings
Enable “set Last-Modified header”
Enable “set expires header”
Enable “set cache control header”
Enable “set W3 Total Cache header”
Enable “HTTP (gzip) compression”
Disable “Prevent caching of objects after settings change”