The power of the network Andrew Betts Principal developer advocate - - PowerPoint PPT Presentation

▶
the power of the network
SMART_READER_LITE
LIVE PREVIEW

The power of the network Andrew Betts Principal developer advocate - - PowerPoint PPT Presentation

Jan 28, 2023 176 likes •1.1k views

The power of the network Andrew Betts Principal developer advocate | Fastly Who is this guy? Developer relations at Fastly W3C Technical Architecture Group Previously Financial Times, Nikkei Agenda today Why you should

slide-1
SLIDE 1

Andrew Betts

Principal developer advocate | Fastly

The power of the network

slide-2
SLIDE 2
  • Developer relations at

Fastly

  • W3C Technical

Architecture Group

  • Previously Financial Times,

Nikkei

Who is this guy?

slide-3
SLIDE 3
  • Why you should care about HTTP
  • The story of HTTP so far
  • Best practice caching
  • Wielding HTTP headers like a pro
  • Preparing for the future web

Agenda today

slide-4
SLIDE 4

Why does this matter?

slide-5
SLIDE 5

webpagetest.org

Complexity of resource loading is increasing Better browser support gives developers more control, better tools (like webpagetest) offer better monitoring.

slide-6
SLIDE 6
slide-7
SLIDE 7

HTTP Archive, April 2017

slide-8
SLIDE 8

https://mobiforge.com/research-analysis/the-web-is-doom

slide-9
SLIDE 9

http://www.pcworld.com/article/3060622

slide-10
SLIDE 10

>

2.39MB 3.45MB

slide-11
SLIDE 11

https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017)

2 . 2 %

  • f

d a i l y i n c

  • m

e t

  • l
  • a

d

  • n

e w e b p a g e

slide-12
SLIDE 12

Proliferation of third party tools on the page Ghostery regularly finds more than 50 third party scripts included on a single web page.

slide-13
SLIDE 13

What should we optimise?

slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
  • Global
  • Something about numbers
  • Blue
  • Planet sized space-faring RJ45 cables
  • Reflective

The web is

slide-18
SLIDE 18

First international WWW conf

Geneva, Switzerland

The conference information is accessible through telnet: www94.cern.ch

slide-19
SLIDE 19

“Internet”

slide-20
SLIDE 20

“High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

slide-21
SLIDE 21

OSI 7 layer network model

Application Presentation Session Transport Network Data link Physical HTTP TCP IP Ethernet / Wi-fi / 3G / Bluetooth Mostly makes sense Total voodoo

slide-22
SLIDE 22

HTTP/1.0

(yes, technically there was also a 0.9)

slide-23
SLIDE 23

HTTP/1.0

andrew in ~$ host google.com google.com has address 216.58.195.78 andrew in ~$ telnet 216.58.195.78 80 Connected to sfo07s16-in-f14.1e100.net. GET /about/ HTTP/1.0 200 OK Content-Type: text/html <html class=”google” lang=”en”> <head> <title>About Us | Google</title> … andrew in ~$

L

  • k

u p I P a d d r e s s Get a page from that IP address

slide-24
SLIDE 24

Hey DNS, where’s Google.com?

Browser

Try 216.58.195.78

DNS

Hey 216.58.195.78, can we talk?

Browser

Sure, go ahead

Google

GET /about/

Browser

Here you go. And we’re done. Bye!

Google

Hang on, this page has images on it. Can we talk again?

Browser

Sure, go ahead

Google

GET /images/logo.png

Browser

Here you go. And we’re done. Bye!

Google

slide-25
SLIDE 25
  • Negotiate new connection for every request!
  • Each IP address can only host one website

HTTP 1.0 problems

slide-26
SLIDE 26

HTTP/1.1

slide-27
SLIDE 27

HTTP/1.1

andrew in ~$ host example.com example.com has address 93.184.216.34 andrew in ~$ telnet 93.184.216.34 80 Connected to 93.184.216.34. GET / HTTP/1.1 Host: example.com HTTP/1.1 200 OK Cache-Control: max-age=604800 Content-Type: text/html Date: Wed, 10 May 2017 19:41:51 GMT Vary: Accept-Encoding Content-Length: 1270 <html> <head> <title>Example Domain</title> ...

N e w ! S a y w h i c h w e b s i t e y

  • u

