How to Enable Leverage Browser caching in WordPress-: Browser caching have a very important role in to boost the performance of your WordPress website. In simple Browser caching is defined as A temporary storage area in memory or on disk that holds the most recently downloaded Web pages. As you jump from Web page to Web page, caching those pages in memory lets you quickly go back to a page without having to download it from the Web again.
Now the question comes that does your website need Leverage Browser Caching? Luckily there are tools like Google Page Speed Tool and GT Matrix, if you test your website performance you will come to know your website needs Leverage browser caching or not depend upon your website speed score.
How does Leverage Browser Caching Work in a WordPress Website?
In simple term Leverage Browser caching represent the amount of time that browser locally stores the cacheable resources available on a website. A cacheable resource of a website is Images, JavaScript etc. When we enable Leverage Browser caching a browser does not download website resources like Image, Javascript etc which result increase in the speed of a website.
When a user opens a website in the browser, it sends a request to the server and server puts all data together and send it to the browser. Whenever you visit the same website, the browser will upload the information stored on your computer and download the content from the website.
How to Enable Leverage Browser caching in WordPress using .htaccess file-:
.htaccess is a configuration file for use on web servers running the Apache Web Server software. When a .htaccess file is placed in a directory which is in turn ‘loaded via the Apache Web Server’, then the .htaccess file is detected and executed by the Apache Web Server software.
If your website hosted on Nginx server you will not have .htaccess file. In Nginx, you will use the try_files directive to accomplish the same thing.By default, the configuration file is named nginx.conf and placed in the directory /usr/local/nginx/conf , /etc/nginx or /usr/local/etc/nginx
A .htaccess files can be used to alter the configuration of the Apache Web Server software to enable/disable additional functionality and features that the Apache Web Server software has to offer. These facilities include basic redirect functionality, for instance, if a 404 file not found error occurs, or for more advanced functions such as content password protection or image hotlink prevention.
.htaccess is the default core file of WordPress some of the features of the .htaccess file include the ability to password protect folders, ban users or allow users using IP addresses, stopping directory listings, redirect users to another page or directory automatically, create and use custom error pages, change the way files with certain extensions are utilized, or even use a different file as the index file by specifying the file extension or specific file.
Add this code to .htaccess file to enable browser caching. Please note .htaccess file is very sensitive file take a backup before editing it. If you are unable to locate your .htaccess file read my post How to Locate .htaccess File in WordPress.
#Customize expires cache start - adjust the period according to your needs
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
#Expires cache end
In the above code, settings include a 600-second refresh/expiration time for HTML, and one month for CSS and JavaScript. The purpose of this expiration period is to avoid having your visitors re-download the assets too often. If you perform changes in terms of assets more often, you can change the period according to your needs.
Etag is a default feature of WordPress, its role is cache new version of the cache file. in above code, I have already defined cache-control headers so it is better to switch off Etags. add the following line of code to your .htaccess file.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
Enable Leverage Browser caching in WordPress using Plugin-:
If you do not add the code or feel difficult to modify your .htaccess file Leverage Browser Caching Plugin will do this job. Install and activate this plugin it will add above code to your WordPress website. Browser caching will improve page speed score in website testing tools like Pingdom, GTmetrix, Google PageSpeed Insights and YSlow.
If you like my work, Please Share on Social Media! You can Follow WP knol on Facebook, Twitter, Pinterest and YouTube for latest updates. You may Subscribe to WP Knol Newsletter to get latest updates via Email. You May also Continue Reading my Recent Posts Which Might Interest You.