What is Leverage Browser Caching?
Leverage Browser Caching stores data locally so that future requests for that data can be served faster. A web browser needs to retrieve many resources such as HTML, CSS, JS, text, images, etc. in order to load a website. Web Cache is the technology used in web browsers and software applications to temporally store visited web page resources on a local disc. This temporarily stored data is called “Web Cache” or “HTTP Cache”.
By having this data stored on your visitor’s local hard drive, your webpage will be loaded much faster on their next visit. This is because the data will be pulled directly from their computer instead of having to travel through the internet from a web server.
If you have ever tested your website on Google Page Insights, GTMetrix or Pingdom you might have seen this optimization recommendation. Leverage Browser Caching is an important optimization that will speed things up for your return visitors.
How to Setup Leverage Browser Caching
To set up Leverage Browser Caching in WordPress, you will need to set an expiry date or a maximum age in the HTTP headers for static resources in your .htaccess file. This will instruct the browser to load previously downloaded resources from a local disk rather than over the network and how long to use these resources.
There are plugins out there that can enable Leverage Browser Caching for you, but I like to limit the number of plugins that I use to avoid problems and conflicts. Another reason you don’t really need a plugin for this is that enabling Leverage Browser Caching is extremely easy to do yourself. In the steps below, I will show you how to do this without a plugin.
Step 1: Locate your .htaccess File
Login to your cPanel and go to the File Manager. The .htaccess file is hidden by default. You will need to find the settings icon on the top right and change the option to show hidden files.
After you enable Hidden Files (dotfiles) you should be able to find the .htaccess file located in the your public_html folder.
Step 2: Edit your .htaccess File
Right click the .htaccess file and choose edit. Copy and paste the code below inside the file:
# Begin Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 2 days"
</IfModule>
# End Leverage Browser Caching
Make sure you save your changes and close the file editor.
Step 3: Make Sure Everything is Working
All that is left to do now is check your website and see if Leverage Browser Caching is working. You can check this using any three of these websites Google Page Insights, GTMetrix or Pingdom.
If everything is functioning correctly, you should no longer see this listed as a recommended optimization. However, you might still have an issue with other external files that you have no control over.
If you enjoyed this tutorial, please be sure to follow us on Facebook and Twitter. You can also find us on Freelancer if you need some help with your WordPress website or web development issues.
