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

Cache Me If You Can

Lee Jones
September 21, 2014
Technology
2
260

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
250
Getting Started with Docker
leejones
0
250
Packaging Rails Applications
leejones
0
53
The Worker Pattern
leejones
1
260

Other Decks in Technology

See All in Technology
LLM とプロンプトエンジニアリング／チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
250
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
120
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
440
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
270
推しは推せるときに推せ！ プロダクトにフィードバックしていこう
nakasho
0
190
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
390
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
150
Algyan イベント振り返り
linyixian
0
200
20240416_devopsdaystokyo
kzkmaeda
1
200
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
170
NgRx Signal Store
rainerhahnekamp
0
140
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.2k

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
BBQ
matthewcrist
80
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
58k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
RailsConf 2023
tenderlove
2
530
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
Designing Experiences People Love
moore
136
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Happy Clients
brianwarren
91
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k

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