The power of the network

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

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

• 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

Why does this matter?

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

HTTP Archive, April 2017

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

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

> 2.39MB 3.45MB

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

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

What should we optimise?

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

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

“Internet”

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

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

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

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

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

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

HTTP/1.1

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

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

HTTP/1.1 + TLS

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.

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

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

• 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

HTTP/2

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? ¯\_(ツ)_/¯

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

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

• 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

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

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

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

Caching

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

pwa.fastlydemo.net

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

Multiple caches Browser HTTP cache Fastly Origin server

• 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

• 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? + + =

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

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...

Cache miss after purging

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

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

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

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

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

Origin down, still working...

Cutting-edge web networking with Streams

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

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!

No header template! Header + footer In SW cache

Link preload & HTTP/2 Push

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

Multiple caches Browser HTTP cache CDN Origin server

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/

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

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)

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

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

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/

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/

“This site has been updated in the background”

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

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

Clear-Site-Data: "cache", "cookies", "storage", "executionContexts" Clear site data header Kills
active tabs Gets rid of stuff like ServiceWorkers and IndexedDB

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

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/

Assert behaviours for peak performance with Feature policy COMING SOON

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

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

In summary...

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...

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

The power of the network

The power of the network

More Decks by Andrew Betts

Other Decks in Technology

Featured

Transcript