Caching web contents in the browser

3,244 views
3,165 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
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,244
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide
  • 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/

    ×