Dine Tricks: Browser

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3>
What is Browser Cache:</h3>
<div style="text-align: justify;">
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.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-nclFzwSQrBg/U00CUjGiAJI/AAAAAAAAAEM/XBN7t4yHbdQ/s1600/leverage-browser-caching-headers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Expires Browser Cache Control Header" border="0" src="http://3.bp.blogspot.com/-nclFzwSQrBg/U00CUjGiAJI/AAAAAAAAAEM/XBN7t4yHbdQ/s1600/leverage-browser-caching-headers.jpg" title="Expires Browser Cache Control Header" /></a></div>
<br />
<div style="text-align: justify;">
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 <a href="http://dinetricks.blogspot.com/search/label/Blogger" target="_blank"><span style="color: blue;">blogger</span></a> until it expires.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This tutorial explains how to add expires browser cache control header to your blogger blog.</div>
<br />
<h2 style="text-align: justify;">
<span style="color: blue;">
Add Expires Cache Control Header in Blogger Blog:</span></h2>
<div style="text-align: justify;">
To enable browser caching to your blog you need to edit your bloggers <a href="http://dinetricks.blogspot.com/search/label/Template" target="_blank"><span style="color: blue;">template</span></a> 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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: small;"><b>Parameters: </b></span></div>
<ul style="text-align: left;">
<li style="text-align: justify;">File Type : File types are used to set the expires cache for the file type.</li>
<li style="text-align: justify;">Date : Date us used to set the time period of browser expire cache.</li>
</ul>
<br />
Before making changes <a href="http://dinetricks.blogspot.com/2014/04/backup-your-full-blogger-template.html" target="_blank"><span style="color: blue;">back-up your blogger template</span></a>.<br />
<br />
<div style="text-align: justify;">
Step1: Login your blogger account.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step2: Goto Dashboard -> Template -> Edit HTML</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step3: Find <head> tag and add the following code to after "<head>" Header tag.</div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<code>
<span style="color: blue;"><include path="/assets/**.css" expiration="7d" /> <br />
<include path="/assets/**.js" expiration="7d" /> <br />
<include path="/assets/**.gif" expiration="3d" /><br />
<include path="/assets/**.jpeg" expiration="3d" /><br />
<include path="/assets/**.jpg" expiration="3d" /><br />
<include path="/assets/**.png" expiration="3d" /></span></code>
</div>
</blockquote>
<div style="text-align: justify;">
After adding this code your code will be like following image,</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--cuj_hMu7PI/U00C0p6R-RI/AAAAAAAAAEU/XF2Yq8b01GU/s1600/leverage-browser-cache-code.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Leverage Browser Caching Code" border="0" src="http://4.bp.blogspot.com/--cuj_hMu7PI/U00C0p6R-RI/AAAAAAAAAEU/XF2Yq8b01GU/s1600/leverage-browser-cache-code.JPG" title="Leverage Browser Caching Code" /></a></div>
<br />
<div style="text-align: justify;">
Here <span style="color: purple;">"<b>7d</b>"</span> shows the expiry date as 7 for the file. You can modify it whatever you want.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
After adding this code check your cache time for the files which you set it for your blog.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-wzWSNeKMt-M/U00EQY5yFAI/AAAAAAAAAEg/VDNuqVJMPOc/s1600/leverage-browser-cache-proof.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Leverage Browser Caching Proof" border="0" src="http://1.bp.blogspot.com/-wzWSNeKMt-M/U00EQY5yFAI/AAAAAAAAAEg/VDNuqVJMPOc/s1600/leverage-browser-cache-proof.JPG" title="Leverage Browser Caching Proof" /></a></div>
<br />
<div style="text-align: justify;">
<b>Be careful:</b></div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
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.</div>
</blockquote>
<div style="text-align: justify;">
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.<br />
<br /></div>
</div>

How to Add Expires Browser Cache Control Header in Blogger Blog

What is Browser Cache: When you load any blogs or WebPages to your local system via browsers, it will automatically download the blog or...

Dine Tricks

How to Add Expires Browser Cache Control Header in Blogger Blog

Popular Posts

Blog Archive