How to leverage browser caching of your website or blog
If you are using any kind of website speed testing tool or website optimization tool, it suggests to leverage browser caching. Google’s PageSpeed Insights tool also delivers this kind of suggestions. See the snapshot below:
If you are not sure what is browser caching and how to leverage browser caching, you should read this guide. In this article, I am trying to explain everything in easy to understand manner.
Also read: How to Speed up WordPress Blog [Guide]
What is the browser caching?
Browser caching is the feature of web browsers which stores web page and its resources on the local computer for faster results if a user visits a web page. Next time when the user visits the web page, it will use the local cache to serve the page and results will be faster as it is loaded from local storage.
By web page resources, it means images, CSS and JS files. So, these things will not be loaded again and hence, it will improve the load time of the page for repeat visits. If you are using WordPress, leveraging browser cache will speed up your WordPress blog.
When you leverage browser caching, it means the resources of the web pages will be saved in browser cache to make your website faster for repeat visits. You can request the browser to cache the resources and even tell it the time for how long you want to it to keep that cache.
How to leverage browser caching
To leverage browser caching, you need to enable caching by adding some code in .htaccess on your web host. And setting cache expiration period is called Leverage Browser Caching. For this, go to file manager on your web host and edit the .htaccess file.
Note: The .htaccess file controls many important things. So, be very careful while editing it. A single error will take down your website.
Browser caching for .htaccess
Add this code in the .htaccess file.
<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/css "access plus 14 days" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType text/javascript "access plus 14 days" ExpiresByType application/x-javascript "access plus 14 days" ExpiresByType image/ico "access plus 14 days" ExpiresByType image/jpg "access plus 14 days" ExpiresByType image/jpeg "access plus 14 days" ExpiresByType image/gif "access plus 14 days" ExpiresByType image/png "access plus 14 days" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType text/html "access plus 14 days" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" </IfModule>
You can see the above code and check the time period of caching for different things. If you want to change the caching time for any specific file-type, you can change that value. It should be “1 year”, “1 month“ or “1 day“.
How Leverage Browser Caching in WordPress
The .htaccess file method is for a web host. So, the above method works with all kind of CMS including WordPress, Drupal, Joomla and frameworks like Codeigniter, YII and other. Just use the above code and add it to the .htaccess file. If you do not want to play with code, you can use one the best caching plugins for WordPress. WP Super Cache and W3 Total Cache plugins offer the option to leverage browser cache in WordPress.
Also see: Best WordPress Web Hosting Services
Common issues if you use caching
If you are using caching, you will issues while changing something in your website’s design. As the browser will cache these resources for a long time, it will time to reflect changes. But this is not something very serious. You can overcome this by using ‘URL fingerprinting’.
Final Words
I hope this article is useful. After leveraging browser cache, your users will notice sudden improvements in the website’s speed. So, the user experience will be better. I prefer the first method and manually added the code in the .htacess file. You have option to either use the .htaccess code or caching plugin.
I tried to explain everything in simple words. If you still have anything to ask, you can comment below. I will try to reply as soon as possible.
Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.
Leave a comment
Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.