Tweet
Tweet

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

webpagetest.org Loading resources is complicated Better browser support gives developers more control, better tools (like webpagetest) offer better monitoring.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

HTTP Archive, April 2017

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

> 2.39MB 3.45MB

Slide 8

Slide 8 text

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

Slide 9

Slide 9 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 10

Slide 10 text

Connections can be expensive

Slide 11

Slide 11 text

TCP + TLS handshake (3-4 round-trips) “High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

Slide 12

Slide 12 text

Denver (DEN) Stockholm (BMA) 7,800km Theoretical best RTT: 90ms Practical RTT: 146ms

Slide 13

Slide 13 text

HTTP/1.0 dogs.html dogs.html GET dogs.html dog1.gif dog1.gif GET dog1.gif dog2.gif dog2.gif GET dog2.gif dog1.gif Session 1 Session 2 Session 3

Slide 14

Slide 14 text

HTTP/1.1 dogs.html dogs.html GET dogs.html dog1.gif dog1.gif GET dog1.gif dog2.gif dog2.gif GET dog2.gif dog1.gif Session 1

Slide 15

Slide 15 text

HTTP/2 dogs.html dogs.html GET dogs.html dog1.gif dog1.gif dog2.gif dog2.gif dog1.gif

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• You can’t make light go faster – TLS+TCP setup requires 3-4 round trips – Get closer to the users • You can’t optimise across multiple origins – Even as HTTP improves, you will still need separate connections to each origin – Use a smaller number of origins • Requests are getting cheaper – Don’t worry so much about number of requests Bottom line

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Caching modern, progressive web apps

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

pwa.fastlydemo.net

Slide 24

Slide 24 text

Multiple caches Browser HTTP cache Fastly Origin server

Slide 25

Slide 25 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 26

Slide 26 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 27

Slide 27 text

Cache miss after purging

Slide 28

Slide 28 text

Serve stale (while revalidate) Users Soft purge Edge Server 400req/s for the home page One request goes to origin. The rest are held at the edge. Future requests served from fresh cache After expiry, requests still get fast cached response Asynchronous fetch to refresh the cache Cache repopulated Does not wait for origin response!

Slide 29

Slide 29 text

Purging when things happen Did not wait for origin response!

Slide 30

Slide 30 text

Serve stale (on error from origin) Users Purge 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 Fall back to stale content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Origin down, still working...

Slide 33

Slide 33 text

Cutting-edge web networking with Streams

Slide 34

Slide 34 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 35

Slide 35 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 36

Slide 36 text

No header template! Header + footer In SW cache

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Multiple caches Browser HTTP cache Fastly Origin server

Slide 39

Slide 39 text

Multiple caches (more honest edition) Browser tab Image cache Fastly Origin server Preload cache Service worker HTTP cache HTTP/2 push cache https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/ Heuristically managed JavaScript API!

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

“This site has been updated in the background”

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 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 46

Slide 46 text

Assert behaviours for peak performance with Feature policy COMING SOON

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

• More objects, smaller objects, fewer origins • Less bundling • Smarter caching • Serve stale (while-revalidating, and if-error) In summary... • More purging • More varying • ServiceWorker and Silent push • Origin policy and feature policy

Slide 50

Slide 50 text

Thanks for listening I am Get the slides: Andrew Betts @triblondon [email protected] fastly.us/altitude-potn

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

One object, many variations with the Vary header

Slide 53

Slide 53 text

Accept-Language around the world Washington DC Frankfurt Tokyo 1 en-us en-US,en;q=0.8 ja-jp 2 en-US,en;q=0.8 it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4 ja-JP,en-US;q=0.8 3 en-US en-us ja-JP 4 en-US,en;q=0.5 it-it ja-JP,ja;q=0.8,en-US;q=0.6,en;q=0.4 5 en tr-tr ja,en-US;q=0.8,en;q=0.6 6 pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 ru ja 7 en_US tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4 8 es-ES,es;q=0.8 pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR 9 en,* ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 en-us 10 en-US;q=1 de-de ko-KR,en-US;q=0.8 + over 5000 total variations

Slide 54

Slide 54 text

Normalise for vary (5000 -> 6) Washington DC Frankfurt Tokyo 1 en (84%) en (60%) jp (74%) 2 es (7%) es (18%) en (23%) 3 pt (6%) de (12%) es (3%) 4 jp (2%) fr (7%) 5 fr (1%) pt (2%) 6 jp (1%) https://docs.fastly.com/guides/vcl/accept-language%20header-vcl-features accept.language_lookup("en:de:fr:pt:es:jp", "en", req.http.Accept-Language);