Your SlideShare is downloading. ×

Cache is King

10,456

Published on

HTML5 Developers Conference 2012

HTML5 Developers Conference 2012

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

No Downloads
Views
Total Views
10,456
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
60
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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&chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&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&chds=9,99,20,150,9,99,100,1000&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxr=1,100,1000,100|2,20,150,20&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+%28kB%29&chdlp=bv|r
  • lessblockingmuchfewerrequestshttp://chart.apis.google.com/chart?chd=t:-1|90,59,0,0|-1|904,577,0,0&chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&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&chds=9,99,20,150,9,99,100,1000&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxr=1,100,1000,100|2,20,150,20&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+%28kB%29&chdlp=bv|r
  • same # ofrequests & sizeasbaseline10x fasterconnectionimaginechallengesfor mobilehttp://chart.apis.google.com/chart?chd=t:-1|90,59,91,0|-1|904,577,927,0&chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&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&chds=9,99,20,150,9,99,100,1000&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxr=1,100,1000,100|2,20,150,20&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+%28kB%29&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&chxl=0:|Baseline|No%20JS|Fast%20Network|Primed%20Cache&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&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&chds=9,99,20,150,9,99,100,1000&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxr=1,100,1000,100|2,20,150,20&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+%28kB%29&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/
  • Transcript

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

    ×