The power of the network

Slide 1

Slide 1 text

Andrew Betts Principal developer advocate | Fastly The power of the network

Slide 2

Slide 2 text

• Developer relations at Fastly • W3C Technical Architecture Group • Previously Financial Times, Nikkei Who is this guy?

Slide 3

Slide 3 text

• 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 text

Why does this matter?

Slide 5

Slide 5 text

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 text

No content

Slide 7

Slide 7 text

HTTP Archive, April 2017

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

> 2.39MB 3.45MB

Slide 11

Slide 11 text

https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017) 2.2% of daily income to load one webpage

Slide 12

Slide 12 text

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 text

What should we optimise?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• Global • Something about numbers • Blue • Planet sized space-faring RJ45 cables • Reflective The web is

Slide 18

Slide 18 text

First international WWW conf Geneva, Switzerland The conference information is accessible through telnet: www94.cern.ch

Slide 19

Slide 19 text

“Internet”

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 text

HTTP/1.0 (yes, technically there was also a 0.9)

Slide 23

Slide 23 text

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 About Us | Google … andrew in ~$ Look up IP address Get a page from that IP address

Slide 24

Slide 24 text

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 text

• Negotiate new connection for every request! • Each IP address can only host one website HTTP 1.0 problems

Slide 26

Slide 26 text

HTTP/1.1

Slide 27

Slide 27 text

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 Example Domain ... New! Say which website you wanted New! No hang-up, allows reusing connection

Slide 28

Slide 28 text

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 text

HTTP/1.1 + TLS

Slide 30

Slide 30 text

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 Example Domain ... www.bearfruit.org/2008/04/17/telnet-for-testing-ssl-https-websites/ Same as 1.1, but now encrypted.

Slide 31

Slide 31 text

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 text

TCP + TLS handshake “High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

Slide 33

Slide 33 text

• 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 text

HTTP/2

Slide 35

Slide 35 text

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 < ... simonecarletti.com/blog/2016/01/http2-curl-macosx/ Kinda looks the same? ¯\_(ツ)_/¯

Slide 36

Slide 36 text

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 text

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 text

No content

Slide 39

Slide 39 text

• 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 text

Closer termination: Dynamic site acceleration Denver user Edge (Denver) Server (Stockholm) Higher probability of existing connection

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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 text

Caching

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

pwa.fastlydemo.net An offline-capable news reading progressive web app with cache insights ServiceWorker required for stats

Slide 46

Slide 46 text

pwa.fastlydemo.net

Slide 47

Slide 47 text

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 text

Multiple caches Browser HTTP cache Fastly Origin server

Slide 49

Slide 49 text

• 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 on refresh

Slide 50

Slide 50 text

• 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 text

• 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 text

No content

Slide 53

Slide 53 text

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 text

Cache miss after purging

Slide 55

Slide 55 text

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 text

Serve stale (while revalidate) Did not wait for origin response!

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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 offline, refuses connection stale-while-reval expires SERVER DOWN! Server super-stale object from cache

Slide 59

Slide 59 text

Cache-control: max-age=31536000, stale-while-revalidate=3600, stale-if-error=604800 Serve stale (on error from origin)

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Origin down, still working...

Slide 62

Slide 62 text

Cutting-edge web networking with Streams

Slide 63

Slide 63 text

Before: Edge side includes index.html my-news.html Cache-control: max-age=86400 Cache-control: private Origin server Edge cache / CDN Browser

Slide 64

Slide 64 text

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 text

No header template! Header + footer In SW cache

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Link preload & HTTP/2 Push

Slide 69

Slide 69 text

Link: ;rel=preload;as=script Link rel=preload Determines priority & Accept mime type

Slide 70

Slide 70 text

Multiple caches Browser HTTP cache CDN Origin server

Slide 71

Slide 71 text

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 text

Preload -> Push User Edge Server Get page.html Browser sees Link preload header and fetches app.js Browser encounters 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 text

Link: ;rel=preload;as=script Preload, push, preload+push, nopush? PRELOADED, MAY BE PUSHED Link: ;rel=preload;as=script;nopush PRELOADED, NOT PUSHED Link: ;rel=preload;as=script;x-http2-push-only EITHER PRELOADED OR PUSHED BUT NOT BOTH (FASTLY ONLY)

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Coming soon... Warning: Begin furious hand-waving here.

Slide 76

Slide 76 text

Purge all the way to the browser with silent push COMING SOON

Slide 77

Slide 77 text

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 text

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 text

No content

Slide 80

Slide 80 text

“This site has been updated in the background”

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Purging when things happen (+ silent push) User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH

Slide 83

Slide 83 text

Clear the browser cache with the Clear Site Data API COMING SOON

Slide 84

Slide 84 text

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 text

Set headers for your whole site at once with Origin policy COMING SOONISH

Slide 86

Slide 86 text

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 text

Assert behaviours for peak performance with Feature policy COMING SOON

Slide 88

Slide 88 text

Does your page really need the Vibration API? They say I have to have a GIF

Slide 89

Slide 89 text

Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] } Feature policy HTTP header This page is not allowed to use vibration!

Slide 90

Slide 90 text

In summary...

Slide 91

Slide 91 text

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 text

Thanks for listening I am Get the slides: Andrew Betts @triblondon [email protected] fastly.us/potntalk Take our survey: fastly.us/2skOnXM