Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cache Me If You Can

Lee Jones
September 21, 2014
Technology
2
300

Cache Me If You Can

An introduction to HTTP caching that covers Varnish, browsers, and CDNs. I gave this talk at CoderFaire 2014 on September 21.

Lee Jones

September 21, 2014
Tweet

More Decks by Lee Jones

See All by Lee Jones
Continuous Improvement
leejones
1
300
Getting Started with Docker
leejones
0
300
Packaging Rails Applications
leejones
0
60
The Worker Pattern
leejones
1
310

Other Decks in Technology

See All in Technology
Platform Engineering for Software Developers and Architects
syntasso
1
480
元旅行会社の情シス部員が教えるおすすめなre:Inventへの行き方 / What is the most efficient way to re:Invent
naospon
2
320
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.7k
データの信頼性を支える仕組みと技術
chanyou0311
6
1.7k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
850
私はこうやってマインドマップでテストすることを出す！
mineo_matsuya
0
360
Lexical Analysis
shigashiyama
1
150
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
3
1.3k
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
470
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
6
2.4k

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Become a Pro
speakerdeck
PRO
25
5k
Rails Girls Zürich Keynote
gr2m
94
13k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
A designer walks into a library…
pauljervisheath
203
24k
Bash Introduction
62gerente
608
210k
For a Future-Friendly Web
brad_frost
175
9.4k
Being A Developer After 40
akosma
86
590k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Into the Great Unknown - MozCon
thekraken
32
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k

Transcript

  1. if you can cache me

  2. GET /me HTTP/1.1 ! HTTP/1.1 200 OK X-Name: Lee Jones

    X-Twitter: @scribblethink X-GitHub: leejones X-Speaker-Deck: leejones

  3. Web Operations

  4. imagine…

  5. None
  6. None
  7. None
  8. None

  9. !

  10. None

  11. .gif

  12. so many cat gifs search

  13. None

  14. $

  15. it’s slow

  16. it’s not done till it’s fast

  17. don’t worry I got this

  18. None

  19. help!!!

  20. caching

  21. http caching

  22. varnish

  23. caching HTTP reverse proxy

  24. ?

  25. None
  26. None

  27. /recent /recent

  28. http headers

  29. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> …

  30. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … Status

  31. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … Headers

  32. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … Body

  33. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … Cache-Control

  34. Expires vs Cache-Control HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583"

    Cache-Control: public, max-age=3600 ! <!DOCTYPE html> <body>

  35. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … Cache-Control

  36. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … public

  37. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … max-age=3600

  38. 1. Cache-Control (max-age) Varnish TTL

  39. None

  40. $ $ $ $ $

  41. everything is awesome

  42. #everythingisawesome

  43. ! ? ! ? !

  44. where are my favorites?

  45. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … public max-age=3600

  46. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: private, max-age=0,

    must-revalidate ! <!DOCTYPE html> <body> … private max-age=0 must-revalidate

  47. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: private, max-age=0,

    must-revalidate ! <!DOCTYPE html> <body> … private

  48. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: private, max-age=0,

    must-revalidate ! <!DOCTYPE html> <body> … max-age=0

  49. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: private, max-age=0,

    must-revalidate ! <!DOCTYPE html> <body> … must-revalidate

  50. $ $ $ $ $

  51. everything is awesome

  52. ! ? ! ? !

  53. browsers

  54. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=3600

    ! <!DOCTYPE html> <body> … public max-age=3600

  55. .gif .css .js

  56. cat-627398830461.gif

  57. main-269827387281.css

  58. /popular /profile /recent

  59. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=0

    ! <!DOCTYPE html> <body> … public max-age=0

  60. s-maxage

  61. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=0,

    s-maxage=3600 ! <!DOCTYPE html> <body> … max-age=0 s-maxage=3600

  62. 1. Cache-Control (s-maxage) 2. Cache-Control (max-age) Varnish TTL

  63. s-maxage: Varnish max-age: Varnish + Browsers vs

  64. $ $ $ $ $

  65. everything is awesome

  66. ! ? ! ? !

  67. so many cat gifs search

  68. real-time updates

  69. None

  70. “real-time“ updates

  71. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=0,

    s-maxage=3600 ! <!DOCTYPE html> <body> … max-age=0 s-maxage=3600

  72. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=0,

    s-maxage=60 ! <!DOCTYPE html> <body> … max-age=0 s-maxage=60

  73. HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: public, max-age=0,

    s-maxage=20 ! <!DOCTYPE html> <body> … max-age=0 s-maxage=20

  74. PURGE

  75. curl -XPURGE http://example.com/recent

  76. curl -XPURGE http://example.com/recent PURGE

  77. curl -XPURGE http://example.com/recent /recent /recent

  78. after :save do purge end

  79. $ $ $ $ $

  80. everything is awesome

  81. ? ! ? !

  82. it’s slow

  83. everything is not the same

  84. latency

  85. None
  86. None
  87. None
  88. None
  89. None

  90. closer is faster

  91. content delivery network CDN

  92. caching HTTP reverse proxy

  93. caching HTTP reverse proxy (distributed)

  94. None
  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None

  104. $ $ $ $ $

  105. $ $ $ $

  106. $ $ $ $

  107. everything is awesome

  108. None

  109. everything is (mostly) awesome

  110. caching + grace

  111. None

  112. so many cat gifs search

  113. so many cat gifs search

  114. so many cat gifs

  115. so many cat gifs search

  116. PURGE

  117. PURGE!?

  118. Surrogate-Key

  119. Surrogate-Key: top-ten HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control:

    public, max-age=0, s-maxage=3600 Surrogate-Key: top-ten ! <!DOCTYPE html> <body> …

  120. Surrogate-Key: user-1234 HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control:

    public, max-age=0, s-maxage=3600 Surrogate-Key: user-1234 ! <!DOCTYPE html> <body> …

  121. more control

  122. Surrogate-Control

  123. no-cache HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control: no-cache

    Surrogate-Control: max-age=3600 ! <!DOCTYPE html> <body> …

  124. Surrogate-Control: max-age=3600 HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control:

    no-cache Surrogate-Control: max-age=3600 ! <!DOCTYPE html> <body> …

  125. Surrogate-Control: max-age=3600+600 HTTP/1.1 200 OK Content-Type: text/html ETag: "0dfdc6cc20e7c40f182b6dd6e85a9583" Cache-Control:

    no-cache Surrogate-Control: max-age=3600+600 ! <!DOCTYPE html> <body> …

  126. 1. Surrogate-Control 2. Cache-Control (s-maxage) 3. Cache-Control (max-age) TTL

  127. Surrogate-Control: CDNs Cache-Control: CDNs + Browsers vs

  128. None

  129. testing

  130. staging

  131. TDD

  132. TDD

  133. TDD

  134. TDD

  135. metrics

  136. logging

  137. start small

  138. start safe

  139. static assets

  140. static page(s)

  141. low TTL

  142. thanks!

  143. links: Beginner’s Guide to HTTP Cache Headers: www.mobify.com/blog/beginners-guide-to-http-cache- headers/ Caching

    Tutorial: www.mnot.net/cache_docs HTTP Headers: www.w3.org/Protocols/rfc2616/rfc2616-sec14.html Varnish: www.varnish-cache.org Fastly: www.fastly.com/blog/ www.fastly.com/support/ Lonely Planet: www.lonelyplanet.com

  144. photo credits: ! Courtney and Lee Jones

  145. None
  146. None