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
   

   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