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

Cache Me If You Can

Avatar for Lee Jones Lee Jones
September 21, 2014
Technology
2
330

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.
Avatar for Lee Jones

Lee Jones

September 21, 2014
Tweet

More Decks by Lee Jones

See All by Lee Jones
Continuous Improvement
Avatar for Lee Jones leejones
1
320
Getting Started with Docker
Avatar for Lee Jones leejones
0
320
Packaging Rails Applications
Avatar for Lee Jones leejones
0
62
The Worker Pattern
Avatar for Lee Jones leejones
1
330

Other Decks in Technology

See All in Technology
AI Engineering Summit Pre Event LT #10
Avatar for Kaoru okaru
2
550
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
280
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.4k
IAMのマニアックな話 2025を執筆して、​ 見えてきたAWSアカウント管理の現在
Avatar for NRI Netcom nrinetcom
PRO
3
120
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
6
800
Monorepo Error Management: Automated Runbooks and Team-Targeted Alert Distribution
Avatar for Shota Iwami biwashi
1
140
AI とペアプロしてわかった 3 つのヒューマンエラー
Avatar for TakahiroIKEGAWA (池川 貴裕) takahiroikegawa
1
630
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/03 - 2025/05
Avatar for oracle4engineer oracle4engineer
PRO
1
170
これならできる！Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
Avatar for 株式会社出前館 demaecan
0
260
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
Avatar for MADOX madoxten
13
7k
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
Avatar for ayane blueb
0
120
ゆるSRE #11 LT
Avatar for Kaoru okaru
1
550

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
620
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
138
7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k

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