Your SlideShare is downloading. ×
0
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
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
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
Cache is King
Cache is King
Cache is King
Cache is King
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cache is King

10,594

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,594
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

    ×