HTTP Caching - HttpWatch
HTTP Caching - 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 modication 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.
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 specication
(http://www.w3.org/Protocols/rfc2616/rfc2616.html).
<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 modication
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 specied 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 specication 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
The cached entry has no expiration date and the content is being accessed for the rst time in a browser session
The user has requested a page update by clicking the Refresh button or pressing F5
If the cached entry has a last modication 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 specied, 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 modied 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:
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 modication 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 modication 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.
1. Open HttpWatch by right clicking on the web page and selecting HttpWatch from the context menu
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.
(/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)
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)
https://www.httpwatch.com/httpgallery/caching/ 4/4