Slides for my HTTP caching headers talk at SRECon EMEA 2023 in Dublin. This presentation focuses heavily on the "Cache-Control" header and all the directives that give you the ability to control the behavior of the cache. Other caching headers such as "Vary", "Etag", "If-None-Match", "If-Modified-Since" & "Last-Modified" are also covered. Finally we talk about Edge Side Includes (ESI) as well. See https://feryn.eu/speaking/http-headers-make-website-go-faster-srecon23emea/ for more details.

2. Slow websites
SUCK

3. WEB PERFORMANCE IS AN
ESSENTIAL PART OF THE
USER EXPERIENCE

4. SLOW~DOWN

8. THROWING
SERVERS
ATTHEPROBLEM

9. MO' MONEY
MO' SERVERS
MO' PROBLEMS

10. IDENTIFY SLOWEST PARTS

11. OPTIMIZE

12. AFTER A WHILE YOU HIT THE LIMITS

13. CACHE

14. HI, I'M THIJS

15. I'M THE TECH
EVANGELIST
AT

19. WE MAKE THE
WEB FASTER

20. WE ENHANCE DIGITAL EXPERIENCES
BY LOWERING NETWORK LATENCY

21. WE BUILD SOFTWARE-DEFINED
WEB ACCELERATION & CONTENT
DELIVERY SOLUTIONS

22. 1.3 Tbps
per server
1.17 Gbps
per watt
ACHIEVE GROWTH, PERFORMANCE &
SUSTAINABILITY GOALS
WORLD’S FASTEST EDGE CONTENT DELIVERY SOFTWARE

25. CACHING

26. WHY
CACHE

27. HIGHER
CONCURRENCY

28. HIGHER
THROUGHPUT

29. LOWER LATENCY

30. IMPROVE QUALITY OF EXPERIENCE

31. WHY
RECOMPUTE
IF THE DATA
HASN'T
CHANGED?

32. DIFFERENT KINDS OF CACHING
✓ LOCAL KEY-VALUE STORE
✓ FILE CACHE
✓ DISTRIBUTE CACHE
✓ BROWSER CACHE
✓ REVERSE CACHING PROXY
✓ CONTENT DELIVERY NETWORK

34. USER SERVER

35. USER SERVER
BROWSER CACHE

36. USER SERVER
SERVER CACHE

37. UNDER PRESSURE
SERVER

38. USER PROXY SERVER

39. USER PROXY SERVER
REVERSE
CACHING
PROXY

40. USER PROXY SERVER
THE EDGE

41. USER VARNISH SERVER
THE EDGE

42. USER VARNISH SERVER
THE ORIGIN

45. EVERY
IMPLEMENTATION
HAS ITS OWN
CACHE POLICY
CONFIGURATION

46. HTTP HAS CONVENTIONAL
BUILT-IN CACHING
MECHANISMS

47. Expires: Mon, 20 Feb 2023 21:31:06 GMT

48. LIMITED OPTIONS

49. Cache-Control: public, max-age=500

50. Cache-Control: private, no-cache, no-store

51. KEY CACHING CONCEPTS

52. CACHING
HOLD THE RESPONSE AND SERVE IT AGAIN UPON
SUBSEQUENT REQUESTS

53. PRIVATE CACHE
A CACHE THAT EXISTS IN THE CLIENT.
E.G. A LOCAL DEVICE OR BROWSER CACHE.
STORES DATA FOR A SINGLE USER.

54. SHARED CACHE
A CACHE THAT SERVES MULTIPLE USERS.
USUALLY A CACHING PROXY OR CDN.
YOU SHOULD AVOID STORING PERSONALIZED DATA.

55. TIME TO LIVE
THE AMOUNT OF SECONDS AN OBJECT IS
CONSIDERED FRESH.

56. FRESH CONTENT
CACHED OBJECT HASN'T EXPIRED YET.
RESPONSE CAN BE REUSED FOR SUBSEQUENT
REQUESTS.

57. STALE CONTENT
EXPIRED CONTENT THAT SHOULD BE REVALIDATED
BEFORE SERVING. IS NOT DIRECTLY REMOVED FROM
THE CACHE.

58. REVALIDATE CONTENT
ASK THE ORIGIN SERVER IF THE REQUESTED OBJECT
IS STILL FRESH.

59. CACHE-CONTROL RESPONSE DIRECTIVES
✓ PRIVATE
✓ PUBLIC
✓ IMMUTABLE
✓ MAX-AGE
✓ S-MAXAGE
✓ NO-CACHE
✓ NO-STORE
✓ NO-TRANSFORM
✓ MUST-REVALIDATE
✓ PROXY-REVALIDATE
✓ MUST-UNDERSTAND
✓ STALE-WHILE-REVALIDATE
✓ STALE-IF-ERROR

