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

JavaScript Code at the Speed of Light

JavaScript Code at the Speed of Light

Using Content Delivery Networks and CDNs for better #webperf.

Clay Smith

April 16, 2016
Tweet

More Decks by Clay Smith

Other Decks in Programming

Transcript

  1. JavaScript Code at
    the Speed of Light
    Clay Smith, New Relic
    JSConfUY - April 16, 2016
    @smithclay

    View Slide

  2. ¿Por qué estoy aquí?
    • Been nerding out on
    internet protocols
    (last week: IETF 95).
    • Think a better
    understanding of
    the network layer is
    really important.

    View Slide

  3. What's our mental model
    for a modern JavaScript
    app?

    View Slide

  4. The Client Server Model
    Browser Server
    HTTP

    View Slide

  5. An application
    Server
    HTTP
    application.js
    index.html
    application.css
    "My App"

    View Slide

  6. –AlbertEinstein.js
    "JavaScript reality is merely
    an illusion."

    View Slide

  7. More hosts === more
    complexity
    e.test/app.js
    index.html
    e.test/app.css
    "My App"
    g.test/analytics.js
    f.test/bootstrap.css
    z.test/font.woff z.test/foo.svg
    HTTP

    View Slide

  8. Connections have a cost
    Retrieved: April 1, 2016
    http://httparchive.org/interesting.php#connections

    View Slide

  9. Are we building
    distributed systems?
    "A distributed system consists of a collection
    of distinct processes which are spatially
    separated, and which communicate with one
    another by exchanging messages."
    —Leslie Lamport, 1978
    See also: http://dl.acm.org/citation.cfm?id=2482856

    View Slide

  10. Why is it so difficult?

    View Slide

  11. J.M. Wing's Three Drivers of
    Computing
    Society
    Technology
    Science
    From: Computational Thinking and Thinking about
    Computing (2008)

    View Slide

  12. Physics and JavaScript apps
    Information can't travel faster than
    the speed of light.
    299792458
    meters/sec

    View Slide

  13. The speed limit
    Browser Server
    HTTP
    This connection can't defy the laws of physics.

    View Slide

  14. It's not fast enough
    Source Destination
    Great Circle
    Distance
    Round Trip
    Time in Fiber
    SFO London 5,375 miles 84 ms
    SFO Cape Town 10,124 miles 158 ms
    SFO Montevideo 6,554 miles 102 ms
    1 ms at speed of light = Slightly
    less than width of Uruguay

    View Slide

  15. What to do?
    1.Move it geographically closer
    2.Optimize and/or use better
    abstractions

    View Slide

  16. Origin
    Server
    Moving it closer with CDNs
    Browser
    CDN
    Edge
    HTTP
    HTTP
    Short distance
    Long Distance
    HTTP requests get
    routed to a nearby
    location using the
    CDN network.

    View Slide

  17. Use the headers
    • Set headers on responses control to caching:
    • Cache-Control: max-age=10, public
    • The bigger the max-age is, the longer it is
    cached.
    • Always verify settings (check response
    headers in Chrome web inspector or cURL)
    Great resource: http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/

    View Slide

  18. File asset revisioning
    • The filename has an MD5 hash of the
    contents: app-d2ae34123.js
    • Cache-Control: max-age=31536000,
    public
    • Use a grunt and gulp plugin— someone has
    already done this (i.e. https://github.com/cbas/
    grunt-rev)

    View Slide

  19. What if the CDN goes down?

    window.jQuery ||<br/>document.write('<script src="js/vendor/<br/>jquery-1.12.2.min.js"><\/script>')
    https://github.com/h5bp/html5-boilerplate/blob/master/dist/
    index.html
    Future: https://w3c.github.io/network-error-logging/

    View Slide

  20. Better abstractions

    View Slide

  21. The OSI Model explained
    using a chivito
    Physical (ethernet/pan)
    Data Link (ethernet/rodajas de tomate)
    Network (IP/panceta)
    Transport (TCP/jamón cocido)
    Session (mozzarella)
    Presentation (JPG/mayonesa)
    Application (HTTP/Currasco)
    Lower Layers
    Upper Layers

    View Slide

  22. https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/

    View Slide

  23. GET /cat.gif GET /app.css
    200 a.js
    HTTP/2: one connection,
    many requests
    404 favicon.ico
    Single TCP Connection (Multiplexing)
    Client
    Server

    View Slide

  24. HTTP/2 es tu amigo
    • No more concatenation (mega-
    app.js)
    • Adios, inlining.
    • Adios, domain sharding.
    • Server Push (highly experimental)

    View Slide

  25. HTTP/2 requires
    HTTPS.
    Free TLS certificates (world's 3rd largest authority):
    https://letsencrypt.org

    View Slide

  26. Server
    Browser
    CDN
    Edge
    HTTP/2
    HTTP/1
    Some CDNs already
    support HTTP/2. Full
    list is here: https://
    istlsfastyet.com/
    H2 + CDNs

    View Slide

  27. How do we build
    complex [JavaScript
    apps] simply?
    One of the "unresolved questions in computing":

    View Slide

  28. Measure and use data
    to make decisions.
    Be suspicious...

    View Slide

  29. Un millón de gracias.
    Clay Smith, New Relic
    @smithclay
    https://blog.newrelic.com/2016/02/09/http2-best-
    practices-web-performance/

    View Slide