Leverage Browser Caching in your website and WordPress

Leverage Browser Caching is one of the most important steps in terms of page speed. Generally means that you can specify how long browsers should keep images, CSS and JS stored locally. The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users. Simply put, just set expire dates between 1 month and 1 year on your resources.

Add this in your .htaccess file. It is located in the root folder of your website. In WordPress is where wp-content, wp-admin and wp-includes folders are.

# Expires Caching Start #

ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"

# Expires Caching End #

As you can see it is easy to implement. Just copy/paste and you are ready to go. You can also change the expire date. The ExpiresDefault is the default for the rest of files. Go for few days or maximum 1 month. Here are some tips:

  • Expiry at a minimum of 1 month
  • Don’t set your caching more than 1 year

Now open your website in incognito mode or clear all the previous cache. You will definitely see an improvement.

Suggestion

Be careful with caching users might not be getting the fresh version of your website after updates, such as content changes in your articles or posts. If you develop, I suggest to remove the caching for a while and enable it later when you have all the content.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.