Take Control of Cache-Control

A presentation at Devtalks in June 2019 in Bucharest, Romania by Holger Bartel

Slide 1

Slide 2

Holger Bartel Designer/Developer Hong Kong Twitter: @foobartel

Slide 3

Slide 4

Fact A majority of the data on the internet is static and unlikely to change over time. Many of today’s web performance issues are related to images, fonts and video.

Slide 5

What is Cache?

Slide 6

Cache not Cash!

Slide 7

C n o i t a i c ) o e s H s C A A y C c ( n e a g v a r t e i r s e n o H r C o e f h T e r t n e Not!

Slide 8

Slide 9

Slide 10

Slide 11

Cache Is A Storage ✤ ✤ Store away in hiding or for future use. Helper memory enabling high-speed retrieval of data. https://en.oxforddictionaries.com/definition/cache

Slide 12

Origin Late 18th century: from French, from cacher ‘to hide’.

Slide 13

for ( i = 0; i < count( AllTheThings ); i++ ) { … }

Store a value in a variable for better performance.

Slide 14

let items = count( AllTheThings ); for ( i = 0; i < items; i++ ) { … }

Store a value in a variable for better performance.

Slide 15

Developers know caching best from $clients

Slide 16

F5! http://clearyourcache.com

Slide 17

Blame the Cache! http://www.commitstrip.com/en/2013/03/29/il-a-bon-dos-le-cache/

Slide 18

A good excuse ;) http://www.commitstrip.com/en/2013/03/29/il-a-bon-dos-le-cache/

Slide 19

The cache exists because of a basic assumption made by browser designers: The internet is slow.

Slide 20

Caching is a technique that stores a copy of a given resource and serves it back when requested.

Slide 21

Why Care?

Slide 22

The First Impression We always want to make a great first impression. A fast loading site does just that.

Slide 23

Photo: @helloanselm

Slide 24

The cache serves what you already have, as long as it’s fresh. Photo: @helloanselm

Slide 25

2ND Great Impression? How To Delight Our Users

Slide 26

WANTED ! CUSTOMER LOYALTY $$$ REWARD $$$ LOYAL USER == REPEAT VISITOR FOR ALL EXTRA PERFORMANCE BENEFITS

Slide 27

Average Bytes per Page by Content Type CSS 107Kb HTML 55Kb Images 2,076Kb Source Scripts 525Kb Fonts 137Kb Video 346Kb Other 10Kb Total 3272Kb

Slide 28

Cache Lifetime (Days) 100% 80% 60% 47% 40% 20% 0% Source 13% t=0 0 <= t <= 1 18% 17% 5% 1 <= t <= 30 30 <= t <= 365 t > 365

Slide 29

Cacheable Resources Over Last Year Over Last 6 Years

Slide 30

~50% of all traffic could be cached!

Slide 31

Global Internet Traffic ✤ ✤ 3.138.420 GB per Minute in 2018 Annual global IP traffic will reach 4.8 ZB per year by 2022

Slide 32

ZB (Zettabyte) 1 ZB Zettabyte = 1.099.511.627.776 GB

Slide 33

Responsible Design

Slide 34

Slide 35

Slide 36

Advantages ✤ ✤ Eases the load on the server; Improves performance, b/c it takes less time to transmit the resource.

Slide 37

How Does Caching Work?

Slide 38

Without Any Caching in Place All identical requests are going through to the server Source

Slide 39

Local (Private) Cache The first request of each client is going through to the server. Identical, subsequent requests are not even sent, but served by the local cache. Source

Slide 40

Shared Cache The first request of each client is going through to the server. Identical, subsequent requests are served by the shared cache. Source

Slide 41

Private Cache Shared Cache A private cache is dedicated to a single user. A shared cache can be reused by more than one user.

Slide 42

Empty Cache Primed Cache The browser makes the first request to the page. The browser has a cached version of the page.

Slide 43

Cache Hit Cache Miss A requested resource is found in cache. A resource is not found in cache and has to be fully requested from its origin.

Slide 44

Fresh Stale When a resource is fresh, it can be served from cache. A stale resource has expired and will not be served anymore.

Slide 45

