Cash

Cache

What is cache?

Temporarily storing data for retrieval

An analogy

What is 52496 / 16?

3281

Why use cache?

Faster response time

Saves computing power

Better user experience

Concepts

CDN

Cache-Control & E-tag

Service Worker

CDN

Content Delivery Networks

Cache data in other servers, reducing fetch time.

worldwide cdn network

Let others do the work for you.

cloudflare
Cloudflare
aws-cloudfront
AWS-cloudfront
akamai
Akamai

CDN

Disadvantages:
  • Only static content
  • Cost ranges from free to expensive
  • Reliability/Security up to CDN

Cache-Control

Specifying how long browser should cache in headers

cache control diagram

Browser automatically returns same file if max-age is still active

HTTP response


						HTTP/1.1 200 OK
						Server: GitHub.com
						Content-Type: text/css
						Cache-Control: max-age=600
					

Cache-Control

Disadvantages:
  • No way to refresh content before max-age

E-tag

A checksum for your data

e tag diagram

Browser checks with server if it has the latest version of the file

Scenario 1

Server: Oh hey, the e-tag's the same.
Server: Just use the one you have.
Result: Sends back 304: Not modified.

Scenario 2

Server: What a shame, the e-tag's outdated
Server: Here's the latest file.
Result: Sends back new file.

HTTP response


						HTTP/1.1 200 OK
						Server: GitHub.com
						Content-Type: text/css
						Cache-Control: max-age=600
						etag:W/"269550530cc127b6aa5a35925a7de6ce"
					

E-tag

Disadvantages:
  • Still a HTTP request needed
  • More complex to set up on server side

Set up Cache-Control and E-tag

apache
Apache
nginx
nginx

Service Worker: Cache API

No server? No problem

Programmatic API that enables more flexible caching strategies

Allows you to control when, what, how to cache

https://serviceworke.rs/

Service Workers

Disadvantages:
  • Complex to set up and maintain
  • Really new, only supported in Chrome/Firefox
  • Will probably never be implemented in iOS

Recap

CDN

Cache-Control & E-tag

Service Worker

cache photo

Start caching

Less cashing

PUMA

Audience
Front-end developers
Objective
Introduce and educate about caching
Topic
Caching
Punch
Who doesn't want cache?
WIIFY
Spend less and make your users happier
Key Points
  • Start caching your webpages
  • Cache-Control & ETag
  • CDN
  • Service Workers - Cache API
Call to action
Cache your webpages
Know
Many ways to go about caching
Believe
There is no loss in not doing caching
Do
Use caching