Cache is King

Cache is Kingstevesouders.com/docs/html5dev-cacheisking-20121015.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.

NetworkJavaScriptCache

Experiment SetupBaseline: WebPagetest.org Alexa world top 1000 IE9 DSL: 1.5 Mbps down, 384 Kbps up, 50ms RTT empty cache (“first view”) median of 3 tests window.onload

Long Pole in the TentFast Network: FIOS: 20 Mbps down, 5 Mbps up, 4ms RTTNo JavaScript: disable JavaScriptPrimed Cache: “repeat view”

7.65 4.74 4.13 3.46

Caching 101: simple GET GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 204528 function(){…next time: GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 204528 function(){…How can we avoid downloading 200K if the file hasn’t changed?

Caching 101: Conditional GET GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 204528 Last-Modified: Mon, 24 Sep 2012 21:14:35 GMT Etag: “3Rsttw” function(){…next time: GET /scripts/main.js HTTP/1.1 If-Modified-Since: Mon, 24 Sep 2012 21:14:35 GMT If-None-Match: “3Rsttw” HTTP/1.1 304 Not Modified304 response saves us 200K – yay!Is there a way to avoid checking EVERY time?

Caching 101: max-age GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 204528 Last-Modified: Mon, 24 Sep 2012 21:14:35 GMT Cache-control: max-age=31536000 function(){…next time (within 1 year): [nothing]max-age eliminates HTTP requestHow avoid caching, e.g., dynamic responses?

Caching 101: no-cache GET /scripts/inbox.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 1328 Cache-control: no-cache, must-revalidate, max-age=0 function(){…next time: GET /scripts/inbox.js HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/javascript Content-Length: 1417 Cache-control: no-cache, must-revalidate, max-age=0 function(){…Be explicit! Use max-age or no-cache.

Top 1K no-cache or must-revalidate 10% 4%14% of requests have Cache-Control: no-cache or must-revalidate24% have no Cache-Control header at all27% have no max-age (heuristic caching) http://httparchive.org/interesting.php

Top 300K no-cache or must-revalidate 9% 4%13% of requests have Cache-Control: no-cache or must-revalidate44% have no Cache-Control header at all48% have no max-age (heuristic caching) http://httparchive.org/interesting.php

Top 50K-300Kslow increase in adoption http://httparchive.org/trends.php

Heuristic CachingRFC2616:[in the absence of max-age] the cacheMAY compute a freshness lifetime usinga heuristic. […]if the response doeshave a Last-Modified time, theheuristic expiration value SHOULD beno more than some fraction of theinterval since that time. A typicalsetting of this fraction might be 10%.recall 48% of requests have no max-age!What’s (10% of) the typical interval?

6% heuristic max-age < 1 day30% heuristic max-age > 3 daysbut why don’t they have max-age?!8% “unknown” checked once per session (IE9)

www.airbnb.com/ 72 requests 81% have Cache-Control 10% expire in < 1 day 78% have Last-Modified40 days median L-M interval

www.pinterest.com/ 131 requests 87% have Cache-Control 2% expire in < 1 day 94% have Last-Modified151 days median L-M interval

www.stackmob.com/ 52 requests 25% have Cache-Control 1% expire in < 1 day 81% have Last-Modified241 days median L-M interval

www.mozilla.org/ 32 requests 31% have Cache-Control 16% expire in < 1 day 84% have Last-Modified24 days median L-M interval

www.zendesk.com/ 70 requests 94% have Cache-Control 59% expire in < 1 day 69% have Last-Modified59 days median L-M interval

www.catch.com/ 52 requests 19% have Cache-Control 50% expire in < 1 day 69% have Last-Modified151 days median L-M interval

www.intel.com/ 90 requests 66% have Cache-Control 84% expire in < 1 day 81% have Last-Modified12 days median L-M interval

www.boston.com/ 69 requests 69% have Cache-Control 71% expire in < 1 day 73% have Last-Modified61 days median L-M interval

www.time.com/ 171 requests 35% have Cache-Control 71% expire in < 1 day 69% have Last-Modified166 days median L-M interval

www.usatoday.com/ 127 requests 29% have Cache-Control 67% expire in < 1 day 79% have Last-Modified29 days median L-M interval

www.telegraph.co.uk/ 179 requests 28% have Cache-Control 84% expire in < 1 day 77% have Last-Modified106 days median L-M interval

www.tmz.com/ 439 requests 51% have Cache-Control 48% expire in < 1 day 59% have Last-Modified25 days median L-M interval

be explicitalways specify Cache-Control:max-age OR no-cache

20% of page views done with “empty cache”40-60% of daily users experience “empty cache” www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

approximately 70% of users do not have fullcaches [so 30% do have a full cache]for those users who filled up their cache…howmany hours of "active" browsing does it taketo fill the cache? 25% in 1 hour, 50% in 4hours, and 75% in 10 hours.7% of users will clear their cache…once perweek… 19% of users will experience fatalcache corruption at least once per week, thusrequiring nuking the whole cache. plus.google.com/103382935642834907366/posts/XRekvZgdnBb

blaze.io/mobile/understanding-mobile-cache-sizes/

app cacheoffline apps, longer cache<!doctype html><html manifest=“myapp.appcache”>myapp.appcache: CACHE MANIFEST # Revision: 1.28 CACHE: /images/logo.gif NETWORK: /login.html FALLBACK: /index.html /offline.html Content-Type: text/cache-manifest

app cache gotchashtml docs w/ manifest are cached404 => nothing is cachedsize: 5MB+must rev manifest to update resourcesupdate is served on 2nd reload (?!?!)

push applogo.gif = user loads app app cache is empty app fetch manifest fetch logo.gif cache app cache = user sees reloadpush app user loads app user loads app againlogo.gif = app cache = app cache =rev manifest user sees user sees fetch manifest fetch manifest (304) fetch logo.gif app cache =

load twice workaroundwindow.applicationCache.addEventListener(updateready, function(e) { if ( window.applicationCache.status == window.applicationCache.UPDATEREADY) { if ( confirm(“Load new content?”) ) { ...http://www.webdirections.org/blog/get-offline/http://www.html5rocks.com/en/tutorials/appcache/beginner/

localStoragewindow.localStorage: setItem() getItem() removeItem() clear()also sessionStorageall popular browsers, 5MB maxwarning: it’s synchronoushttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html

a day’s worth of Google Chrome dev channelweekend traffic on desktop ChromeTime in ms to prime localStorage from disk: Percentile Windows Mac Linux 50th 0 0 0 75th 2 0 0 90th 40 17 17 95th 160 57 160 99th 1200 890 1200 insouciant.org/tech/time-to-load-localstorage-into-memory/

localStorage as cache1st doc: write JS & CSS blocks to localStorage mres.-0yDUQJ03U8Hjija: <script>(function(){...set cookie with entries & version MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:...later docs: read JS & CSS from localStorage document.write( localStorage.getItem(mres.- 0yDUQJ03U8Hjija) );do checksum before evalstevesouders.com/blog/2011/03/28/storager-case-study-bing-google/lists.w3.org/Archives/Public/public-webcrypto-comments/2012Aug/0076.html

smarter browsersbigger cachesmarter purgingprioritized websites

Preferred Caching

igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/

personalized browsing

takeawaysgather more cache stats for your usersbe explicit! use max-age or no-cacheaugment with localStorage & appcachelobby browser vendors

http://httparchive.org/

Steve Souders @soudersstevesouders.com/docs/html5dev-cacheisking-20121015.pptx

http://marakana.com	926
https://twitter.com	239
http://edydawsonwebdev.wordpress.com	53
http://anthonyalvarez.us	24
https://si0.twimg.com	5
http://moderation.local	2
http://mrkn.co	2
http://twitter.com	1
https://zmail.zoho.com	1
http://blog.sahsu.mobi	1

Cache is King

by Steve Souders on Oct 15, 2012

Accessibility

Upload Details

Usage Rights

10 Embeds 1,254

Statistics

Cache is King Presentation Transcript