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.

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
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
23. Link: </assets/vendor.js>; rel=preload; as=script Link: </assets/guides-app.js>; rel=preload; as=script
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">
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
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
46. there's much more HTTP/2 CDNs inlining critical CSS webpagetest.org RUM images SSR Bundle splitting
47. Thanks
48. simplabs.com @simplabs