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.

3179e6bb62dc91d29bb906ffef4fa2d4?s=128

Marco Otte-Witte

October 12, 2018
Tweet

Transcript

  1. The three F's of Frontend Engineering

  2. Marco Otte-Witte @marcoow

  3. simplabs.com @simplabs

  4. Framework Fatigue WTF Fear of IE

  5. Framework Fatigue WTF Fear of IE

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

  7. Framework Fatigue WTF Fear of IE

  8. Write Fast Run Fast Deliver Fast

  9. Write Fast Run Fast Deliver Fast

  10. Write Fast Run Fast Deliver Fast

  11. Write Fast Run Fast Deliver Fast

  12. Write Fast Run Fast Deliver Fast

  13. Delivering fast apps even faster

  14. None
  15. None
  16. None
  17. None
  18. GET / GET /app.js <script src="/app.js">

  19. Link: </app.js>; rel=preload; as=script <link rel="preload" href="/assets/vendor.js" as="script"> Resource Hints

  20. GET / GET /app.js

  21. GET / GET /app.js

  22. None
  23. Link: </assets/vendor.js>; rel=preload; as=script Link: </assets/guides-app.js>; rel=preload; as=script

  24. None
  25. None
  26. <link rel="preload" href="/content/versions.json" as="fetch" crossorigin="anonymous"> <link rel="preload" href="/content/v3.4.0/pages.json?version=v3.4.0" as="fetch" crossorigin="anonymous">

    <link rel="preload" href="/content/v3.4.0/index.json?path=index&version=v3.4.0" as="fetch" crossorigin="anonymous">
  27. None
  28. Preloading does not work with SRI Do not preload everything

    as bandwidth is limited!
  29. HTTP/2 Push could use that as well but there are

    problems https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/
  30. preload is great when you know the URL but what

    if you don't?
  31. https://external-data-api.com/projects/12

  32. DNS lookup HTTP connect SSL Handshake TTFB Content Download

  33. <link rel="preconnect" href="https://external-data-api.com">

  34. DNS lookup HTTP connect SSL Handshake TTFB Content Download

  35. TTFB Content Download

  36. preload and preconnect make the browser aware of critical resources

    earlier in the loading process
  37. No request is faster than no request

  38. None
  39. None
  40. How likely are users to have fresh assets in their

    browser caches?
  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
  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
  43. None
  44. None
  45. None
  46. there's much more HTTP/2 CDNs inlining critical CSS webpagetest.org RUM

    images SSR Bundle splitting
  47. Thanks

  48. simplabs.com @simplabs