The slides for me "HTTP headers that make your website go faster" presentation at the November 2023 meetup of devs.gent. This presentation explains how you can leverage headers like Cache-Control, Vary, Etag, If-None-Match, Surrogate-Capability, Surrogate-Control and many others to control the behavior of an HTTP cache or CDN. See https://feryn.eu/speaking/http-headers-will-make-website-go-faster-devs-gent-23/ for more information.

2. 314

3. Slow websites
SUCK

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

5. SLOW~DOWN

9. THROWING
SERVERS
ATTHEPROBLEM

10. MO' MONEY
MO' SERVERS
MO' PROBLEMS

11. IDENTIFY SLOWEST PARTS

12. OPTIMIZE

13. AFTER A WHILE YOU HIT THE LIMITS

14. CACHING

15. HI, I'M THIJS

16. I'M THE TECH
EVANGELIST
AT

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

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

24. CACHING

25. WHY
CACHE

26. HIGHER
CONCURRENCY

27. HIGHER
THROUGHPUT

28. LOWER LATENCY

29. IMPROVE QUALITY OF EXPERIENCE

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

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

33. USER SERVER

34. USER SERVER
BROWSER CACHE

35. USER SERVER
SERVER CACHE

36. UNDER PRESSURE
SERVER

37. USER PROXY SERVER

38. USER PROXY SERVER
REVERSE
CACHING
PROXY

39. USER PROXY SERVER
THE EDGE

40. USER VARNISH SERVER
THE EDGE

41. USER VARNISH SERVER
THE ORIGIN

44. EVERY
IMPLEMENTATION
HAS ITS OWN
CACHE POLICY
CONFIGURATION

45. HTTP HAS CONVENTIONAL
BUILT-IN CACHING
MECHANISMS

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

47. LIMITED OPTIONS

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

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

50. KEY CACHING CONCEPTS

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

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

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

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

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

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

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

58. 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

59. Cache-Control: public

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

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

62. USER PROXY SERVER
PUBLIC
CACHE
PRIVATE
CACHE

63. Cache-Control: private

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

65. Cache-Control: private=Set-Cookie

66. 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

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

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

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

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

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

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

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

74. 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.

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

76. Remaining TTL = TTL - Age

77. REVALIDATION

78. USER PROXY ORIGIN
IS THE
CONTENT STILL
FRESH?

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

80. CONDITIONAL REQUESTS

81. HTTP/1.1 304 Not Modified

82. 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

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

84. 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

85. 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

86. VALIDATE
QUICKLY

87. EARLY

88. STORE &
RETRIEVE
ETAG

89. ASYNCHRONOUS
REVALIDATION

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

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

92. 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.

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

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

95. 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.

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

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

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

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

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

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

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

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

104. 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

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

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

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

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

109. Cache-Control: no-cache

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

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

112. Cache-Control: no-store

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

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

115. CACHE VARIATIONS

116. Vary: Accept-Language

117. ‣ 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

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

119. SURROGATES

120. THE EDGE

121. CONTENT
DELIVERY
NETWORK

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

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

124. USER EDGE ORIGIN
MULTIPLE EDGES
USER EDGE

125. Surrogate-Control: max-age=300

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

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

128. Surrogate-Control: no-store

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

130. SURROGATE CAPABILITY

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

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

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

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

136. PERSONAL
DATA

137. SEPARATE
HTTP REQUEST

138. AJAX

139. EDGE-SIDE INCLUDES ESI

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

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

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

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

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

145. THIS IS JUST THE TIP OF THE ICEBERG

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

147. VARNISH CONFIGURATION LANGUAGE

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