Cache is King discusses the importance of caching for website performance. It shows that enabling caching through techniques like setting Cache-Control headers can reduce page load times significantly. Specifically, using max-age to set expiration times for cacheable assets avoids unnecessary HTTP requests. For dynamic content, no-cache must be used to prevent caching. The document advocates being explicit with caching directives and measuring caching behavior to identify opportunities to optimize websites for cached access.

1. Cache is
King
stevesouders.com/docs/html5dev-cacheisking-20121015.pptx
Disclaimer: This content does not necessarily reflect the opinions of my employer.

5. Cache

22. Network
JavaScript
Cache

23. Experiment Setup
Baseline:
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

24. Long Pole in the Tent
Fast Network:
FIOS: 20 Mbps down, 5 Mbps up, 4ms RTT
No JavaScript:
disable JavaScript
Primed Cache:
“repeat view”

26. 7.65 4.74 4.13 3.46

27. 7.65 4.74 4.13 3.46

28. 7.65 4.74 4.13 3.46

29. 7.65 4.74 4.13 3.46

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

36. Top 50K-300K
slow increase in adoption
http://httparchive.org/trends.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)

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

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

53. be explicit
always specify Cache-Control:
max-age OR no-cache

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

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

57. app cache
offline 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

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

64. smarter browsers
bigger cache
smarter purging
prioritized websites

65. Preferred Caching

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

67. personalized
browsing

68. takeaways
gather more cache stats for
your users
be explicit! use max-age or
no-cache
augment with localStorage &
appcache
lobby browser vendors

69. http://httparchive.org/

70. Steve Souders
@souders
stevesouders.com/docs/html5dev-cacheisking-20121015.pptx