Cache is  Kingstevesouders.com/docs/html5dev-cacheisking-20121015.pptxDisclaimer: This content does not necessarily reflec...
Cache
NetworkJavaScriptCache
Experiment SetupBaseline: WebPagetest.org Alexa world top 1000 IE9 DSL: 1.5 Mbps down, 384 Kbps up,    50ms RTT empty cach...
Long Pole in the TentFast Network: FIOS: 20 Mbps down, 5 Mbps up, 4ms RTTNo JavaScript: disable JavaScriptPrimed Cache: “r...
7.65   4.74   4.13   3.46
7.65   4.74   4.13   3.46
7.65   4.74   4.13   3.46
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: 2...
Caching 101: Conditional GET GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK  Content-Type: text/javascript   Content-Leng...
Caching 101: max-age GET /scripts/main.js HTTP/1.1 HTTP/1.1 200 OK  Content-Type: text/javascript   Content-Length: 2045...
Caching 101: no-cache GET /scripts/inbox.js HTTP/1.1 HTTP/1.1 200 OK  Content-Type: text/javascript   Content-Length: 13...
Top 1K                  no-cache or must-revalidate       10%   4%14% of requests have Cache-Control:  no-cache or must-re...
Top 300K                  no-cache or must-revalidate        9%   4%13% of requests have Cache-Control:  no-cache or must-...
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...
6% heuristic max-age < 1 day30% heuristic max-age > 3 daysbut why don’t they have max-age?!8% “unknown” checked once per s...
www.airbnb.com/    72 requests   81% have Cache-Control   10% expire in < 1 day   78% have Last-Modified40 days median L-M...
www.pinterest.com/    131 requests   87% have Cache-Control     2% expire in < 1 day   94% have Last-Modified151 days medi...
www.stackmob.com/     52 requests   25% have Cache-Control     1% expire in < 1 day   81% have Last-Modified241 days media...
www.mozilla.org/    32 requests   31% have Cache-Control   16% expire in < 1 day   84% have Last-Modified24 days median L-...
www.zendesk.com/    70 requests   94% have Cache-Control   59% expire in < 1 day   69% have Last-Modified59 days median L-...
www.catch.com/     52 requests   19% have Cache-Control   50% expire in < 1 day   69% have Last-Modified151 days median L-...
www.intel.com/    90 requests   66% have Cache-Control   84% expire in < 1 day   81% have Last-Modified12 days median L-M ...
www.boston.com/    69 requests   69% have Cache-Control   71% expire in < 1 day   73% have Last-Modified61 days median L-M...
www.time.com/    171 requests   35% have Cache-Control   71% expire in < 1 day   69% have Last-Modified166 days median L-M...
www.usatoday.com/   127 requests   29% have Cache-Control   67% expire in < 1 day   79% have Last-Modified29 days median L...
www.telegraph.co.uk/    179 requests   28% have Cache-Control   84% expire in < 1 day   77% have Last-Modified106 days med...
www.tmz.com/   439 requests   51% have Cache-Control   48% expire in < 1 day   59% have Last-Modified25 days median L-M in...
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/2...
approximately 70% of users do not have fullcaches [so 30% do have a full cache]for those users who filled up their cache…h...
blaze.io/mobile/understanding-mobile-cache-sizes/
app cacheoffline apps, longer cache<!doctype html><html manifest=“myapp.appcache”>myapp.appcache:  CACHE MANIFEST  # Revis...
app cache gotchashtml docs w/ manifest are cached404 => nothing is cachedsize: 5MB+must rev manifest to update resourcesup...
push applogo.gif =               user loads app               app cache is empty                                      app ...
load twice workaroundwindow.applicationCache.addEventListener(updateready, function(e) {   if ( window.applicationCache.st...
localStoragewindow.localStorage:   setItem()   getItem()   removeItem()   clear()also sessionStorageall popular browsers, ...
a day’s worth of Google Chrome dev channelweekend traffic on desktop ChromeTime in ms to prime localStorage from disk:    ...
localStorage as cache1st doc: write JS & CSS blocks to localStorage   mres.-0yDUQJ03U8Hjija: <script>(function(){...set co...
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 & appcachelob...
http://httparchive.org/
Steve Souders                                             @soudersstevesouders.com/docs/html5dev-cacheisking-20121015.pptx
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Cache is King
Upcoming SlideShare
Loading in …5
×

Cache is King

12,383 views

Published on

HTML5 Developers Conference 2012

0 Comments
60 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,383
On SlideShare
0
From Embeds
0
Number of Embeds
1,540
Actions
Shares
0
Downloads
0
Comments
0
Likes
60
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/athrasher/2823255013/
  • http://www.flickr.com/photos/madeforglorysigns/4311427541/used with permission from Golden West Sign Arts
  • http://www.flickr.com/photos/59937401@N07/5857449830/
  • http://www.flickr.com/photos/drewish/106431464/
  • http://www.flickr.com/photos/thomasfisherlibrary/5912522676/Creator: Tyrrell, Joseph Burr, 1858-1957Title: An Indian cache near Aishihik [Yukon, Canada]Notes: Title transcribed from caption. From an album of Joseph Tyrrell’s photographs of the Klondike, 1898-1899Date: 1898
  • http://www.flickr.com/photos/michaelcr/773201918/
  • http://chart.apis.google.com/chart?chd=t:-1|90,0,0,0|-1|904,0,0,0&amp;chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&amp;chxt=x,y,r&amp;chs=600x300&amp;cht=lxy&amp;chco=15A50E,006600&amp;chm=N,15A50E,0,-1,12,,h::8|N**kB,006600,1,-1,12,,h::8|o,15A50E,0,-1,6|o,006600,1,-1,6&amp;chds=9,99,20,150,9,99,100,1000&amp;chts=006600,24&amp;chtt=Total+Transfer+Size+%26+Total+Requests&amp;chma=5,5,5,25&amp;chls=1,6,3|1&amp;chxr=1,100,1000,100|2,20,150,20&amp;chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&amp;chxtc=0,4|1,4&amp;chxp=0&amp;chdl=Total+Requests|Total+Transfer+Size+%28kB%29&amp;chdlp=bv|r
  • lessblockingmuchfewerrequestshttp://chart.apis.google.com/chart?chd=t:-1|90,59,0,0|-1|904,577,0,0&amp;chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&amp;chxt=x,y,r&amp;chs=600x300&amp;cht=lxy&amp;chco=15A50E,006600&amp;chm=N,15A50E,0,-1,12,,h::8|N**kB,006600,1,-1,12,,h::8|o,15A50E,0,-1,6|o,006600,1,-1,6&amp;chds=9,99,20,150,9,99,100,1000&amp;chts=006600,24&amp;chtt=Total+Transfer+Size+%26+Total+Requests&amp;chma=5,5,5,25&amp;chls=1,6,3|1&amp;chxr=1,100,1000,100|2,20,150,20&amp;chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&amp;chxtc=0,4|1,4&amp;chxp=0&amp;chdl=Total+Requests|Total+Transfer+Size+%28kB%29&amp;chdlp=bv|r
  • same # ofrequests &amp; sizeasbaseline10x fasterconnectionimaginechallengesfor mobilehttp://chart.apis.google.com/chart?chd=t:-1|90,59,91,0|-1|904,577,927,0&amp;chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&amp;chxt=x,y,r&amp;chs=600x300&amp;cht=lxy&amp;chco=15A50E,006600&amp;chm=N,15A50E,0,-1,12,,h::8|N**kB,006600,1,-1,12,,h::8|o,15A50E,0,-1,6|o,006600,1,-1,6&amp;chds=9,99,20,150,9,99,100,1000&amp;chts=006600,24&amp;chtt=Total+Transfer+Size+%26+Total+Requests&amp;chma=5,5,5,25&amp;chls=1,6,3|1&amp;chxr=1,100,1000,100|2,20,150,20&amp;chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&amp;chxtc=0,4|1,4&amp;chxp=0&amp;chdl=Total+Requests|Total+Transfer+Size+%28kB%29&amp;chdlp=bv|r
  • 32requests, 163 kBimmediately after so even 10 min cache time helpshttp://chart.apis.google.com/chart?chd=t:-1|90,59,91,32|-1|904,577,927,163&amp;chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&amp;chxt=x,y,r&amp;chs=600x300&amp;cht=lxy&amp;chco=15A50E,006600&amp;chm=N,15A50E,0,-1,12,,h::8|N**kB,006600,1,-1,12,,h::8|o,15A50E,0,-1,6|o,006600,1,-1,6&amp;chds=9,99,20,150,9,99,100,1000&amp;chts=006600,24&amp;chtt=Total+Transfer+Size+%26+Total+Requests&amp;chma=5,5,5,25&amp;chls=1,6,3|1&amp;chxr=1,100,1000,100|2,20,150,20&amp;chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&amp;chxtc=0,4|1,4&amp;chxp=0&amp;chdl=Total+Requests|Total+Transfer+Size+%28kB%29&amp;chdlp=bv|r
  • nit: you do NOT need to send Cache-Control on 204 responses
  • Alexa Top 1000
  • Alexa Top 1000
  • http://www.flickr.com/photos/auntiep/5547038689/
  • Many other speaker website’s were nearly as good (and uninteresting): Adobe, The Onion, Groupon, EventBrite, Nokia
  • Sidney Maestre
  • Christian
  • Mikito
  • http://www.flickr.com/photos/marlon-bunday-mmx/4988354238/
  • http://www.flickr.com/photos/gedankenstuecke/2749387908/
  • flickr.com/photos/india-nepal-iran/203982474/
  • flickr.com/photos/97657657@N00/1918688483/
  • flickr.com/photos/presley_m/5152304885/
  • flickr.com/photos/bryanpearson/564703455/
  • flickr.com/photos/nelsoncruz/431244400/
  • http://www.flickr.com/photos/hugovk/216375074/
  • resolve 10 most visited sites at startuppreconnect to preferred search engine when focus on omnibarresolve and preconnect to subresource domains
  • http://www.flickr.com/photos/bymeeni/4779608045/link prefetch is for ALL users – not necessarily where I navigatethe pattern learning has to occur on the clientbased on past behavior and present context, preload the content relevant to where I’ll go in the future
  • http://www.flickr.com/photos/scottlynchnyc/7040609039/
  • Cache is King

    1. 1. Cache is Kingstevesouders.com/docs/html5dev-cacheisking-20121015.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
    2. 2. Cache
    3. 3. NetworkJavaScriptCache
    4. 4. 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
    5. 5. Long Pole in the TentFast Network: FIOS: 20 Mbps down, 5 Mbps up, 4ms RTTNo JavaScript: disable JavaScriptPrimed Cache: “repeat view”
    6. 6. 7.65 4.74 4.13 3.46
    7. 7. 7.65 4.74 4.13 3.46
    8. 8. 7.65 4.74 4.13 3.46
    9. 9. 7.65 4.74 4.13 3.46
    10. 10. 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?
    11. 11. 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?
    12. 12. 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?
    13. 13. 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.
    14. 14. 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
    15. 15. 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
    16. 16. Top 50K-300Kslow increase in adoption http://httparchive.org/trends.php
    17. 17. 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?
    18. 18. 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)
    19. 19. www.airbnb.com/ 72 requests 81% have Cache-Control 10% expire in < 1 day 78% have Last-Modified40 days median L-M interval
    20. 20. www.pinterest.com/ 131 requests 87% have Cache-Control 2% expire in < 1 day 94% have Last-Modified151 days median L-M interval
    21. 21. www.stackmob.com/ 52 requests 25% have Cache-Control 1% expire in < 1 day 81% have Last-Modified241 days median L-M interval
    22. 22. www.mozilla.org/ 32 requests 31% have Cache-Control 16% expire in < 1 day 84% have Last-Modified24 days median L-M interval
    23. 23. www.zendesk.com/ 70 requests 94% have Cache-Control 59% expire in < 1 day 69% have Last-Modified59 days median L-M interval
    24. 24. www.catch.com/ 52 requests 19% have Cache-Control 50% expire in < 1 day 69% have Last-Modified151 days median L-M interval
    25. 25. www.intel.com/ 90 requests 66% have Cache-Control 84% expire in < 1 day 81% have Last-Modified12 days median L-M interval
    26. 26. www.boston.com/ 69 requests 69% have Cache-Control 71% expire in < 1 day 73% have Last-Modified61 days median L-M interval
    27. 27. www.time.com/ 171 requests 35% have Cache-Control 71% expire in < 1 day 69% have Last-Modified166 days median L-M interval
    28. 28. www.usatoday.com/ 127 requests 29% have Cache-Control 67% expire in < 1 day 79% have Last-Modified29 days median L-M interval
    29. 29. www.telegraph.co.uk/ 179 requests 28% have Cache-Control 84% expire in < 1 day 77% have Last-Modified106 days median L-M interval
    30. 30. www.tmz.com/ 439 requests 51% have Cache-Control 48% expire in < 1 day 59% have Last-Modified25 days median L-M interval
    31. 31. be explicitalways specify Cache-Control:max-age OR no-cache
    32. 32. 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/
    33. 33. 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
    34. 34. blaze.io/mobile/understanding-mobile-cache-sizes/
    35. 35. 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
    36. 36. app cache gotchashtml docs w/ manifest are cached404 => nothing is cachedsize: 5MB+must rev manifest to update resourcesupdate is served on 2nd reload (?!?!)
    37. 37. 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 =
    38. 38. 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/
    39. 39. 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
    40. 40. 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/
    41. 41. 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
    42. 42. smarter browsersbigger cachesmarter purgingprioritized websites
    43. 43. Preferred Caching
    44. 44. igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/
    45. 45. personalized browsing
    46. 46. takeawaysgather more cache stats for your usersbe explicit! use max-age or no-cacheaugment with localStorage & appcachelobby browser vendors
    47. 47. http://httparchive.org/
    48. 48. Steve Souders @soudersstevesouders.com/docs/html5dev-cacheisking-20121015.pptx

    ×