cache rules everything - Speaker Deck

Slide 1

Slide 1 text

cache rules everything

Slide 2

Slide 2 text

hi, i’m harry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

the best request is   the one that’s never made

Slide 5

Slide 5 text

key concepts

Slide 6

Slide 6 text

caching and revalidation

Slide 7

Slide 7 text

caching: how long can i reuse this file without checking for updates?

Slide 8

Slide 8 text

caching: how long can i reuse this file without checking for updates?

Slide 9

Slide 9 text

revalidation: how do i check that a file has changed after my cache time limit is up?

Slide 10

Slide 10 text

revalidation: how do i check that a file has changed after my cache time limit is up?

Slide 11

Slide 11 text

caching is a way of stopping the client speaking to the server…

Slide 12

Slide 12 text

…so revalidation shouldn’t   happen while a file is cached

Slide 13

Slide 13 text

fresh and stale

Slide 14

Slide 14 text

fresh: file is in cache and   within its expiry date

Slide 15

Slide 15 text

stale: file is in cache but has   passed its expiry date

Slide 16

Slide 16 text

fresh != most up-to-date

Slide 17

Slide 17 text

request and response

Slide 18

Slide 18 text

> request response 1 2

Slide 19

Slide 19 text

200 and 304 responses

Slide 20

Slide 20 text

200: yep, i fetched a full response

Slide 21

Slide 21 text

> request 200 response 1 2

Slide 22

Slide 22 text

> request 200 response 1 2

Slide 23

Slide 23 text

304: i checked, and you can   reuse the old response

Slide 24

Slide 24 text

> conditional request 304 response 1 2 3

Slide 25

Slide 25 text

headers we don’t need

Slide 26

Slide 26 text

pragma

Slide 27

Slide 27 text

pragma: no-cache

Slide 28

Slide 28 text

pragma a caching header… sort of never meant to be used as a response header at all! should not be used

Slide 29

Slide 29 text

“pragma is not specified for http responses and is therefore not a reliable replacement for the general http/1.1 cache-control header.” — csswz.it/45ZBCV7

Slide 30

Slide 30 text

expires

Slide 31

Slide 31 text

expires: mon, 1 jan 2024 00:00:00 gmt

Slide 32

Slide 32 text

expires a caching header not really harmful, just cache-control is better cache-control has been preferred since january 1997 expire at an absolute time fails if a user has changed their system time can quickly turns fi les completely uncacheable

Slide 33

Slide 33 text

“if there is a cache-control header with the max-age or s-maxage directive in the response, the expires header is ignored.” — csswz.it/3EMHipn

Slide 34

Slide 34 text

expires cache-control

Slide 35

Slide 35 text

last-modified

Slide 36

Slide 36 text

last-modified: mon, 1 jan 2024 00:00:00 gmt

Slide 37

Slide 37 text

last-modified a revalidation header not really harmful, just etag is better date-of-creation is a proxy for change-of-content

Slide 38

Slide 38 text

headers we do need

Slide 39

Slide 39 text

cache-control

Slide 40

Slide 40 text

cache-control: private, max-age=300, must-revalidate

Slide 41

Slide 41 text

cache-control a caching header the rules and conditions for caching a response superseded expires in 1997 extensible

Slide 42

Slide 42 text

etag

Slide 43

Slide 43 text

etag: W/"680c753b-b8b"

Slide 44

Slide 44 text

etag: "8ca7aa679f9065d2017a57244e5068408"

Slide 45

Slide 45 text

etag a revalidation header weak or strong etags a hash of the cached response to compare to the remote version slightly more reliable than last-modified

Slide 46

Slide 46 text

caching

Slide 47

Slide 47 text

yes no cache-control: max-age=3600 cache-control: no-store can this response be cached at all?

Slide 48

Slide 48 text

max-age

Slide 49

Slide 49 text

max-age how long for, in seconds? relative, whereas expires is absolute relative to the moment it entered cache give very careful consideration to these values everything in this slide-deck is an example—do not just copy/paste

