Fix Leverage Browser Cache for Images, CSS and JS

Fix Leverage Browser Cache for Images, CSS and JS

Posted by Gurjeet, 3rd June 2023

Whenever the visitor’s browser loads the web page, it has to download all the files (HTML, CSS, Javascript and images) to display the content on the page. This leads to two types of issues:

Firstly, files may be of a smaller size or large size but big files will obviously take longer to download and particularly on the slower internet connection.
Secondly, there will be a separate request to server for each file. As the number of requests increases it has to do more work and thus leads to a decrease in the speed of the page load time.

Now, the question arises: what role does the browser cache plays?

Browser cache saves some of the files when visitor first time open the website. This helps in reducing the load time when the visitor moves to another page or revisit the site again. In first attempt the time taken by the visitor will remain the same but will reduce in another attempt and thus helps in improving the site performance.

Leveraging browser cache means to edit your HTTP headers to set an expiry time for certain type of files.

How to fix the leveraging browser cache?

Apache

Access the file .htaccess file in the root of your domain. In this file set the cache parameters to tell the user about the type of files you want to cache. As per the types of files, you can set the expiry time for each file.

## EXPIRES CACHING ##

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "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"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES CACHING ##

Leveraging browser cache using Nginx

Add the below code to the snippet of your server block.

location ~* \.(jpg|jpeg|gif|png)$ {

expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

expires 30d;

}

Add Cache-Control Headers for Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {

expires 90d;

add_header Cache-Control "public, no-transform";

}

Leveraging browser cache WordPress using Plugins

A plugin can also be installed to obtain the same functionality. A plugin will not only handle all the settings of leverage browser cache, but it will also perform a number of other caching optimizations, such as creating temporary copies (file cache), Memcache, database optimization, and other optimizations which make your site faster.
The plugins that can be preferred are WPRocket, WP Fastest Cache, and W3 Total Cache and premium caching plugins.

Be careful

Set the expiry date of a minimum of one month.
Do not set the date for more than a year in advance.
If you set the parameters too long, the user may not get the fresh content.

Conclusion

This article explained the ways in which you can leverage browser cache using apache, nginx or wordpress plugins. You have to make sure that website speed testing tools should not show this as an error in order to gain improved website speed.

In case you feel this is beyond your capabilities you can contact us to leave the stuff in the hands of the PRO’s.

Fix Leverage Browser Cache for Images, CSS and JS