w a n t e d New! No hang-up, allows reusing connection

slide-28
SLIDE 28

Hey DNS, where’s example.com?

Browser

Try 93.184.216.34

DNS

Hey 93.184.216.34, can we talk?

Browser

Sure, go ahead

IANA

GET /about/ from example.com

Browser

Here you go, and hey, I’ll stick around for a while

IANA

GET /images/logo.png from example.com

Browser

Here you go, and hey, I’ll stick around for a while

IANA

You haven’t said anything for a while, so I’m going to hang up

IANA

slide-29
SLIDE 29

HTTP/1.1 + TLS

slide-30
SLIDE 30

HTTP/1.1 + TLS

andrew in ~$ openssl s_client -connect 93.184.216.34:443 CONNECTED(00000003) depth=1 /C=US/O=DigiCert Inc/OU=www.digicert.com/CN=DigiCert New, TLSv1/SSLv3, Cipher is AES256-SHA

  • GET / HTTP/1.1

Host: example.com HTTP/1.1 200 OK Cache-Control: max-age=604800 Content-Type: text/html Date: Wed, 10 May 2017 20:54:23 GMT Vary: Accept-Encoding Content-Length: 1270 <html> <head> <title>Example Domain</title> ... www.bearfruit.org/2008/04/17/telnet-for-testing-ssl-https-websites/

S a m e a s 1 . 1 , b u t n

  • w

e n c r y p t e d .

slide-31
SLIDE 31

Hey DNS, where’s example.com?

Browser

Try 93.184.216.34

DNS

Hey 93.184.216.34, can we talk?

Browser

Sure, go ahead

IANA

Great, can we upgrade to TLS?

Browser

OK, this is my certificate

IANA

Here’s my key and we’ll use cipher A

Browser

Cipher A, got it

IANA

Here you go, and hey, I’ll stick around for a while

IANA

GET /about/ from example.com

Browser

Here you go, and hey, I’ll stick around for a while

IANA

GET /images/logo.png from example.com

Browser

slide-32
SLIDE 32

TCP + TLS handshake

“High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

slide-33
SLIDE 33
  • Reuse same connection for multiple requests to the same origin

