Leverage Browser Caching for Images, CSS and JS to make Website Faster

The most effective cache feature for page speed is caching web browser. Most of the static files that are used on web pages can be saved on the user’s device for future access.

Faster loading time is the key to engage more visitors with our websites and blogs. 

If your website takes longer time to load, then visitors will switch to another site straight away. Due to slow loading speed an every year a website loses 28% visitors. 

And in case of returning visitors the statistical data is horrible, because they do not want to revisit that site. 

There are many accumulated little task to do for the improvement of our website loading speed but among them Leveraging Browser Cache is important. 

Probably you don’t know or having little knowledge regarding Leveraging Browser Cache. So few question always buzzing in your brain that 

• How to leverage browser caching for static HTML assets? 
• How to fix the leverage browser caching in WordPress? 
• How to use header expire feature or leverage browser caching in Blogger site? 

Everyday many queries made by website owner on leverage browser caching in different platform like php, magento, java based project. Generally the whole caching process made in a web browser, but modern browsers are more efficient and optimized in website cache controlling system, even capable to handle all external resources, data pre-fetching etc. 

So many webmaster argued that using expiring header feature is pointless. But it has good value in term optimize your site for search engine.

All the browsers work independently and user’s don’t have enough control on it. By implementing and using header expire or cache controlling feature we can leverage browser caching for Images, CSS, JS and other media files. 

The concept of Leverage browser caching is unknown to many webmaster but this can significantly improve your website or Blog loading time. It helps to reduce the page loading time for repeat visit. 

Leverage browser caching to make your website faster

You can check leverage browser caching status of your site by using Google PageSpeed Insights, Thinkwithgoogle and GTmetrix tools. Whatever the CMS platform you are using, all of us should overcome from this issue. 

What is browser caching? 

When we visit a website by using browser like Internet Explorer, Google Chrome, Firefox, Opera etc. then every time it loads all the components of the website like Images, videos, HTML code, CSS code and JavaScript. 

If your website containing heavy media files and large script of HTML, CSS and JavaScript then logically it will take time to load. 

Today almost all major browsers use caching feature to give smooth user experience to the users. Browser cache helps to temporarily store some files in your browser locally, so when first time you visit a website then it loads everything from a website but when you revisit the same site then it doesn’t need to load everything, because browser’s cache already stored everything in first visit. 

Even if you refresh the page or visit different page it will work like same way later until expiration of header. 

What is leverage browser caching? 

Leverage browser cache means the controlling feature of your web browser cache. Through this technique you can specify how long a web browser should store images, CSS code and JS files in user’s device. 

As a result, when you surf same website again then it will download less data while navigating through your pages. Ultimately this will improve the loading speed of your website. 

Through leverage browser caching we can Change the request headers of the resources to use caching. 

Also this will optimize the overall caching strategy of any website. Remember that caching will allow a browser to store frequently requested files on the user’s device like PC, Smartphone, and Tablet for a preset period of time. When you enable caching then subsequent page loads more efficiently. 

Benefits of leverage browser caching 

There are certain benefits you will get after Leveraging browser cache. Those are as follows 

• Your web page overall loading time will significantly improve. 
• This technique will ask the website visitors to save and reuse the files, which is included in your website. 
• This will significantly reduces page loading speed for returning visitors. 
• Leverage Browser Caching will help to load website’s Images, other media files, CSS and JS files without downloading every time, because it will pick the file from the browser cache. 
• It will reduce the server response time to less than 200ms. 
• It will save time of the website visitors. 
• It can also save the bandwidth of the web server. 

How to fix leverage browser caching in Blogger BlogSpot site? 

To get more page view, we should focus on improving page loading speed. If you are using Blogger content management system then you might be worried about leverage browser caching issue, because users has less control on it. Moreover, blogger platform automatically control the browser cache. 

Every blogger theme loads with many unnecessary render blocking files like CSS bundle, authorization CSS and JS files on each visit. For that reason, blogger sites take longer time to load and visitors are getting away. 

In this tutorial I will show you how to control cache in Blogger Site? Please follow the below steps: 

Step #1: Login to your Blogger BlogSpot site and go to Blogger dashboard. 

Step #2: Select Theme tab and Click Edit HTM button 

Step #3: Find the opening header tag <head> tag.  at the top of the HTML editor. 

Step #4: Now add the below code block right after opening header. 

