Table of content
What is leverage browser caching?
Cache generally refers to the time taken by the browser to store all the cacheable data locally This data may include CSS, JavaScript, images and many more. Whenever the users open a particular website, the cacheable data that is stored locally will be uploaded back. This causes a sufficient decrease in the loading time of your website. That is the main reason why people perform leverage browser caching on their WordPress website.
Also Read: Headless CMS vs a Traditional CMS
How does the leverage browser caching method work in WordPress?
Whenever a WordPress user tries to access a certain domain, a lot of processes begin to perform in the background. Whatever data composes your website will be transmitted to the web browser of the user. This will make the browser visible to the users. Some of these data include stylesheets, images, scripts, content and many more. The steps which must be followed in order to move the data to the user’s browser from the website’s server has been mentioned below:
- The user will have to type the URL of the website in his browser.
- The browser will send a request to the server where the website has been hosted
- The server will collect all the data and send it to the uses. This is the step which requires a lot of optimisation. Otherwise, the process will become slow.
- After the data is transmitted, the browser will be able to view it on your website. This process repeats itself for all the pages of the website.
Caching method works for both software as well as website applications. There are several tools available in the market which will give you detailed information regarding whether leverage browser caching is properly working or not. All you need to do is type your website’s URL and the tool will do the rest of the work for you.
How to enable leverage browser caching for your WordPress website?
There are several methods using which you will be able to enable the leverage browser caching for your website. You need to add a few lines of codes to certain files of your website and you are good to go. Here we have mentioned some of the most basic ways using which you will be able to enable leverage browser caching:
#1. Access the files of your website
In order to access the file, you will have to log in to your website and go to the File Manager option. Here the website’s settings option is present from where you will have to turn on the hidden file option. Navigate to your website’s root directory and go to the .htaccess file. This file is mostly located in /public_html/.htaccess. If you use a custom domain, then the file is present in domainname/public_html/.htaccess. Now right-click on the file and edit its contents as per the instructions mentioned.
#2. Add the required lines of code in the .htaccess file
Once you have located the .htaccess file, you will have to add a few lines of code to it. The code has been given below:
#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
The above code provides a 600 seconds refresh time for HTML, a one-month refresh time for CSS and one-month refresh time for JavaScript. This refreshing time is to prevent your users from reloading the content of the website frequently. If changes have to be made more frequently, the settings can be altered by per your requirement.
This is the best method available to us for leverage browser caching. You will also be able to add expires headers to your code.
#3. Add cache control headers
In order to add cache-control headers, the following lines of code will have to be added to the .htaccess file:
# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header append Cache-Control “public”
</filesMatch>
<filesMatch “\.(css)$”>
Header append Cache-Control “public”
</filesMatch>
<filesMatch “\.(js)$”>
Header append Cache-Control “private”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header append Cache-Control “private, must-revalidate”
</filesMatch>
</IfModule>
</IfModule>
You need not have to add an expiry date to the HTTP headers and the date has already been set earlier.
#4. Turn off the Etags
Tags are entity tags. They are used to mark the newest version of all the cache files. You have already added the cache-control header to your file. You need not require the Etags anymore and so, you can switch them off to increase the loading speed of your website. You need to add the following lines of code:
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
Leverage browser caching by using plugins:
Adding codes to the .htacess file can at times be quite tricky. If not done properly, it will ruin the entire settings of your website. So, another easier way to enable leverage browser caching is by using different plugins. A lot of WordPress plugins are available using which you can carry out this method quickly and easily. The steps to enable leverage browser caching by use of plugins have been mentioned below:
- Download the required plugin
- Go to the Dashboard and from there, navigate to the Plugins options and click on Add New.
- Click on the Leverage Browser Caching option to install it.
- Activate your plugin and test it on your website
One such plugin is W3 Total Cache. It is a reliable plugin and has extremely fast speed. You will be able to use this plugin to enable browser cache quickly and easily. You can also add cache-control headers to your website. The plugin is extremely affordable and will greatly increase the loading time of your website.
So, this was all about leverage browser caching. We hope our article will help you to enable leverage browser caching for WordPress. Do let us know about your experience.
Interesting Reads:
wordpress instagram feed plugin
