Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The power of the network

The power of the network

Andrew Betts

June 03, 2017
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. • Developer relations at Fastly • W3C Technical Architecture Group

    • Previously Financial Times, Nikkei Who is this guy?
  2. • 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
  3. webpagetest.org Complexity of resource loading is increasing Better browser support

    gives developers more control, better tools (like webpagetest) offer better monitoring.
  4. Proliferation of third party tools on the page Ghostery regularly

    finds more than 50 third party scripts included on a single web page.
  5. • Global • Something about numbers • Blue • Planet

    sized space-faring RJ45 cables • Reflective The web is
  6. 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
  7. 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 ~$ Look up IP address Get a page from that IP address
  8. 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
  9. • Negotiate new connection for every request! • Each IP

    address can only host one website HTTP 1.0 problems
  10. 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> ... New! Say which website you wanted New! No hang-up, allows reusing connection
  11. 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
  12. 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/ Same as 1.1, but now encrypted.
  13. 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
  14. • 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
  15. 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? ¯\_(ツ)_/¯
  16. 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
  17. 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
  18. • 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
  19. Closer termination: Dynamic site acceleration Denver user Edge (Denver) Server

    (Stockholm) Higher probability of existing connection
  20. Dynamic site acceleration (shielded) Denver user Edge 1 (Denver) Edge

    2 (Europe) Always on, optimised, low latency connection Server (Stockholm)
  21. 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
  22. 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
  23. • 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
  24. • 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? + + =
  25. • 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/
  26. 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...
  27. 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
  28. 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
  29. 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/
  30. 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
  31. 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)
  32. 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/
  33. 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/
  34. Purging when things happen (+ silent push) User Event: Comment

    posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
  35. Clear-Site-Data: "cache", "cookies", "storage", "executionContexts" Clear site data header Kills

    active tabs Gets rid of stuff like ServiceWorkers and IndexedDB
  36. 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/
  37. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

    Feature policy HTTP header This page is not allowed to use vibration!
  38. 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...
  39. Thanks for listening I am Get the slides: Andrew Betts

    @triblondon [email protected] fastly.us/potntalk Take our survey: fastly.us/2skOnXM