<include expiration='10d' path='*.css'/> <include expiration='10d' path='*.js'/> 
<include expiration='15d' path='*.jpeg'/> <include expiration='15d' path='*.gif'/> 
<include expiration='15d' path='*.png'/> 
<include expiration='15d' path='*.jpg'/>

Here we have used 10d and 15d means 10 days and 158 days to expire the CSS, JS, images like jpeg, jpg, png and gif files. 

So when visitors visit your Blog site then browser will store cache for 10 days for CSS and JavaScript. Similarly images files will be stored for 15 days. 

Step #5: Hit the Save theme button and exit from there. 

All done now it will take few days to take effect but this script will work 100%. 

How to fix leverage browser caching in WordPress? 

WordPress platform users can control browser’s cache by modification of .htaccess file. This file can be found in the root of your hosting server. Many WordPress users don’t want to use excess plugins due to affect on page loading speed. For them the following tutorial is perfect. 

Step #1: Login to your WordPress hosting cPanel 

Step #2: In File Editor find the .htaccess file. 

Step #3: Now add the following code to the top of your .htaccess file. 

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>

ExpiresActive on

ExpiresByType text/css "access plus 15 days"
ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType application/x-javascript "access plus 15 days"
ExpiresByType text/javascript "access plus 15 days"
ExpiresByType image/ico "access plus 15 days"

ExpiresByType image/gif "access plus 15 days"
ExpiresByType image/jpg "access plus 15 days"
ExpiresByType image/jpeg "access plus 15 days"
ExpiresByType image/png "access plus 15 days"

ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/html "access plus 15 days"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/json "access plus 0 seconds"

</IfModule>
ExpiresByType application/rss+xml "access plus 1 hour"

ExpiresByType application/atom+xml "access plus 1 hour"

Step #4: Finally Save and exit from there.

Alternatively you can use htaccess leverage browser caching for images and CSS by setting seconds like below: 

<IfModule mod_expires.c> 
ExpiresActive On

ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"

ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"

ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType application/x-javascript "access plus 86400 seconds"
ExpiresByType text/javascript "access plus 86400 seconds"
</IfModule>

You have wide options to set the time frame of header expiration. Both methods are suitable and widely used by many users. 

How to set different caching times for different file types? 

This is very easy to control cache by changing caching times for different file types. You can choose either 1 week or 1 month or 1 year, it’s up to you. 

For example in Blogger site we have added cache like for CSS files that after 7 days it will expire. 

<include expiration='7d' path='*.css'/>

So if you want it will expire after 10 days then you can change the code like below 

<include expiration='10d' path='*.css'/>

Similarly in WordPress site set the duration for CSS file 1 month. 

• ExpiresByType text/css "access plus 1 month" 

If you would like to keep cache for 1 year, then simply you can change like below 

• ExpiresByType text/css "access plus 1 year" 

This is pretty simple to set the expiry time. Now you can set any file expiry time for short and long term. 

Which file should set short and long expiry time? 

This is a common question that which file should we set for short and which one for long expiry time? 

We should set short expiry time for small script container files like CSS, HTML and JavaScript but not often recommended. If your site containing few JS script then it will not affect your site loading speed significantly. So we can set the time from 10 days to 1 month. 

If you set long expiry time for heavy files then it will also create Problems. Now the question is how it will affect or create problem? 

Suppose you have set your CSS code expiry time up to 1 year. And after 3 months you decided to updated your website design by changing CSS script, in this case returning visitors won’t able to see the changes in your webpage. 

Because user’s browser already stored previous CSS script from your website and it will reload it from temporary storage when they visit next time. 

As a result, visitors won’t get notice about your change design. Only after passing the header expiry date browser will download new files from your website and display your new design. 

But in case of Images and videos we must set long expiry time. Generally media file contain heavy properties and take longer time to load. 

So if we set long expiry time then browser will use stored files from cache and when visitor revisit your site they won’t see any affect in loading speed. 

Conclusion 

I have shown the implementation system of leverage browser caching on both Blogger and WordPress sites. I hope this tutorial will help you to speed up your Blog and website. However there are others related issue you must solve to overcome for slow loading website issue. 

Though Blogger platform give you limited control over their cache controlling feature but in WordPress it will work perfectly. htaccess leverage browser caching for Images, CSS and JS would be the perfect solution for WordPress users. 

And after implementing the header caching feature wait till few weeks to take effect. And check your blog on Google PageSpeed Insights, Thinkwithgoogle and GTmetrix tools to see the result. 

Regarding this article if you have any query or constructive suggestion then feel free to share with us.