– Sequentially, but you can open multiple connections (up to ~6) to do more than one request at a time (domain sharding)

  • Host more than one website per IP
  • TLS means negotiating a connection now takes even longer :-(

HTTP/1.1 + TLS

slide-34
SLIDE 34

HTTP/2

slide-35
SLIDE 35

HTTP/2.0

andrew in ~$ curl --http2 -v https://example.com/ * Trying 93.184.216.34... * Connected to example.com (93.184.216.34) port 443 (#0) * SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256 * Using HTTP2, server supports multi-use * Connection state changed (HTTP/2 confirmed) > GET / HTTP/2 > Host: example.com > < HTTP/2 200 < cache-control: max-age=604800 < content-type: text/html < date: Wed, 10 May 2017 20:54:23 GMT < vary: Accept-Encoding < content-length: 1270 < <html> <head> ... simonecarletti.com/blog/2016/01/http2-curl-macosx/

Kinda looks the same? ¯\_(ツ)_/¯

slide-36
SLIDE 36

Hey DNS, where’s example.com?

Browser

Try 93.184.216.34

DNS

Hey 93.184.216.34, can we talk?

Browser

Sure, go ahead

IANA

Great, can we upgrade to TLS?

Browser

OK, this is my certificate

IANA

Here’s my key and we’ll use cipher A

Browser

Cipher A, got it

IANA

OK, here’s api/prices and a bit more of video.mp4

IANA

GET /about/ from example.com

Browser

Here’s /about/, hey also here’s logo.png and the first part of video.mp4

IANA

GET /api/prices. Also, POST /api/login.

Browser

slide-37
SLIDE 37

HTTP/2.0

Req1 Pkt 1 Req2 Pkt 1 Req1 Pkt 1 Req2 Pkt 2 Req2 Pkt 3 Push Pkt 1 Req4 Pkt 1 Req3 Pkt 1 Req3 Pkt 2

slide-38
SLIDE 38
slide-39
SLIDE 39
  • Connections still expensive

– TLS+TCP setup requires 3-4 round trips – Can’t make light go any faster – Terminate connections close to the user – Reduce the number of origins you use

  • Requests are cheap

– HTTP2 is async, multiplexed, pushed

HTTP for the web today

slide-40
SLIDE 40

Closer termination: Dynamic site acceleration

Denver user Edge (Denver) Server (Stockholm) Higher probability of existing connection

slide-41
SLIDE 41

Dynamic site acceleration (shielded)

Denver user Edge 1 (Denver) Edge 2 (Europe) Always on, optimised, low latency connection Server (Stockholm)

slide-42
SLIDE 42

Use fewer origins

Connections remain expensive to set up. Use a routing layer to expose only one origin.

example.com In-house app Video provider Analytics provider

Cold start, short distance Always-on, long distance

slide-43
SLIDE 43

Caching

slide-44
SLIDE 44
slide-45
SLIDE 45

pwa.fastlydemo.net

An offline-capable news reading progressive web app with cache insights

ServiceWorker required for stats

slide-46
SLIDE 46

pwa.fastlydemo.net

slide-47
SLIDE 47

Types of object for caching

Static: Stuff that never changes JavaScript CSS Images Templates

/resources/style-v3.css

Dynamic: unique to a single user Inbox message list Shopping cart Preference values

/my/cart

Years private*

* Still benefits from DSA

Event driven: changes when things happen Articles Product lists Search results Stock prices

/api/getCurrentPrice

Years*

* If you can purge

slide-48
SLIDE 48

Multiple caches

Browser HTTP cache Fastly Origin server

slide-49
SLIDE 49
  • Never changes?

Cache-control: max-age=31536000, immutable

  • Unique response?

Cache-control: private, no-store

  • Changes when stuff happens?

Cache-Control: max-age=0, s-maxage=31536000

Good cache headers

Avoid revalidations

  • n refresh
slide-50
SLIDE 50
  • If it’s for a subresource:

– Don’t do it. Risk of functional incompatibility.

Hang on, how about, like, 10 minutes?

jakearchibald.com/2016/caching-best-practices/

HTML

Version 1, cached

JS

Version 2, live

CSS

Version 1, cached Maybe bang? + + =

slide-51
SLIDE 51
  • If it’s for a document:

– Hmmm, mayyyybbe, if you can’t purge, but risk of inconsistent content between pages – A year is better, purge it if it changes

Hang on, how about, like, 10 minutes?

jakearchibald.com/2016/caching-best-practices/

slide-52
SLIDE 52
slide-53
SLIDE 53

Purging when things happen

User Event: Comment posted Edge Server

Uncached, fetch from origin Hit! return “304 Not Modified” from Edge cache After purge, uncached again

PURGE

MISS...

slide-54
SLIDE 54

Cache miss after purging

slide-55
SLIDE 55

Serve stale (while revalidate)

Users max-age expires Edge Server

Many requests per second are flooding the edge servers Just one request goes to origin. The rest are held at the edge. All requests fulfilled Subsequent requests served from fresh cache After expiry, requests still get fast cached response Asynchronous fetch to refresh the cache Cache repopulated

slide-56
SLIDE 56

Serve stale (while revalidate)

Did not wait for

  • rigin response!
slide-57
SLIDE 57

Cache-control: max-age=31536000, stale-while-revalidate=3600

Serve stale (while revalidate)

slide-58
SLIDE 58

Serve stale (on error from origin)

Users max-age expires Edge Server

Requests flooding in Just one request goes to origin, populates cache at the edge Request after expiry causes fetch to origin Origin server is

  • ffline, refuses

connection

stale-while-reval expires

SERVER DOWN! Server super-stale

  • bject from cache
slide-59
SLIDE 59

Cache-control: max-age=31536000, stale-while-revalidate=3600, stale-if-error=604800

Serve stale (on error from origin)

slide-60
SLIDE 60
slide-61
SLIDE 61

Origin down, still working...

slide-62
SLIDE 62

Cutting-edge web networking with Streams

slide-63
SLIDE 63

Before: Edge side includes

<esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/>

index.html my-news.html Cache-control: max-age=86400 Cache-control: private

Origin server Edge cache / CDN Browser

slide-64
SLIDE 64

Now: Serviceworker & streams

/frags/header /home.frag

Server

/frags/footer / https://developers.google.com/web/updates/2016/06/sw-readablestreams

Browser

Cache/purge all these individually!

slide-65
SLIDE 65

No header template! Header + footer In SW cache

slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68

Link preload & HTTP/2 Push

slide-69
SLIDE 69

Link: </resources/js/app.js>;rel=preload;as=script

Link rel=preload

Determines priority & Accept mime type

slide-70
SLIDE 70

Multiple caches

Browser HTTP cache CDN Origin server

slide-71
SLIDE 71

Multiple caches (more)

Browser tab CDN Origin server Preload cache HTTP cache HTTP/2 push cache

Per page Per connection

https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

slide-72
SLIDE 72

Preload -> Push

User Edge Server

Get page.html Browser sees Link preload header and fetches app.js Browser encounters <script> tag, fetches app.js again

Preload cache Push cache

Server includes Link: preload header for app.js CDN pushes app.js along with response to page.html. JS goes into the push cache. app.js is pulled from push cache into the preload cache Preload cache wiped when user goes to another page

slide-73
SLIDE 73

Link: </resources/js/app.js>;rel=preload;as=script

Preload, push, preload+push, nopush?

PRELOADED, MAY BE PUSHED

Link: </resources/js/app.js>;rel=preload;as=script;nopush

PRELOADED, NOT PUSHED

Link: </resources/js/app.js>;rel=preload;as=script;x-http2-push-only

EITHER PRELOADED OR PUSHED BUT NOT BOTH (FASTLY ONLY)

slide-74
SLIDE 74
slide-75
SLIDE 75

Coming soon...

Warning: Begin furious hand-waving here.

slide-76
SLIDE 76

Purge all the way to the browser with silent push

COMING SOON

slide-77
SLIDE 77

Multiple caches (more)

Browser tab CDN Origin server Preload cache HTTP cache HTTP/2 push cache

Per page Per connection

https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

slide-78
SLIDE 78

Multiple caches (even more. Yup.)

Browser tab Image cache Fastly Origin server Preload cache Service worker HTTP cache HTTP/2 push cache

Per page Per origin (domain) Per connection

https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

slide-79
SLIDE 79
slide-80
SLIDE 80

“This site has been updated in the background”

slide-81
SLIDE 81
slide-82
SLIDE 82

Purging when things happen (+ silent push)

User Event: Comment posted Fastly Server

Uncached, fetch from origin

PURGE SILENT WEB PUSH

slide-83
SLIDE 83

Clear the browser cache with the Clear Site Data API

COMING SOON

slide-84
SLIDE 84

Clear-Site-Data: "cache", "cookies", "storage", "executionContexts"

Clear site data header

Kills active tabs Gets rid of stuff like ServiceWorkers and IndexedDB

slide-85
SLIDE 85

Set headers for your whole site at once with Origin policy

COMING SOONISH

slide-86
SLIDE 86

Origin policy - for shared metadata

Content-Security-Policy: HTTP-Strict-Transport-Security: X-Frame-Options: Referrer-Policy: Cache-Control: X-XSS-Protection: ... Content-Security-Policy: HTTP-Strict-Transport-Security: X-Frame-Options: Referrer-Policy: Cache-Control: X-XSS-Protection: ... Content-Security-Policy: HTTP-Strict-Transport-Security: X-Frame-Options: Referrer-Policy: Cache-Control: X-XSS-Protection: ...

/home /about /shop

/.well-known/origin-policy

https://wicg.github.io/origin-policy/

slide-87
SLIDE 87

Assert behaviours for peak performance with Feature policy

COMING SOON

slide-88
SLIDE 88

Does your page really need the Vibration API?

They say I have to have a GIF

slide-89
SLIDE 89

Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

Feature policy HTTP header

This page is not allowed to use vibration!

slide-90
SLIDE 90

In summary...

slide-91
SLIDE 91

1. More objects, smaller objects, fewer origins 2. Less bundling 3. Smarter caching 4. Serve stale (while-revalidating, and if-error) 5. Purge more 6. Understand how to use HTTP metadata

In summary...

slide-92
SLIDE 92

Thanks for listening

I am Get the slides: Andrew Betts @triblondon abetts@fastly.com fastly.us/potntalk Take our survey: fastly.us/2skOnXM