Caching web contents in the browser
11 likes947 views
The presentation by Nacho Coloma focuses on browser caching and how to utilize expires headers and cache indicators to improve performance. Key points include understanding 304 responses, the difference between strong and weak cache indicators, and techniques to cache immutable resources effectively. The goal is to enhance browser efficiency and reduce request times to under one second.
![Thanks for your attention Nacho Coloma [email_address] http://icoloma.blogspot.com Source: http://www.sawse.com/ http://www.extrema-sistemas.com/](https://image.slidesharecdn.com/devoxx3-1233954709612026-3/85/Caching-web-contents-in-the-browser-19-320.jpg)
Caching web contents in the browser
- 2. Caching web contents in the browser Nacho Coloma Java Architect Extrema Sistemas de Información
- 3. Overall Presentation Goal Learn to think like the browser
- 4. 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 :)
- 5. Ye olde cache We tend to avoid what we do not understand. Source: http://www.sawse.com/
- 6. 304 (Not Modified) responses Expires headers Strong and weak cache indicators Three things to know
- 7. Means “the browser already has the latest version of this file” Will happen with every click unless Expires is used 304
- 8. 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
- 9. 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
- 10. 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.
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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.
- 17. Improve your performance! Set your goal to < 1 sec per request
- 18. Q&A
- 19. Thanks for your attention Nacho Coloma [email_address] http://icoloma.blogspot.com Source: http://www.sawse.com/ http://www.extrema-sistemas.com/