Disk Cache Memory Cache Lifetime: Restart Lifetime: Render Process, Browser Tab Disk cache is RAM memory Fast! Located on the CPU chip Faster!

Slide 46

Slide 47

TIME It’s To Take Control

Slide 48

History of HTTP Protocol ✤ HTTP/0.9 – The one-line protocol ✤ HTTP/1.0 – Building extensibility ✤ HTTP/1.1 – The standardized protocol

Slide 49

Slide 50

Slide 51

Chrome DevTools

Slide 52

Headers

Slide 53

Pragma: no-cache Pragma is a HTTP/1.0 header and not a reliable replacement for the general HTTP/1.1 CacheControl header.

Slide 54

Expires: Fri, 30 Oct 2019 14:19:41 GMT The Expires header contains the date/time after which the response is considered stale.

Slide 55

If there is a Cache-Control header with the max-age or s-maxage directive in the response, the Expires header is ignored.

Slide 56

The Cache-Control HTTP/1.1 general-header field is used to specify directives for caching mechanisms in both requests and responses.

Slide 57

Cache-Control Directives Source

Slide 58

cache-control: public The response may be cached by any cache, even if the response would normally be non-cacheable.

Slide 59

cache-control: private The response is intended for a single user and must not be stored by a shared cache. A private cache may store the response.

Slide 60

cache-control: max-age=86400 Response can be cached by browser and any intermediary caches (“public”) for up to 1 day.

Slide 61

cache-control: private, max-age=600 Response can be cached by the client’s browser only for up to 10 minutes (60 seconds x 10 minutes).

Slide 62

cache-control: no-cache Forces the cache to validate the request before releasing a cached copy.

Slide 63

cache-control: no-store ✤ Response is not allowed to be cached ✤ Must be fetched in full on every request.

Slide 64

cache-control: max-age=0 A max-age of 0 equals no-store.

Slide 65

cache-control: s-maxage=<seconds> ✤ ✤ Takes precedence over max-age or the Expires header, but only applies to shared caches (e.g., proxies) ; Ignored by a private cache.

Slide 66

cache-control: no-transform No transformations or conversions should be made to the resource. The Content-Encoding, Content-Range, Content-Type headers must not be modified by a proxy.

Slide 67

cache-control: must-revalidate If a resource has become stale, a cache must not use the response without successful validation.

Slide 68

cache-control: immutable Indicates that the response body will not change over time.

Slide 69

Build Your Caching Strategy And An Invalidation Strategy

Slide 70

Cache Invalidation Terms ✤ Hashing ✤ Cachebusting ✤ Revving

Slide 71

Cachebusting Options ✤ /assets/css/styles.css?v1.2 ✤ /assets/16415ef98913c2bcb2c/default.css ✤ /assets/js/main.16415ef9891.js

Slide 72

Apache - .htaccess Header set Cache-Control “max-age=31536000, public”

Slide 73

Slide 74

PHP header()

<?php header(“Cache-Control: no-cache, must-revalidate”); header(“Cache-Control: Sat, 26 Jul 1997 05:00:00 GMT”); ?>

Slide 75

Nginx - configuration file location ~* .(js|css|png|jpg|jpeg|gif|ico)$ { add_header Cache-Control “public, no-transform”; }

Slide 76

Cache As Much As You Can

Slide 77

cache-control: public, max-age=31536000 ✤ ✤ For files that won’t change, you can add aggressive caching; Likely for images, CSS and JavaScript.

Slide 78

cache-control: public, immutable ✤ More aggressive; ✤ CSS and JavaScript; ✤ Don’t forget your invalidation strategy!

Slide 79

<FilesMatch “^(never-changing—icon.svg)$”> Header set Cache-Control “max-age=31536000, public, immutable” </FilesMatch>

Slide 80

Summary

Slide 81

✤ We can limit traffic and spare sending lots of bytes ✤ Reward your loyal repeat visitors ✤ Improve overall web performance

Slide 82

✤ Create your invalidation/cachebusting strategy ✤ Ensure that the server provides an ETag ✤ Which resources can be cached publicly or private? ✤ Determine the best cache lifetime for your resources ✤ How aggressively can you cache your assets?

Slide 83

Thank You! Visit foobartel.com or Twitter: @foobartel