Tuesday, December 6, 2016

How do control browser caching?

12/06/2016 No comments:

I faced browser caching issue for my website from last 4-5 days. I had a lot of research to resolve it but my website always loaded from browser cache. It was not loading from server until I refreshed it. If I refreshed URL, it loaded from server with my updated changes. After spending 2-3 days on analyzing this issue, I found the solution for this. I want to share this post by that in future no body will face this type of problem.

image source: techstream.org

What is browser cache?

A cache is a repository for stored data that is used to expedite the process of retrieving data. There are several types of caches, including web page caches, hardware caches, software caches and memory caches. Caches are used to speed up a process so that data does not have to be recomputed or fetched from its original location and, therefore, saves time. The greater the requests that can be served from the cache, the quicker system performance becomes.

Internet browsers use caching to store HTML web pages by storing a copy of visited pages and then using that copy to render when you re-visit that page. If the date on the page is the same date as the previously stored copy, then the computer uses the one on your hard drive rather than re-downloading it from the internet.

credit: pctools.com

How to leverage browser cache?

The correct minimum set of headers that works across the most important browsers:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

Where:

Cache-Control is for HTTP 1.1
Pragma is for HTTP 1.0
Expires is for proxies

1. Add .htaccess file on your web host/server.

For most people, the way to enable caching is to add some code to a file called .htaccess on your web host/server.

The .htaccess file controls many important things for your site.

The code below tells browsers what to cache and how long to "remember" it. It should be added to the top of your .htaccess file.

.htaccess (Apache)

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
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 1 year"
ExpiresDefault "access 1 month"
</IfModule>

<FilesMatch "^\.">
    Header set Pragma "no-cache"
    Header set Cache-Control "no-cache"
</FilesMatch>

## EXPIRES CACHING ##

Add this file to your web server in Root directory.

2. Disable browser caching by code.

Java Servlet

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);

PHP

header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

ASP

Response.addHeader "Cache-Control", "no-cache, no-store, must-revalidate"
Response.addHeader "Pragma", "no-cache"
Response.addHeader "Expires", "0"

ASP.NET

Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Ruby on Rails

response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
response.headers['Pragma'] = 'no-cache'
response.headers['Expires'] = '0'

Python on Flask

resp.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
resp.headers["Pragma"] = "no-cache"
resp.headers["Expires"] = "0"

Google Go

responseWriter.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
responseWriter.Header().Set("Pragma", "no-cache")
responseWriter.Header().Set("Expires", "0")

2. Use <meta> tags to turn off caching

For the Web Pages (HTML) add the following <meta> tags to the page(s) you want to keep browsers from caching (the code must be in the <head> section of your page, for example right after <title> tag):

<meta http-equiv="cache-control" content="no-cache" />

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

credit : cristian.sulea.net

About Author -

Hi, I am Anil.

Welcome to my eponymous blog! I am passionate about web programming. Here you will find a huge information on web development, web design, PHP, Python, Digital Marketing and Latest technology.

Note: Only a member of this blog may post a comment.