By now, you would probably heard about browser caching and you thought that W3 Total Cache had solved the issue for you. Heading over to GTmetrix and it shows that you have the leverage browser caching issue.
As complicated as it may sound, the solution for this WordPress issue is actually relatively easy.
Before we go into a solution for this WordPress issue, let’s take a quick moment to understand what is the function of browser cache feature.
What is browser cache?
Whenever a browser loads a webpage, it will download all the web files from the hosting server to display the page properly. This means that it includes all the related HTML, CSS, javascript and images on that page.
Browser caching is a feature that ‘remembers’ the resources above that the browser had already loaded previously. In other words, the browser do not need to redownload these files again if your visitor decide to move from one page to another on your website.
The end result of browser caching is your website will load much faster and in return, happier visitors.
Why is is browser caching important?
Browser caching helps to reduce the load on your servers and indirectly, improving the load time of the website.
How to fix leverage browser caching issue in WordPress?
In geeky terms, you need to edit your HTTP headers to set expiry dates on certain types of files.
Sounds complicated? The below is the simplified version:
It is done by adding some codes to a file called .htaccess on your website.
There are several ways to go access your .htaccess which are through:
- cPanel File Manager
- FTP clients
For most shared hostings, you can access the .htaccess directly which is much easier. For those who use premium hostings like WP Engine, you would need to use FTP clients for security reasons.
The file, .htaccess is usually located on your /www location on your web host or File Manager page.
Important: Remember to make a copy of the original .htaccess file before editing it.
Open the file, add the code below and press save. You can place the code any where at the top of the file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
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 text/x-javascript "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"
</IfModule>
## EXPIRES CACHING ##
While the above codes are meant to be used for general websites, you may set different expiry dates especially for files that are updated more frequently.
The method of changing the duration is relatively easy. In the case where you would like to change the browser cache duration, select the ‘1 year’ and replace it with any duration of your choice, such as ‘1 month’.
Additional browser cache tips
Browser caching could affect your website loading speed in a big way and therefore, you should always be aggressive when caching static resources.
In terms of the recommended cache duration, it would be at a minimum of one month but for the best and most optimized settings, ‘access plus 1 year’ is the best for most websites.
Once you have done everything as the above, you should clear your browser cache and cookie before it will takes effect.
Related read: Top 3 Content Delivery Network services that will boost your website loading speed
Like or dislike this WordPress tutorial?
I certainly hope this simple tutorial will help you fix the leverage browser caching issue on your WordPress. Tell me what you think about this and if you like it, please share it around too!