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
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
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
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
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
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
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
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
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
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
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? + + =
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/
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
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
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;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)
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/
triblondon
kyonmm
line_developers
masakick
kappa4
papix
iqbocchi
kenya888
sakon310
hecateball
ocise
kraj
satotakeshi
jrom
mojombo
chrislema
stephaniewalter
jeffersonlam
vanstee
keavy
malarkey
shlominoach
chriscoyier
maggiecrowley
sugarenia
![Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }](https://files.speakerdeck.com/presentations/dc4d07812c804dfa96293a8499fd5d48/slide_88.jpg){kind=link}
