www.devoxx.com

Caching web contents in the browser Nacho Coloma Java Architect Extrema Sistemas de Información

Nacho Coloma

Java Architect

Extrema Sistemas de

Información

Overall Presentation Goal Learn to think like the browser

Learn to think like the browser

Speaker’s qualifications Nacho Coloma is a Java Architect at Extrema Sistemas de Información Since 1999 Nacho has designed air traffic systems, e-banking platforms, Document Management Systems and a full load of enterprise applications … during which he has dealt with browsers more than he would like to :)

Nacho Coloma is a Java Architect at Extrema Sistemas de Información

Since 1999 Nacho has designed air traffic systems, e-banking platforms, Document Management Systems and a full load of enterprise applications

… during which he has dealt with browsers more than he would like to :)

Ye olde cache We tend to avoid what we do not understand. Source: http://www.sawse.com/

We tend to avoid what we do not understand.

304 (Not Modified) responses Expires headers Strong and weak cache indicators Three things to know

304 (Not Modified) responses

Expires headers

Strong and weak cache indicators

Means “the browser already has the latest version of this file” Will happen with every click unless Expires is used 304

Means “the browser already has the latest version of this file”

Will happen with every click unless Expires is used

If the server includes Last-Modified the browser will include If-Modified-Since with each further request Example: any static file with tomcat 304 with Last-Modified Browser Server <No header> Last-Modified: Fri, 02 Nov 2007 00:36:01 GMT If-Modified-Since: Fri, 02 Nov 2007 00:36:01 GMT 200 OK / 304 Not Modified First request Subsequent requests

If the server includes Last-Modified the browser will include If-Modified-Since with each further request

Example: any static file with tomcat

If server includes ETag the browser will include If-None-Match with each further request Example: <inode>-<file-size>-<last-modified> with apache 304 with ETag Browser Server <No header> ETag: 2e88051-8c-43f0b6dd972c0 If-None-Match: 2e88051-8c-43f0b6dd972c0 200 OK / 304 Not Modified First request Subsequent requests

If server includes ETag the browser will include If-None-Match with each further request

Example: <inode>-<file-size>-<last-modified> with apache

Indicates for how long the file should not be retrieved again. Cache-control (max-age) http 1.1 seconds to expire used by the browser Expires header Browser Server <No header> Expires: Mon, 15 Dec 2008 19:11:50 GMT Cache-Control: max-age=1209600 (No more requests until the resource expires) First request Subsequent requests EExpires http 1.0 Date used by proxies installed by The Roman Empire.

Indicates for how long the file should not be retrieved again.

Cache-control (max-age)

http 1.1

seconds to expire

used by the browser

EExpires

http 1.0

Date

used by proxies installed by The Roman Empire.

Refresh : a new request will be sent for each file, ignoring the Expires header. Any If-Modified-Since or If-None-Match headers will be sent. The server may return a 304 response. Shift + Refresh : a new request will be sent for each file, ignoring the Expires header. Any If-Modified-Since or If-None-Match headers will not be sent . The server cannot return a 304 response. The Refresh button

Refresh : a new request will be sent for each file, ignoring the Expires header.

Any If-Modified-Since or If-None-Match headers will be sent.

The server may return a 304 response.

Shift + Refresh : a new request will be sent for each file, ignoring the Expires header.

Any If-Modified-Since or If-None-Match headers will not be sent .

The server cannot return a 304 response.

Weak : Last-Modified, default ETag implementations. Strong : MD5, version numbers Strong indicators can be inserted in the URL or used as ETag headers Weak and strong indicators

Weak : Last-Modified, default ETag implementations.

Strong : MD5, version numbers

Strong indicators can be inserted in the URL or used as ETag headers

Version numbers http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css Revision numbers http://localhost/myentity?id=5&revision=20 MD5 http://localhost/images/photo.gif?checksum=9e0bee8ace86b2230140642adcf57c4c Strong indicators

Version numbers

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css

Revision numbers

http://localhost/myentity?id=5&revision=20

MD5

http://localhost/images/photo.gif?checksum=9e0bee8ace86b2230140642adcf57c4c

Using strong indicators, you can set your Expires header to cache forever: HTTP spec : 1 year Yahoo! recommendation: 10 years Use only with immutable resources Expires & strong indicators

Using strong indicators, you can set your Expires header to cache forever:

HTTP spec : 1 year

Yahoo! recommendation: 10 years

Use only with immutable resources

DEMO You can try this yourself: Go to http://loom.extrema-sistemas.com/loomdemo/ Look the javascript file names that are retrieved; recognize the MD5 hash. Look the files downloaded for the first and further requests (use LiveHttpHeaders or Firebug) Click Refresh and see what happens

You can try this yourself:

Go to

http://loom.extrema-sistemas.com/loomdemo/

Look the javascript file names that are retrieved; recognize the MD5 hash.

Look the files downloaded for the first and further requests (use LiveHttpHeaders or Firebug)

Click Refresh and see what happens

Summary The browser will ask for every resource unless you specify an Expires header You may return 304 responses You can use strong and weak cache indicators, in the URL or as HTTP headers With strong cache indicators, you can cache immutable resources forever.

The browser will ask for every resource unless you specify an Expires header

You may return 304 responses

You can use strong and weak cache indicators, in the URL or as HTTP headers

With strong cache indicators, you can cache immutable resources forever.

Improve your performance! Set your goal to < 1 sec per request

Set your goal to < 1 sec per request

Q&A

Thanks for your attention Nacho Coloma [email_address] http://icoloma.blogspot.com Source: http://www.sawse.com/ http://www.extrema-sistemas.com/

Nacho Coloma

[email_address]

http://icoloma.blogspot.com