The power of the network

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

4. Why does this matter?
   

   View Slide

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

   View Slide

6. View Slide

7. HTTP Archive, April 2017
   

   View Slide

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

   View Slide

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

   View Slide

10. >
    2.39MB
    3.45MB
    

    View Slide

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

    View Slide

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

    View Slide

13. What should we optimise?
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

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

    View Slide

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

    View Slide

19. “Internet”
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    
    
    About Us | Google
    …
    andrew in ~$
    Look up IP
    address
    Get a page
    from that IP
    address
    

    View Slide

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
    

    View Slide

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

    View Slide

26. HTTP/1.1
    

    View Slide

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
    
    
    Example Domain
    ...
    New! Say which
    website you
    wanted
    New! No hang-up,
    allows reusing
    connection
    

    View Slide

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
    

    View Slide

29. HTTP/1.1 + TLS
    

    View Slide

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
    
    
    Example Domain
    ...
    www.bearfruit.org/2008/04/17/telnet-for-testing-ssl-https-websites/
    Same as 1.1, but
    now encrypted.
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

34. HTTP/2
    

    View Slide

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
    <
    
    
    ...
    simonecarletti.com/blog/2016/01/http2-curl-macosx/
    Kinda looks the
    same? ¯\_(ツ)_/¯
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

43. Caching
    

    View Slide

44. View Slide

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

    View Slide

46. pwa.fastlydemo.net
    

    View Slide

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
    

    View Slide

48. Multiple caches
    Browser HTTP
    cache
    Fastly Origin server
    

    View Slide

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
    

    View Slide

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

    View Slide

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/
    

    View Slide

52. View Slide

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

    View Slide

54. Cache miss after purging
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

60. View Slide

61. Origin down, still working...
    

    View Slide

62. Cutting-edge web networking
    with Streams
    

    View Slide

63. Before: Edge side includes
    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
    

    View Slide

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!
    

    View Slide

65. No header
    template!
    Header + footer
    In SW cache
    

    View Slide

66. View Slide

67. View Slide

68. Link preload & HTTP/2 Push
    

    View Slide

69. Link: ;rel=preload;as=script
    Link rel=preload
    Determines priority &
    Accept mime type
    

    View Slide

70. Multiple caches
    Browser HTTP
    cache
    CDN Origin server
    

    View Slide

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/
    

    View Slide

72. Preload -> Push
    User Edge Server
    Get page.html
    Browser sees Link preload
    header and fetches app.js
    Browser encounters <br/>tag, fetches app.js again<br/>Preload<br/>cache<br/>Push<br/>cache<br/>Server includes Link:<br/>preload header for<br/>app.js<br/>CDN pushes app.js along with<br/>response to page.html. JS goes<br/>into the push cache.<br/>app.js is pulled from<br/>push cache into the<br/>preload cache<br/>Preload cache wiped when<br/>user goes to another page<br/>

    View Slide

73. Link: ;rel=preload;as=script
    Preload, push, preload+push, nopush?
    PRELOADED, MAY BE PUSHED
    Link: ;rel=preload;as=script;nopush
    PRELOADED, NOT PUSHED
    Link: ;rel=preload;as=script;x-http2-push-only
    EITHER PRELOADED OR PUSHED BUT NOT BOTH (FASTLY ONLY)
    

    View Slide

74. View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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/
    

    View Slide

79. View Slide

80. “This site has been updated
    in the background”
    

    View Slide

81. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

87. Assert behaviours for
    peak performance
    with Feature policy
    COMING
    SOON
    

    View Slide

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

    View Slide

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

    View Slide

90. In summary...
    

    View Slide

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

    View Slide

92. Thanks for listening
    I am Get the slides:
    Andrew Betts
    @triblondon
    abetts@fastly.com
    fastly.us/potntalk
    Take our survey:
    fastly.us/2skOnXM
    

    View Slide