The power of the network Andrew Betts Principal developer advocate | Fastly
Who is this guy? • Developer relations at Fastly • W3C Technical Architecture Group • Previously Financial Times, Nikkei
Agenda today • 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
Why does this matter?
Complexity of resource loading is increasing Better browser support gives developers more control, better tools (like webpagetest) offer better monitoring. webpagetest.org
HTTP Archive, April 2017
https://mobiforge.com/research-analysis/the-web-is-doom
http://www.pcworld.com/article/3060622
> 3.45MB 2.39MB
e m o c n i y a i l d f o % 2 2 . e a g p b e w e n o d a o l o t https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017)
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?
The web is • Global • Something about numbers • Blue • Planet sized space-faring RJ45 cables • Reflective
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 HTTP Mostly makes sense Session Transport TCP IP Network Total voodoo Data link Ethernet / Wi-fi / 3G / Bluetooth Physical
(yes, technically there was also a 0.9) HTTP/1.0
HTTP/1.0 andrew in ~$ host google.com P I p u k o google.com has address 216.58.195.78 o L s s e r d andrew in ~$ telnet 216.58.195.78 80 d a Connected to sfo07s16-in-f14.1e100.net. GET /about/ HTTP/1.0 200 OK Content-Type: text/html Get a page <html class=”google” lang=”en”> from that IP <head> <title>About Us | Google</title> address … andrew in ~$
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
HTTP 1.0 problems • Negotiate new connection for every request! • Each IP address can only host one website
HTTP/1.1
HTTP/1.1 andrew in ~$ host example.com h c h i w y a S w ! example.com has address 93.184.216.34 e N u o y e i t s b andrew in ~$ telnet 93.184.216.34 80 e w Connected to 93.184.216.34. d e n t a GET / HTTP/1.1 w Host: example.com HTTP/1.1 200 OK New! No hang-up, Cache-Control: max-age=604800 Content-Type: text/html allows reusing Date: Wed, 10 May 2017 19:41:51 GMT Vary: Accept-Encoding Content-Length: 1270 connection <html> <head> <title>Example Domain</title> ...
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 t u b 1 , Cache-Control: max-age=604800 1 . s a e m a S Content-Type: text/html . d e t Date: Wed, 10 May 2017 20:54:23 GMT p y r c n e w o n Vary: Accept-Encoding Content-Length: 1270 <html> <head> <title>Example Domain</title> ... www.bearfruit.org/2008/04/17/telnet-for-testing-ssl-https-websites/
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 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
TCP + TLS handshake “High performance browser networking”, Ilya Grigorik (O’Reilly 2013)
HTTP/1.1 + TLS • 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/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 > Kinda looks the < HTTP/2 200 < cache-control: max-age=604800 same? ¯\_( ツ )_/¯ < 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/
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 GET /about/ from example.com Browser Here’s /about/, hey also here’s logo.png IANA and the first part of video.mp4 GET /api/prices. Also, POST /api/login. Browser OK, here’s api/prices and a bit more of video.mp4 IANA
HTTP/2.0 Req1 Req2 Req1 Req2 Req2 Push Pkt 1 Pkt 1 Pkt 1 Pkt 2 Pkt 3 Pkt 1 Req4 Req3 Req3 Pkt 1 Pkt 2 Pkt 1
HTTP for the web today • 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
Closer termination: Dynamic site acceleration Denver user Higher probability of existing connection Edge Server (Denver) (Stockholm)
Dynamic site acceleration (shielded) Server Denver user (Stockholm) Always on, optimised, low latency connection Edge 1 Edge 2 (Denver) (Europe)
Use fewer origins Connections remain expensive to set up. Use a routing layer to expose only one origin. In-house app example.com Video provider Cold start, Analytics provider Always-on, long short distance distance
Caching
ServiceWorker required for stats pwa.fastlydemo.net An offline-capable news reading progressive web app with cache insights
pwa.fastlydemo.net
Types of object for caching Static: Stuff that Dynamic: unique Event driven: changes never changes to a single user when things happen JavaScript Inbox message list Articles CSS Shopping cart Product lists Images Preference values Search results Templates Stock prices /resources/style-v3.css /my/cart /api/getCurrentPrice Years private* Years* * Still benefits from DSA * If you can purge
Multiple caches Browser HTTP Fastly Origin server cache
Good cache headers • Never changes? Cache-control: max-age=31536000, immutable • Unique response? Avoid revalidations Cache-control: private, no-store on refresh • Changes when stuff happens? Cache-Control: max-age=0, s-maxage=31536000
Hang on, how about, like, 10 minutes ? • If it’s for a subresource : – Don’t do it. Risk of functional incompatibility. HTML CSS JS Maybe + + = Version 1, Version 1, Version 2, bang? cached cached live jakearchibald.com/2016/caching-best-practices/
Hang on, how about, like, 10 minutes ? • 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 � – jakearchibald.com/2016/caching-best-practices/
Purging when things happen User Edge Server Uncached, fetch from origin Hit! return “304 Not Event: PURGE Modified” from Edge Comment posted cache After purge, MISS... uncached again
Cache miss after purging
Recommend
More recommend
