Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The power of the network

The power of the network

Andrew Betts

June 03, 2017
Tweet

More Decks by Andrew Betts

Other Decks in Technology

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
    [email protected]
    fastly.us/potntalk
    Take our survey:
    fastly.us/2skOnXM

    View Slide