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

Fast, Fast, Fast

Fast, Fast, Fast

We can write our Ember apps fast, they run fast in the user's browser (thanks to the Glimmer VM) but how can we get them into browsers fast? In this talk, I explore limiting factors for app startup performance and introduce techniques for improving Ember apps' time-to-interactive.

Marco Otte-Witte

October 12, 2018
Tweet

More Decks by Marco Otte-Witte

Other Decks in Programming

Transcript

  1. The three F's of
    Frontend Engineering

    View Slide

  2. Marco Otte-Witte
    @marcoow

    View Slide

  3. simplabs.com
    @simplabs

    View Slide

  4. Framework Fatigue
    WTF
    Fear of IE

    View Slide

  5. Framework Fatigue
    WTF
    Fear of IE

    View Slide

  6. WTF
    Fear of IE
    Framework Fatigue
    ¯\_(ツ)_/¯

    View Slide

  7. Framework Fatigue
    WTF
    Fear of IE

    View Slide

  8. Write Fast
    Run Fast
    Deliver Fast

    View Slide

  9. Write Fast
    Run Fast
    Deliver Fast

    View Slide

  10. Write Fast
    Run Fast
    Deliver Fast

    View Slide

  11. Write Fast
    Run Fast
    Deliver Fast

    View Slide

  12. Write Fast
    Run Fast
    Deliver Fast

    View Slide

  13. Delivering fast apps
    even faster

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. GET /
    GET /app.js
    <br/>

    View Slide

  19. Link: ; rel=preload; as=script

    Resource Hints

    View Slide

  20. GET /
    GET /app.js

    View Slide

  21. GET /
    GET /app.js

    View Slide

  22. View Slide

  23. Link: ; rel=preload; as=script
    Link: ; rel=preload; as=script

    View Slide

  24. View Slide

  25. View Slide




  26. View Slide

  27. View Slide

  28. Preloading does not work with SRI
    Do not preload everything as bandwidth is limited!

    View Slide

  29. HTTP/2 Push
    could use that as well but there are problems
    https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

    View Slide

  30. preload is great when you know the URL but what if you don't?

    View Slide

  31. https://external-data-api.com/projects/12

    View Slide

  32. DNS lookup
    HTTP connect
    SSL Handshake
    TTFB
    Content Download

    View Slide


  33. View Slide

  34. DNS lookup
    HTTP connect
    SSL Handshake
    TTFB
    Content Download

    View Slide

  35. TTFB
    Content Download

    View Slide

  36. preload and preconnect make the
    browser aware of critical resources
    earlier in the loading process

    View Slide

  37. No request is faster than no request

    View Slide

  38. View Slide

  39. View Slide

  40. How likely are users to have fresh
    assets in their browser caches?

    View Slide

  41. - dist/assets/mweb.js: (>) grows from 412.267 KiB to 412.314 KiB
    - dist/assets/vendor.js: (>) grows from 1.126 MiB to 1.126 MiB

    View Slide

  42. - dist/assets/mweb.js: (>) grows from 412.267 KiB to 412.314 KiB
    - dist/assets/vendor.js: (>) grows from 1.126 MiB to 1.126 MiB

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. there's much more
    HTTP/2 CDNs
    inlining critical CSS
    webpagetest.org
    RUM
    images
    SSR Bundle splitting

    View Slide

  47. Thanks

    View Slide

  48. simplabs.com
    @simplabs

    View Slide