7/4/2017 HTTPCaching|HttpWatch

(/)

HTTP Gallery

Jump to ...

5. HTTP Caching
Web pages often contain content that remains unchanged for long periods of time. For example, an image containing a company logo may be
used without modi
cation for many years. It is wasteful in terms of bandwidth and round trips to repeatedly download images or other content
that is not regularly updated.

HTTP supports caching so that content can be stored locally by the browser and reused when required. Of course, some types of data such as
stock prices and weather forecasts are frequently changed and it is important that the browser does not display stale versions of these
resources. By carefully controlling caching, it is possible to reuse static content and prevent the storage of dynamic data.

Browser caching is controlled by the use of the Cache-Control, Last-Modied and Expires response headers.

5.1 Preventing Caching

Servers set the Cache-Control response header to no-cache to indicate that content should not be cached by the browser:

CacheControl:nocache

Also, the Pragma header is also often used to stop caching by HTTP 1.0 proxies as they do not support the Cache-Control header:

Pragma:nocache

For a full description of Cache-Control and the other values it supports please consult the HTTP 1.1 speci
cation
(http://www.w3.org/Protocols/rfc2616/rfc2616.html).

5.2 Allowing Caching

The Cache-Control header can be set to one of the following values to allow caching:

<absent> If the Cache-Control header is not set, then any cache may store the content.

private The content is intended for use by a single user and should only be cached locally in the browser.

public The content may be cached in public caches (e.g. shared proxies) and private browser caches.

If the browser is to make e ective use of cached content, two extra pieces of information should be supplied. The
rst is the modi
cation
date/time of the content. The server supplies this in the Last-Modied response header:

LastModified:Wed,25Feb201512:00:00GMT

The browser keeps this value with the cached entry so that it can check the server for changes when a page is
rst visited in a browser session
or the user requests a page update (e.g. presses F5 in IE).

The second piece of information is the expiration date, that is speci
ed with the Expires header:

https://www.httpwatch.com/httpgallery/caching/ 1/4
7/4/2017 HTTPCaching|HttpWatch

Expires:Thu,25Feb201612:00:00GMT

If a cached entry has a valid expiration date the browser can reuse the content without having to contact the server at all when a page or site is
revisited. This greatly reduces the number of network round trips for frequently visited pages. For example, the Google logo is set to expire in
one year and will only be downloaded during that year on your
rst visit to google.com or if you have emptied your browser cache. If they ever
want to change the image they can use a di erent image
le name or path.

The HTTP speci
cation recommends using expiration dates no more than one year in the future. An equivalent to setting the Expires header is
to use a max-age value with the Cache-Control header. Often this is easier than calculating the expiration date as you specify the cache
expiration as a delta from the current time in seconds. For example this header will sets the cache expiration to be 31536000 seconds or one
year in the future:

CacheControl:maxage=31536000

5.3 Cache Validation and the 304 response

There are a number of situations in which Internet Explorer needs to check whether a cached entry is valid:

The cached entry has no expiration date and the content is being accessed for the
rst time in a browser session

The cached entry has an expiration date but it has expired

The user has requested a page update by clicking the Refresh button or pressing F5

If the cached entry has a last modi
cation date, IE sends it in the If-Modied-Since header of a GET request message:

GET/images/logo.gifHTTP/1.1
Accept:*/*
Referer:http://www.google.com/
AcceptEncoding:gzip,deflate
IfModifiedSince:Wed,25Feb201517:42:04GMT
UserAgent:Mozilla/5.0(WindowsNT6.3;WOW64;Trident/7.0;rv:11.0)likeGecko
Host:www.google.com

The server checks the If-Modied-Since header and responds accordingly. If the content has not been changed since the date/time speci
ed, it
replies with a status code of 304 and a response message that just contains headers:

HTTP/1.1304NotModified
ContentType:text/html
Date:Thu,26Feb2015 10:00:04GMT

The response can be quickly downloaded because it contains no content and causes IE to read the data it requires from the cache. In e ect, it is
like a redirection to the local browser cache (See 7. Redirection (../redirection/)).

If the requested object has actually changed since the date/time in the If-Modied-Since header, the server responses with a status code of 200
and supplies the modi
ed version of the resource.

Example 5
The images in this example demonstrate di erent levels of caching. It is worth trying the following actions in Internet Explorer to investigate
how well these images are cached:

Try using the back and forward buttons

Refreshing the page

Opening a new instance of IE to create a new browser session and re-visiting this page

https://www.httpwatch.com/httpgallery/caching/ 2/4
7/4/2017 HTTPCaching|HttpWatch
Image A: This image is never cached and is always downloaded; even with back/forward buttons.

Image B: This image can be cached but has no expiration or modi
cation date. Therefore it is always downloaded when the page
is
rst visited in a new browser session or if the user refreshes the page.

Image C: This image can be cached and has a modi
cation date but no expiration date. Therefore it is always checked but not
downloaded when the page is
rst visited in a browser session or if the user refreshes the page.

Image D: This image can be cached and has an expiration date set to on year in the future use max-age. The browser can reuse
the image in a new browser session without having to send any request to the server. It can always be re-read from
cache unless the cache is cleared, or the user requests a forced update with Ctrl + F5.

REFRESH THIS PAGE

Using HttpWatch with Example 5

To view the HTTP headers discussed on this page:

1. Open HttpWatch by right clicking on the web page and selecting HttpWatch from the context menu

2. Click on Record to start logging requests in HttpWatch

3. Optional: You can add a
lter to capture only the images in example 5 by adding a 'URL contains' condition with the value
"caching/image".

4. Try refreshing this page, using the back/forward buttons and starting a new browser session by opening a new instance of IE

5. You can see the e ect of a request on the browser cache by selecting the Cache tab. Also, the value of the Cache-control,
Expires, Last-Modied and If-Modied-Since headers can be seen on the Headers tab.

6. If an entry is read from the cache and no request is sent to the server, the Result column will show (Cache) and the Size column
will show zero.

<4. COOKIES (../COOKIES/) 6. METHODS> (../METHODS/)

Ready to get started?

TRY FOR FREE

(/DOWNLOAD/)
BUY NOW (/BUY/)

HttpWatch
Features (/features/httpdebugger.aspx)
Compare Editions (/editions.aspx)
New in Version 10.x (/newin10x.aspx)
Download (/download/)
Pricing (/buy/)

Our Customers
Who is using it? (/#customers)
What are they saying? (/#quotes)

Learning & Documentation

HttpWatch Blog (http://blog.httpwatch.com)

HTTP Gallery (/httpgallery/)

https://www.httpwatch.com/httpgallery/caching/ 3/4
7/4/2017 HTTPCaching|HttpWatch
HTTP Gallery (/httpgallery/)
HttpWatch Help (http://help.httpwatch.com)
HttpWatch Automation Reference (http://apihelp.httpwatch.com)

Support
Technical Support (/support/)
About Us (/company/)
Contact Us (/company/)
Blog (http://blog.httpwatch.com)
Twitter (https://twitter.com/httpwatch)

Search (/search/) Terms & Conditions (/company/terms.aspx) Privacy Policy (/company/privacy_policy.aspx) Copyright (/company/copyright.aspx)

Copyright 2017 Neumetrix Limited (/)

https://www.httpwatch.com/httpgallery/caching/ 4/4