60. Cache-Control: public

61. Cache-Control: public
CACHING ALLOWED, BOTH BY PRIVATE & SHARED CACHES

62. Cache-Control: public
CACHING ALLOWED, BOTH BY PRIVATE & SHARED CACHES
PROXY
SERVERS
BROWSER

63. USER PROXY SERVER
PUBLIC
CACHE
PRIVATE
CACHE

64. Cache-Control: private

65. Cache-Control: private
CACHING ALLOWED, BUT ONLY BY PRIVATE CACHES

66. Cache-Control: private=Set-Cookie

67. Cache-Control: private=Set-Cookie
CACHING ALLOWED BY ALL CACHES, UNLESS A SET-COOKIE
HEADER IS SET. THEN THE RESPONSE IS ONLY HANDLED BY
PRIVATE CACHES

68. Cache-Control: public, max-age=100

69. Cache-Control: public, max-age=100
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 100 SECONDS.

70. Cache-Control: private, max-age=100

71. Cache-Control: private, max-age=100
ONLY PRIVATE CACHES ALLOWED.
CONTENT IS FRESH FOR 100 SECONDS.

72. Cache-Control: public, s-maxage=100

73. Cache-Control: public, s-maxage=100
ALL CACHES ALLOWED.
CONTENT IN SHARED CACHES IS FRESH FOR 100 SECONDS.

74. Cache-Control: public, max-age=60, s-maxage=100

75. Cache-Control: public, max-age=60, s-maxage=100
ALL CACHES ALLOWED.
CONTENT IN PRIVATE CACHES IS FRESH FOR 60 SECONDS.
CONTENT IN SHARED CACHES IS FRESH FOR 100 SECONDS.

76. Cache-Control: public, max-age=60
Age: 40
AGE HEADER DESCRIBES THE TIME IN SECONDS
THE OBJECT WAS IN A PROXY CACHE.

77. Remaining TTL = TTL - Age

78. REVALIDATION

79. USER PROXY ORIGIN
IS THE
CONTENT STILL
FRESH?

80. PROXY ORIGIN
GET / HTTP/1.1
HTTP/1.1 200 OK

81. CONDITIONAL REQUESTS

82. HTTP/1.1 304 Not Modified

83. CONDITIONAL REQUESTS
HTTP/1.1 200 OK
Host: localhost
Etag: 7c9d70604c6061da9bb9377d3f00eb27
Content-type: text/html; charset=UTF-8
Hello world output
GET / HTTP/1.1
Host: localhost

84. CONDITIONAL REQUESTS
HTTP/1.1 304 Not Modified
Host: localhost
Etag: 7c9d70604c6061da9bb9377d3f00eb27
GET / HTTP/1.1
Host: localhost
If-None-Match: 7c9d70604c6061da9bb9377d3f00eb27

85. CONDITIONAL REQUESTS
HTTP/1.1 200 OK
Host: localhost
Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT
Content-type: text/html; charset=UTF-8
Hello world output
GET / HTTP/1.1
Host: localhost

86. CONDITIONAL REQUESTS
HTTP/1.1 304 Not Modified
Host: localhost
Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT
GET / HTTP/1.1
Host: localhost
If-Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT

87. VALIDATE
QUICKLY

88. EARLY

89. STORE &
RETRIEVE
ETAG

90. ASYNCHRONOUS
REVALIDATION

91. USER PROXY ORIGIN
ASYNC FETCH
SEND STALE
RESPONSE WHILE
FETCHING

92. Cache-Control: public, max-age=3600, stale-
while-revalidate=100

93. Cache-Control: public, max-age=3600, stale-
while-revalidate=100
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 HOUR.
STALE CONTENT CAN BE SERVED UP TO 100 SECONDS PAST
THE TTL WHILE DOING AN ASYNCHRONOUS REVALIDATION.

94. USER PROXY ORIGIN
FETCH FAILED
SEND STALE
RESPONSE WHILE
FETCHING FAILS

95. Cache-Control: public, max-age=3600, stale-
if-error=86400

96. Cache-Control: public, max-age=3600, stale-
if-error=86400
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 HOUR.
STALE CONTENT CAN BE SERVED UP TO 1 DAY PAST THE TTL
WHILE THE ORIGIN IS UNREACHABLE.

97. Fresh = TTL > 0
Async revalidation = TTL + stale > 0
Synchronous revalidation = TTL + stale <= 0

98. Fresh = TTL > 0
Async revalidation = TTL + stale > 0
Synchronous revalidation = TTL + stale <= 0
REVALIDATION
CAN BE DONE
CONDITIONALLY

