How do control browser caching?

anil
Table of Contents
image source: techstream.org

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.

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

Related posts