The power of the network

The power of the network

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

June 03, 2017
Tweet

Transcript

  1. Andrew Betts Principal developer advocate | Fastly The power of

    the network
  2. • Developer relations at Fastly • W3C Technical Architecture Group

    • Previously Financial Times, Nikkei Who is this guy?
  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
  4. Why does this matter?

  5. webpagetest.org Complexity of resource loading is increasing Better browser support

    gives developers more control, better tools (like webpagetest) offer better monitoring.
  6. None
  7. HTTP Archive, April 2017

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

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

  10. > 2.39MB 3.45MB

  11. https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017) 2.2% of daily

    income to load one webpage
  12. Proliferation of third party tools on the page Ghostery regularly

    finds more than 50 third party scripts included on a single web page.
  13. What should we optimise?

  14. None
  15. None
  16. None
  17. • Global • Something about numbers • Blue • Planet

    sized space-faring RJ45 cables • Reflective The web is
  18. First international WWW conf Geneva, Switzerland The conference information is

    accessible through telnet: www94.cern.ch
  19. “Internet”

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

  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
  22. HTTP/1.0 (yes, technically there was also a 0.9)

  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 ~$ Look up IP address Get a page from that IP address
  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
  25. • Negotiate new connection for every request! • Each IP

    address can only host one website HTTP 1.0 problems
  26. HTTP/1.1

  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> ... New! Say which website you wanted New! No hang-up, allows reusing connection
  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
  29. HTTP/1.1 + TLS

  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/ Same as 1.1, but now encrypted.
  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
  32. TCP + TLS handshake “High performance browser networking”, Ilya Grigorik

    (O’Reilly 2013)
  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
  34. HTTP/2

  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? ¯\_(ツ)_/¯
  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
  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
  38. None
  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
  40. Closer termination: Dynamic site acceleration Denver user Edge (Denver) Server

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

    2 (Europe) Always on, optimised, low latency connection Server (Stockholm)
  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
  43. Caching

  44. None
  45. pwa.fastlydemo.net An offline-capable news reading progressive web app with cache

    insights ServiceWorker required for stats
  46. pwa.fastlydemo.net

  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
  48. Multiple caches Browser HTTP cache Fastly Origin server

  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 on refresh
  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? + + =
  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/
  52. None
  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...
  54. Cache miss after purging

  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
  56. Serve stale (while revalidate) Did not wait for origin response!

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

  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 offline, refuses connection stale-while-reval expires SERVER DOWN! Server super-stale object from cache
  59. Cache-control: max-age=31536000, stale-while-revalidate=3600, stale-if-error=604800 Serve stale (on error from origin)

  60. None
  61. Origin down, still working...

  62. Cutting-edge web networking with Streams

  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
  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!
  65. No header template! Header + footer In SW cache

  66. None
  67. None
  68. Link preload & HTTP/2 Push

  69. Link: </resources/js/app.js>;rel=preload;as=script Link rel=preload Determines priority & Accept mime type

  70. Multiple caches Browser HTTP cache CDN Origin server

  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/
  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
  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)
  74. None
  75. Coming soon... Warning: Begin furious hand-waving here.

  76. Purge all the way to the browser with silent push

    COMING SOON
  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/
  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/
  79. None
  80. “This site has been updated in the background”

  81. None
  82. Purging when things happen (+ silent push) User Event: Comment

    posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
  83. Clear the browser cache with the Clear Site Data API

    COMING SOON
  84. Clear-Site-Data: "cache", "cookies", "storage", "executionContexts" Clear site data header Kills

    active tabs Gets rid of stuff like ServiceWorkers and IndexedDB
  85. Set headers for your whole site at once with Origin

    policy COMING SOONISH
  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/
  87. Assert behaviours for peak performance with Feature policy COMING SOON

  88. Does your page really need the Vibration API? They say

    I have to have a GIF
  89. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

    Feature policy HTTP header This page is not allowed to use vibration!
  90. In summary...

  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...
  92. Thanks for listening I am Get the slides: Andrew Betts

    @triblondon abetts@fastly.com fastly.us/potntalk Take our survey: fastly.us/2skOnXM