99. Cache-Control: public, max-age=3600, must-revalidate

100. Cache-Control: public, max-age=3600, must-revalidate
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 HOUR.
SERVING STALE CONTENT NOT ALLOWED.

101. Cache-Control: public, max-age=3600, proxy-revalidate

102. Cache-Control: public, max-age=3600, proxy-revalidate
SAME AS MUST-
REVALIDATE BUT FOR
PROXY SERVERS

103. Cache-Control: public, max-age=86400, immutable

104. Cache-Control: public, max-age=86400, immutable
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 DAY.
CONTENT WILL NOT BE UPDATED WHILE FRESH

105. Cache-Control: public, max-age=86400, immutable
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 HOUR.
CONTENT WILL NOT BE UPDATED WHILE FRESH
USEFUL FOR
BROWSER CACHING

106. Cache-Control: public, immutable
DATA IS
IMMUTABLE, ASSUME
HIGH TTL IN PROXY
CONTEXT

107. Cache-Control: public, max-age=3600, no-transform

108. Cache-Control: public, max-age=3600, no-transform
ALL CACHES ALLOWED.
CONTENT IS FRESH FOR 1 HOUR.
CONTENT CANNOT BE TRANSFORMED
BY INTERMEDIARY CACHES

109. Cache-Control: public, max-age=3600, no-transform
EDGE COMPUTE

110. Cache-Control: no-cache

111. Cache-Control: no-cache
STORE OBJECT IN CACHE
BUT REVALIDATE BEFORE EVERY REUSE

112. Cache-Control: no-cache=Set-Cookie
STORE OBJECT IN CACHE
BUT REVALIDATE BEFORE EVERY REUSE
IF THE SET-COOKIE HEADER IS SET

113. Cache-Control: no-store

114. Cache-Control: no-store
DON'T STORE OBJECT IN THE CACHE

115. Cache-Control: private, no-cache, no-store
TYPICAL ONE

116. CACHE VARIATIONS

117. Vary: Accept-Language

118. ‣ http://test.com/
-Accept-Language: fr
-Accept-Language: nl
-Accept-Language: en
GET / HTTP/1.1
Host: test.com
Accept-Language: fr
GET / HTTP/1.1
Host: test.com
Accept-Language: en

119. Vary: Accept-Encoding, Accept-Language,
X-Forwarded-Proto

120. SURROGATES

121. THE EDGE

122. CONTENT
DELIVERY
NETWORK

123. USER EDGE ORIGIN
THE EDGE IS NO LONGER IN THE ORIGIN DATA CENTER

124. USER EDGE ORIGIN
THE EDGE MOVES CLOSER TO THE END USER

125. USER EDGE ORIGIN
MULTIPLE EDGES
USER EDGE

126. Surrogate-Control: max-age=300

127. Surrogate-Control: max-age=300+100

128. Surrogate-Control: max-age=300+100
STALENESS

129. Surrogate-Control: no-store

130. Surrogate-Control: no-store-remote,
max-age=3600

131. SURROGATE CAPABILITY

132. Surrogate-Capability: key="ESI/1.0"

133. Surrogate-Control: content="ESI/1.0"

134. Surrogate-Capability: varnish="ESI/1.0"

135. Surrogate-Control: max-age=60, max-
age=86400;varnish, max-age=3600;cdn,
content="ESI/1.0";varnish

137. PERSONAL
DATA

138. SEPARATE
HTTP REQUEST

139. AJAX

140. EDGE-SIDE INCLUDES ESI

141. <esi:include src="/header" />

142. ESI
✓ PLACEHOLDER
✓ PARSED BY EDGE CACHE (VARNISH)
✓ OUTPUT IS A COMPOSITION OF BLOCKS
✓ STATE PER BLOCK
✓ TTL PER BLOCK

143. EDGE Surrogate-Capability: key="ESI/1.0"
Surrogate-Control: content="ESI/1.0"
<esi:include src="/header" />
ORIGIN
Parse ESI placeholders
EDGE

144. <!DOCTYPE html>
<html>
<body>
<esi:include src="/header" />
<p>Welcome</p>
</body>
</html>

145. <!DOCTYPE html>
<html>
<body>
<p>The current time is 21:07:53.</p>
<p>Welcome</p>
</body>
</html>

146. THIS IS JUST THE TIP OF THE ICEBERG

147. EVERY
IMPLEMENTATION
HAS ITS OWN
CACHE POLICY
CONFIGURATION
REMEMBER
THIS ONE?

148. VARNISH CONFIGURATION LANGUAGE

150. HTTPS://VARNISH-SOFTWARE.COM/DEVELOPERS