JavaScript Code at the Speed of Light

Using Content Delivery Networks and CDNs for better #webperf.

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