1. Cache is
King
stevesouders.com/docs/html5dev-cacheisking-20121015.pptx
Disclaimer: This content does not necessarily reflect the opinions of my employer.
30. 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?
31. 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 Modified
304 response saves us 200K – yay!
Is there a way to avoid checking EVERY time?
32. 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 request
How avoid caching, e.g., dynamic responses?
33. 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.
34. Top 1K
no-cache or must-revalidate
10% 4%
14% of requests have Cache-Control:
no-cache or must-revalidate
24% have no Cache-Control header at all
27% have no max-age (heuristic caching)
http://httparchive.org/interesting.php
35. Top 300K
no-cache or must-revalidate
9% 4%
13% of requests have Cache-Control:
no-cache or must-revalidate
44% have no Cache-Control header at all
48% have no max-age (heuristic caching)
http://httparchive.org/interesting.php
37. Heuristic Caching
RFC2616:
[in the absence of max-age] the cache
MAY compute a freshness lifetime using
a heuristic. […]if the response does
have a Last-Modified time, the
heuristic expiration value SHOULD be
no more than some fraction of the
interval since that time. A typical
setting of this fraction might be 10%.
recall 48% of requests have no max-age!
What’s (10% of) the typical interval?
38. 6% heuristic max-age < 1 day
30% heuristic max-age > 3 days
but why don’t they have max-age?!
8% “unknown” checked once per session (IE9)
39.
40. www.airbnb.com/
72 requests
81% have Cache-Control
10% expire in < 1 day
78% have Last-Modified
40 days median L-M interval
41. www.pinterest.com/
131 requests
87% have Cache-Control
2% expire in < 1 day
94% have Last-Modified
151 days median L-M interval
42. www.stackmob.com/
52 requests
25% have Cache-Control
1% expire in < 1 day
81% have Last-Modified
241 days median L-M interval
43. www.mozilla.org/
32 requests
31% have Cache-Control
16% expire in < 1 day
84% have Last-Modified
24 days median L-M interval
44. www.zendesk.com/
70 requests
94% have Cache-Control
59% expire in < 1 day
69% have Last-Modified
59 days median L-M interval
45. www.catch.com/
52 requests
19% have Cache-Control
50% expire in < 1 day
69% have Last-Modified
151 days median L-M interval
46. www.intel.com/
90 requests
66% have Cache-Control
84% expire in < 1 day
81% have Last-Modified
12 days median L-M interval
47.
48. www.boston.com/
69 requests
69% have Cache-Control
71% expire in < 1 day
73% have Last-Modified
61 days median L-M interval
49. www.time.com/
171 requests
35% have Cache-Control
71% expire in < 1 day
69% have Last-Modified
166 days median L-M interval
50. www.usatoday.com/
127 requests
29% have Cache-Control
67% expire in < 1 day
79% have Last-Modified
29 days median L-M interval
51. www.telegraph.co.uk/
179 requests
28% have Cache-Control
84% expire in < 1 day
77% have Last-Modified
106 days median L-M interval
52. www.tmz.com/
439 requests
51% have Cache-Control
48% expire in < 1 day
59% have Last-Modified
25 days median L-M interval
54. 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/
55. approximately 70% of users do not have full
caches [so 30% do have a full cache]
for those users who filled up their cache…how
many hours of "active" browsing does it take
to fill the cache? 25% in 1 hour, 50% in 4
hours, and 75% in 10 hours.
7% of users will clear their cache…once per
week… 19% of users will experience fatal
cache corruption at least once per week, thus
requiring nuking the whole cache.
plus.google.com/103382935642834907366/posts/XRekvZgdnBb
58. app cache gotchas
html docs w/ manifest are cached
404 => nothing is cached
size: 5MB+
must rev manifest to update resources
update is served on 2nd reload (?!?!)
59. push app
logo.gif =
user loads app
app cache is empty
app
fetch manifest
fetch logo.gif
cache
app cache =
user sees
reload
push app user loads app user loads app again
logo.gif = app cache = app cache =
rev manifest user sees user sees
fetch manifest fetch manifest (304)
fetch logo.gif
app cache =
60. load twice workaround
window.applicationCache.addEventListener('upda
teready',
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/
61. localStorage
window.localStorage:
setItem()
getItem()
removeItem()
clear()
also sessionStorage
all popular browsers, 5MB max
warning: it’s synchronous
http://dev.w3.org/html5/webstorage/
http://diveintohtml5.org/storage.html
62. a day’s worth of Google Chrome dev channel
weekend traffic on desktop Chrome
Time 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/
63. localStorage as cache
1st 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 eval
stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
lists.w3.org/Archives/Public/public-webcrypto-comments/2012Aug/0076.html
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
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
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