Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Caching web contents in the browser

3,449 views

Published on

Controlling what web contents are going to be cached and how to tell the browser a cache policy is not hard at all - but you must know which headers must be set. In this 15-minute talk we will explain Last-Modified, ETag, Expires and Cache-Control, and MD5-based caching.
This talk is not oriented towards any web application framework.

Published in: Technology

Caching web contents in the browser

  1. 1. www.devoxx.com
  2. 2. Caching web contents in the browser <ul><li>Nacho Coloma </li></ul><ul><li>Java Architect </li></ul><ul><li>Extrema Sistemas de </li></ul><ul><li>Información </li></ul>
  3. 3. Overall Presentation Goal <ul><li>Learn to think like the browser </li></ul>
  4. 4. Speaker’s qualifications <ul><li>Nacho Coloma is a Java Architect at Extrema Sistemas de Información </li></ul><ul><li>Since 1999 Nacho has designed air traffic systems, e-banking platforms, Document Management Systems and a full load of enterprise applications </li></ul><ul><li>… during which he has dealt with browsers more than he would like to :) </li></ul>
  5. 5. Ye olde cache <ul><li>We tend to avoid what we do not understand. </li></ul>Source: http://www.sawse.com/
  6. 6. <ul><li>304 (Not Modified) responses </li></ul><ul><li>Expires headers </li></ul><ul><li>Strong and weak cache indicators </li></ul>Three things to know
  7. 7. <ul><li>Means “the browser already has the latest version of this file” </li></ul><ul><li>Will happen with every click unless Expires is used </li></ul>304
  8. 8. <ul><li>If the server includes Last-Modified the browser will include If-Modified-Since with each further request </li></ul><ul><li>Example: any static file with tomcat </li></ul>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
  9. 9. <ul><li>If server includes ETag the browser will include If-None-Match with each further request </li></ul><ul><li>Example: <inode>-<file-size>-<last-modified> with apache </li></ul>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
  10. 10. <ul><li>Indicates for how long the file should not be retrieved again. </li></ul><ul><li>Cache-control (max-age) </li></ul><ul><ul><ul><li>http 1.1 </li></ul></ul></ul><ul><ul><ul><li>seconds to expire </li></ul></ul></ul><ul><ul><ul><li>used by the browser </li></ul></ul></ul>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 <ul><li>EExpires </li></ul><ul><ul><ul><li>http 1.0 </li></ul></ul></ul><ul><ul><ul><li>Date </li></ul></ul></ul><ul><ul><ul><li>used by proxies installed by The Roman Empire. </li></ul></ul></ul>
  11. 11. <ul><li>Refresh : a new request will be sent for each file, ignoring the Expires header. </li></ul><ul><ul><ul><li>Any If-Modified-Since or If-None-Match headers will be sent. </li></ul></ul></ul><ul><ul><ul><li>The server may return a 304 response. </li></ul></ul></ul><ul><li>Shift + Refresh : a new request will be sent for each file, ignoring the Expires header. </li></ul><ul><ul><ul><li>Any If-Modified-Since or If-None-Match headers will not be sent . </li></ul></ul></ul><ul><ul><ul><li>The server cannot return a 304 response. </li></ul></ul></ul>The Refresh button
  12. 12. <ul><li>Weak : Last-Modified, default ETag implementations. </li></ul><ul><li>Strong : MD5, version numbers </li></ul><ul><li>Strong indicators can be inserted in the URL or used as ETag headers </li></ul>Weak and strong indicators
  13. 13. <ul><li>Version numbers </li></ul><ul><ul><ul><li>http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js </li></ul></ul></ul><ul><ul><ul><li>http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css </li></ul></ul></ul><ul><li>Revision numbers </li></ul><ul><ul><ul><li>http://localhost/myentity?id=5&revision=20 </li></ul></ul></ul><ul><li>MD5 </li></ul><ul><ul><ul><li>http://localhost/images/photo.gif?checksum=9e0bee8ace86b2230140642adcf57c4c </li></ul></ul></ul>Strong indicators
  14. 14. <ul><li>Using strong indicators, you can set your Expires header to cache forever: </li></ul><ul><ul><ul><li>HTTP spec : 1 year </li></ul></ul></ul><ul><ul><ul><li>Yahoo! recommendation: 10 years </li></ul></ul></ul><ul><li>Use only with immutable resources </li></ul>Expires & strong indicators
  15. 15. DEMO <ul><li>You can try this yourself: </li></ul><ul><li>Go to </li></ul><ul><li>http://loom.extrema-sistemas.com/loomdemo/ </li></ul><ul><li>Look the javascript file names that are retrieved; recognize the MD5 hash. </li></ul><ul><li>Look the files downloaded for the first and further requests (use LiveHttpHeaders or Firebug) </li></ul><ul><li>Click Refresh and see what happens </li></ul>
  16. 16. Summary <ul><li>The browser will ask for every resource unless you specify an Expires header </li></ul><ul><li>You may return 304 responses </li></ul><ul><li>You can use strong and weak cache indicators, in the URL or as HTTP headers </li></ul><ul><li>With strong cache indicators, you can cache immutable resources forever. </li></ul>
  17. 17. Improve your performance! <ul><li>Set your goal to < 1 sec per request </li></ul>
  18. 18. Q&A
  19. 19. Thanks for your attention <ul><li>Nacho Coloma </li></ul><ul><li>[email_address] </li></ul><ul><li>http://icoloma.blogspot.com </li></ul>Source: http://www.sawse.com/ http://www.extrema-sistemas.com/

×