How to leverage browser caching of your website or blog

If you’re using Google chrome for browsing you may have seen that when you click on your home button the home page is opened within moments. Have you ever wondered how does the home page load so fast? This is because of browser caching.

To leverage browser caching for your website or blog you need to change certain codes in the setting. We’ll see how we can do this by reducing the time the browser attempts to download the full web page or certain parts of the page.

What is browser caching?

A cache is a temporary memory that your browser uses to store pages. The page you often visit is stored in the browser cache. Hence when you request the browser to display that page, instead of re-downloading the page it fetches the copy of that page saved in your browser cache. This saves your time and uses minimum internet data.

To rank your website or blog Google uses PageSpeed to analyze the speed of your website or blog. Proper coding will tell the browser exactly after how long does it have to update the page. It is evident then that leveraging browser caching will improve your ranking on Google.

How to leverage browser caching?

Web pages generally have images, JS, CSS in them. To leverage the browser’s caching for your website or blog you need to set the amount of time the browser will update these things in it. This will reduce the usage of data. As the amount of data to be updated every time you open your website is less, users frequently visiting your website will see your webpage quickly.

Leverage Browser Caching For Apache Server

For better cache control update .htaccess file with the snippet given below to leverage browser caching in Apache Server.

=========================================================================

<lfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 6 months”

ExpiresByType image/jpeg “access 6 months”

ExpiresByType image/gif “access 6 months”

ExpiresByType image/png “access 6 months”

ExpiresByType text/css “access 6 months”

ExpiresByType text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 6 months”

ExpiresDefault “access 1 month”

</lfModule>

=========================================================================

The above written code will leverage browser caching for Images after 6 months. It will keep the browser caching for CSS and browser caching for JS for 1 month respectively.

Leverage Browser Caching For Windows Server

In the document root of  the website add the web.config file by updating the file with the code mentioned below.

The code mentioned below displays the amount of time browser will hold the static data. In the code the cacheControlMaxAge is 20.00:00:00 which means that the cache will retain the static data for 20 days.

=============================================================

<system.webServer>

<staticContent>

<clinetCache cacheControlMode-“UseMaxAge” cacheControlMaxAge=”20.00:00:00”/>

</staticContent>

</system.webServer>

=============================================================

Leverage browser caching in WordPress

You can modify .htaccess file in the WordPress to leverage browser caching or can install plugin.

1. WP Fastest Cache

Follow the instruction below to free your cache memory. The image below displays it well.

• Download this plugin for WordPress and install it.
• Go to the settings and tick the Browser Caching option at the bottom of the page.
• Click submit and the plugin will do the rest for you.

2. W3 Total Cache Plugin

• Install the plugin and go to the general settings.
• In Browser Cache Settings tick all the three boxes.
• Save the settings and you’re done.

Want to read the latest posts on social media? Then follow us on Facebook, Twitter, or LinkedIn!

Save

Save