cache rules everything

Transcript

1. cache rules
   everything
   

   View Slide

2. hi, i’m harry
   

   View Slide

3. View Slide

4. the best request is
   

   the one that’s never made
   

   View Slide

5. key
   concepts
   

   View Slide

6. caching and
   revalidation
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. …so revalidation shouldn’t
    

    happen while a file is cached
    

    View Slide

13. fresh and
    stale
    

    View Slide

14. fresh: file is in cache and
    

    within its expiry date
    

    View Slide

15. stale: file is in cache but has
    

    passed its expiry date
    

    View Slide

16. fresh != most up-to-date
    

    View Slide

17. request and
    response
    

    View Slide

18. >
    request
    response
    1
    2
    

    View Slide

19. 200 and 304
    responses
    

    View Slide

20. 200: yep, i fetched a full response
    

    View Slide

21. >
    request
    200 response
    1
    2
    

    View Slide

22. >
    request
    200 response
    1
    2
    

    View Slide

23. 304: i checked, and you can
    

    reuse the old response
    

    View Slide

24. >
    conditional request
    304 response
    1
    2
    3
    

    View Slide

25. headers
    
    
    we don’t
    need
    

    View Slide

26. pragma
    

    View Slide

27. pragma: no-cache
    

    View Slide

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

    View Slide

29. “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
    

    View Slide

30. expires
    

    View Slide

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

    View Slide

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

    View Slide

33. “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
    

    View Slide

34. expires
    cache-control
    

    View Slide

35. last-modified
    

    View Slide

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

    View Slide

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

    View Slide

38. headers
    
    
    we do
    
    
    need
    

    View Slide

39. cache-control
    

    View Slide

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

    View Slide

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

    View Slide

42. etag
    

    View Slide

43. etag: W/"680c753b-b8b"
    

    View Slide

44. etag: "8ca7aa679f9065d2017a57244e5068408"
    

    View Slide

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

    View Slide

46. caching
    

    View Slide

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

    View Slide

48. max-age
    

    View Slide

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

    View Slide

50. no-store
    

    View Slide

51. no-store
    no cache at all may store this response
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. no-cache
    

    View Slide

56. >
    request
    200 response
    2
    1
    FORBIDDEN
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. >
    public
    >
    >
    >
    >
    

    View Slide

62. >
    public
    >
    >
    >
    >
    

    View Slide

63. >
    public
    >
    >
    >
    >
    

    View Slide

64. >
    public
    >
    >
    >
    >
    

    View Slide

65. >
    public
    > >
    >
    >
    

    View Slide

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

    View Slide

67. private
    >
    >
    >
    >
    

    View Slide

68. private
    >
    >
    >
    >
    

    View Slide

69. >
    private
    >
    >
    >
    

    View Slide

70. >
    private
    >
    >
    >
    

    View Slide

71. >
    private
    >
    >
    >
    

    View Slide

72. >
    private
    >
    >
    >
    

    View Slide

73. >
    private
    > >
    >
    

    View Slide

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

    View Slide

75. must-revalidate
    

    View Slide

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

    View Slide

77. “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
    

    View Slide

78. 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?
    

    View Slide

79. stale-while-revalidate
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. s-maxage
    

    View Slide

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

    View Slide

85. cache-busting is a myth
    

    View Slide

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

    View Slide

87. s-maxage
    daily (or on demand)
    hourly
    

    View Slide

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

    View Slide

89. immutable
    

    View Slide

90. 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?
    

    View Slide

91. 2,147,483,648
    01111111111111111111111111111111
    

    View Slide

92. revalidation
    

    View Slide

93. interestingly, technically, we don’t
    actually need revalidation
    

    View Slide

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

    View Slide

95. …but let’s not risk being wasteful
    

    View Slide

96. last-
    modified vs
    etag
    

    View Slide

97. both cause the browser to
    

    emit conditional requests
    

    once max-age has been met
    

    View Slide

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

    View Slide

99. conditional requests
    

    View Slide

100. if-none-match: "8ca7aa679f9065d2017a57244e5068408"
     

     View Slide

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

     View Slide

102. true: 200—here's your new response
     

     View Slide

103. false: 304—please keep using the
     cached response
     

     View Slide

104. prefer etag
     

     View Slide

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

     View Slide

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

     View Slide

107. don’t
     revalidate
     hashed
     responses
     

     View Slide

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

     View Slide

109. what have
     we learned?
     

     View Slide

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

     View Slide

111. we only have two jobs;
     

     we only need two headers
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

115. files that never change never
     

     need to be revalidated
     

     View Slide

116. handy
     cheatsheets
     

     View Slide

117. weeks
     days
     hours
     minutes
     short
     medium
     long
     forever
     never
     

     View Slide

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

     View Slide

119. cache-control
     versioned
     

     assets
     non-versioned
     

     assets
     immutable
     maximum expiry
     

     (68 years)
     more granular
     

     cache-control
     

     directives
     etag
     

     View Slide

120. thank you
     for your
     time
     

     View Slide

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

     View Slide

122. harry.is/for-hire
     

     View Slide