A Web Developer’s Guide to Browser Caching

Overview

Why is Caching Important?

How Browser Caching Works

Case 1: User has not visited the site before

Case 2: User has visited the site before

Show the Browser Cache

How Does the Browser Know What to Cache?

ETag

Cache-Control

Cache-Control: public
Cache-Control: private
Cache-Control: no-store
Cache-Control: no-cache
Cache-Control: max-age=60
Cache-Control: s-max-age=60
Cache-Control: must-revalidate

Expires

Expires: Wed, 25 Jul 2018 21:00:00 GMT

Last-Modified

Last-Modified: Mon, 12 Dec 2016 14:45:00 GMT

HTML Meta Tag

<meta http-equiv="Cache-control" content="no-cache">

HTTP Response

Accept-Ranges: bytes
Cache-Control: max-age=3600
Connection: Keep-Alive
Content-Length: 4361
Content-Type: image/png
Date: Tue, 25 Jul 2017 17:26:16 GMT
ETag: "1109-554221c5c8540"
Expires: Tue, 25 Jul 2017 18:26:16 GMT
Keep-Alive: timeout=5, max=93
Last-Modified: Wed, 12 Jul 2017 17:26:05 GMT
Server: Apache

Caching Pitfalls

Stale Files

<script src="assets/js/app.min.js">
Cache-Control: private, max-age=604800

Cache Busting

Versioning

assets/js/app-v2.min.js

Fingerprinting

assets/js/app-d41d8cd98f00b204e9800998ecf8427e.min.js

Append Query String

assets/js/app.min.js?version=2

Best Practices

Do

Don’t

FAQ

How can I tell if a file was loaded from cache?

How do I prevent caching for a file?

Cache-Control: no-cache, no-store, must-revalidate