What is Browser Cache:

When you load any blogs or WebPages to your local system via browsers, it will automatically download the blog or websites files as cache file. It will be used when you open the same web page from the browsers. While you re-open webpage from the browser, it will automatically fetch the downloaded file from the cache. It will more helpful to reduce the server response time and displays the webpage contents as quickly.

Expires Browser Cache Control Header

Every blogs that includes many multimedia files such as images (jpg, gif, png and more), java script (.js), flash (.flv), stylesheets (.css) and more. When the blog's page loads on a computer these files also download as cache file to the local system via browser. It will be automatically re-fetch while you accessing the same page again. If the file is already stored with expire date, the file loaded via your local. Server request will not sent from blogger until it expires.

This tutorial explains how to add expires browser cache control header to your blogger blog.

Add Expires Cache Control Header in Blogger Blog:

To enable browser caching to your blog you need to edit your bloggers template to set expiry dates for the files which you want to add. Before doing this feature you need to know the list of parameters are used in leverage browser caching header. There are 2 parameters are used in leverage browser caching.

Parameters:
  • File Type : File types are used to set the expires cache for the file type.
  • Date : Date us used to set the time period of browser expire cache.

Before making changes back-up your blogger template.

Step1: Login your blogger account.

Step2: Goto Dashboard -> Template -> Edit HTML

Step3: Find <head> tag and add the following code to after "<head>" Header tag.
<include path="/assets/**.css" expiration="7d" />
<include path="/assets/**.js" expiration="7d" />
<include path="/assets/**.gif" expiration="3d" />
<include path="/assets/**.jpeg" expiration="3d" />
<include path="/assets/**.jpg" expiration="3d" />
<include path="/assets/**.png" expiration="3d" />
After adding this code your code will be like following image,

Leverage Browser Caching Code

Here "7d" shows the expiry date as 7 for the file. You can modify it whatever you want.

After adding this code check your cache time for the files which you set it for your blog.

Leverage Browser Caching Proof

Be careful:
Don't set long expires date for blogger blog's file in leverage browser caching header. Since if you set long expire date then it will take some time for update the changes from your blog.
Now you know the use of expires browser cache control header in blogger blog. Still if you have doubt or need help just leave a comment. Thanks for reading.

17 comments:

  1. But you've verified the real trick functionality? How can I verify the real work in my site? After pasting this code..




    I adding anything?

    ReplyDelete
  2. not working to my blog still saying > Leverage browser caching

    http://unity3diy.blogspot.com

    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Funity3diy.blogspot.com%2F2014%2F11%2F19-google-play-store-alternatives.html&tab=desktop

    ReplyDelete
  3. -Here "7d" shows the expiry date as 7 for the file. You can modify it whatever you want.
    -check your cache time for the files which you set it for your blog.
    --Don't set long expires date for blogger blog's file in leverage browser caching header.

    My Question: What is optimum time and how to enable it.

    Request simpleton explanation. Thanks for the help. here's what I'm working on: blog.stlouisrenewableenergy.com a previous blogspot addy.

    ReplyDelete
  4. not working for me :-?
    Template is not saving....even after saving the same multiple times.

    ReplyDelete
  5. not working at my blogspot bro

    ReplyDelete
  6. i was used this tutorial but not working, thanks for your information

    ReplyDelete
  7. Good Tricks to enable cache. Thanks :)

    ReplyDelete
  8. Give it a try, and not working

    ReplyDelete
  9. This is not working and I think the reason is the path of the files is not /assets/ it should be **.**.blogspot.com/

    ReplyDelete
  10. not working for me.. bro, Thanks [-(

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Not working as other said. Maybe path assets should remove. Assume expire date set for 1 years for safety

    ReplyDelete

 
Dine Tricks © 2014. All Rights Reserved. Powered by Blogger
Top