Slide 50

Slide 50 text

no-store

Slide 51

Slide 51 text

no-store no cache at all may store this response

Slide 52

Slide 52 text

cache-control: no-cache, no-store, must-revalidate

Slide 53

Slide 53 text

cache-control: no-cache, no-store, must-revalidate

Slide 54

Slide 54 text

yes no cache-control: no-cache cache-control: max-age=3600 does this response always have to be perfectly up-to-date?

Slide 55

Slide 55 text

no-cache

Slide 56

Slide 56 text

> request 200 response 2 1 FORBIDDEN

Slide 57

Slide 57 text

no-cache forbids the browser from going straight to the cache always makes a trip to the server always incurs a round-trip of latency negligible performance bene fi t unless the fi le was quite large

Slide 58

Slide 58 text

yes no cache-control: public, max-age=3600 cache-control: private, max-age=3600 can this response be shared?

Slide 59

Slide 59 text

yes no cache-control: public, max-age=3600 cache-control: private, max-age=3600 can this response be shared?

Slide 60

Slide 60 text

public do you want many people to have access to the same fi le? e.g. all users need the same style.css exposes cacheability to cdns implied by the presence of max-age, so actually redundant comes with side-e ff ects, so usually best avoided

Slide 61

Slide 61 text

> public > > > >

Slide 62

Slide 62 text

> public > > > >

Slide 63

Slide 63 text

> public > > > >

Slide 64

Slide 64 text

> public > > > >

Slide 65

Slide 65 text

> public > > > >

Slide 66

Slide 66 text

private only the requesting client may store the response prevents personalised responses being sent to other visitors not a replacement for or alternative to no-store

Slide 67

Slide 67 text

private > > > >

Slide 68

Slide 68 text

private > > > >

Slide 69

Slide 69 text

> private > > >

Slide 70

Slide 70 text

> private > > >

Slide 71

Slide 71 text

> private > > >

Slide 72

Slide 72 text

> private > > >

Slide 73

Slide 73 text

> private > > >

Slide 74

Slide 74 text

yes no cache-control: max-age=3600 cache-control: max-age=3600,   must-revalidate can we reuse this response for of fl ine users even if it’s stale?

Slide 75

Slide 75 text

must-revalidate

Slide 76

Slide 76 text

must-revalidate caches are permitted to serve stale content unless explicitly told otherwise e.g. when a browser is o ff l ine must-revalidate prohibits this behaviour leave it o ff of anything that might be useful o ffl ine, even if stale e.g. non-live train timetable, blog-post add to things that might lie to people if out of date e.g. live train timetable

Slide 77

Slide 77 text

“http allows caches to reuse stale responses when they are disconnected from the origin server. must-revalidate is a way to prevent this from happening…” — csswz.it/48pKjtf

Slide 78

Slide 78 text

yes no cache-control: max-age=3600,   stale-while-revalidate=600 cache-control: max-age=3600 can we tolerate a slightly out- of-date response while we perform revalidation?

Slide 79

Slide 79 text

stale-while-revalidate

Slide 80

Slide 80 text

stale-while-revalidate revalidation is synchronous; users see nothing until revalidation is complete can we get away with showing the old response to fi ll that gap? e.g. decorative image in a blog post

Slide 81

Slide 81 text

> conditional request in the background 200 or 304 response in the background 200 response 2 3 1

Slide 82

Slide 82 text

yes no cache-control: max-age=3600,   s-maxage=86400 cache-control: max-age=3600 do we need to con fi gure cdns and browsers differently?

Slide 83

Slide 83 text

s-maxage

Slide 84

Slide 84 text

s-maxage why would you con fi gure shared and private caches di ff erently?

Slide 85

Slide 85 text

cache-busting is a myth

Slide 86

Slide 86 text

s-maxage why would you con fi gure shared and private caches di ff erently? you can’t empty your user’s cache, but you can empty your cdn’s set private cache to one hour and cdn cache to one day can clear cdn cache when you deploy users have maximum one-hour-old responses without having to come all the way back to origin

Slide 87

Slide 87 text

s-maxage daily (or on demand) hourly

Slide 88

Slide 88 text

yes no cache-control: max-age=2147483648, immutable cache-control: max-age=604800 is the fi le hashed, e.g. app.1ef702.js?

Slide 89

Slide 89 text

immutable

Slide 90

Slide 90 text

immutable make a ‘contract’ with the browser fi ngerprinted fi les cease to exist when they’re ‘changed’ we get a whole new fi le therefore, we can cache this fi le forever, and never need to revalidate it how long is forever?

Slide 91

Slide 91 text

2,147,483,648 01111111111111111111111111111111

Slide 92

Slide 92 text

revalidation

Slide 93

Slide 93 text

interestingly, technically, we don’t actually need revalidation

Slide 94

Slide 94 text

we could just always fetch the whole response without checking if we actually needed to…

Slide 95

Slide 95 text

…but let’s not risk being wasteful

Slide 96

Slide 96 text

last- modified vs etag

Slide 97

Slide 97 text

both cause the browser to   emit conditional requests   once max-age has been met

Slide 98

Slide 98 text

> conditional request if (200 response) if (304 response) > 1 2 2

Slide 99

Slide 99 text

conditional requests

Slide 100

Slide 100 text

if-none-match: "8ca7aa679f9065d2017a57244e5068408"

Slide 101

Slide 101 text

if-modified-since: mon, 1 jan 2024 00:00:00 gmt

Slide 102

Slide 102 text

true: 200—here's your new response

Slide 103

Slide 103 text

false: 304—please keep using the cached response

Slide 104

Slide 104 text

prefer etag

Slide 105

Slide 105 text

prefer etag last-modified changes whenever a fi le is written, even if its contents don’t etag only changes if the fi le actually changes avoids false-positives and wasteful 200 responses

Slide 106

Slide 106 text

harryroberts in ~/cache-rules-everything on (main) » echo 'hello world' > revalidation » stat revalidation   ... sep 20 18:37:50 2023 » md5 revalidation   6f5902ac237024bdd0c176cb93063dc4 » echo 'hello world' > revalidation » stat revalidation   ... sep 20 18:39:23 2023 » md5 revalidation   6f5902ac237024bdd0c176cb93063dc4 same di ff erent

Slide 107

Slide 107 text

don’t revalidate hashed responses

Slide 108

Slide 108 text

because hashed files never change, there’s no need to revalidate them

Slide 109

Slide 109 text

what have we learned?

Slide 110

Slide 110 text

we shouldn’t expect to be able to fetch new content while a response is cached

Slide 111

Slide 111 text

we only have two jobs;   we only need two headers

Slide 112

Slide 112 text

cache-control: max-age=3600, must-revalidate etag: "edb18ab13566626184c376bc5ee2ea27"

Slide 113

Slide 113 text

expires (caching) and last-modified (revalidation) aren’t bad…

Slide 114

Slide 114 text

…but cache-control (caching) and etag (revalidation) are better

Slide 115

Slide 115 text

files that never change never   need to be revalidated

Slide 116

Slide 116 text

handy cheatsheets

Slide 117

Slide 117 text

weeks days hours minutes short medium long forever never

Slide 118

Slide 118 text

weeks days hours minutes short medium long forever never /my-account /news /store-locator /assets/product.jpg /assets/app.2efc38.ccs

Slide 119

Slide 119 text

cache-control versioned   assets non-versioned   assets immutable maximum expiry   (68 years) more granular   cache-control   directives etag

Slide 120

Slide 120 text

thank you for your time

Slide 121

Slide 121 text

further reading cache-control for civilians (harry roberts): csswz.it/3rvpFYb caching header best practices (simon hearne): csswz.it/45anbMy the headers we don’t want (andrew betts): csswz.it/46sqWOH

Slide 122

Slide 122 text

harry.is/for-hire