Performance Empathy

Performance Empathy at JSConfEU

Transcript

1. Performance Empathy
   @hdjirdeh
   

   View Slide

2. em·pa·thy:
   the ability to understand and share the feelings of another
   

   View Slide

3. per·for·mance em·pa·thy:
   the ability to understand and share the performance concerns of a site
   

   View Slide

4. Advocating for performance
   

   View Slide

5. View Slide

6. Why care about performance?
   

   View Slide

7. 1MB of JavaScript
   Network: Slow 3G
   

   View Slide

8. 19 seconds
   Network: Slow 3G
   

   View Slide

9. Median JS: ~350 KB
   Sum of transfer size of all external scripts on mobile in 2019 (median) - HTTP Archive
   

   View Slide

10. 50% ship over 1MB of JS (251,283 origins)
    Sum of all scripts (mobile) for sites that use Angular, React or Vue (04/2019) - HTTP Archive
    bit.ly/bytes-js-query
    

    View Slide

11. View Slide

12. Network: Slow 3G?
    

    View Slide

13. Network: Slow 3G?
    Completely offline?
    Flaky network?
    Weaker device?
    On mobile?
    

    View Slide

14. You know your users better than anyone
    

    View Slide

15. No one makes performance their first priority
    and why should they?
    

    View Slide

16. #1
    You get an idea
    Scenario
    You find out how to build it
    You start building
    

    View Slide

17. #2
    You join a new company/team
    Scenario
    You learn the codebase
    You start building
    

    View Slide

18. Performance awareness
    

    View Slide

19. Learning a new tool
    Launching your first website
    Launching your 10th website
    Noticing performance issues
    Performance awareness
    

    View Slide

20. Advocate Developer
    

    View Slide

21. • There are way too many slow sites
    • Are developers “sloppy” when they
    ship slow experiences?
    Advocate
    

    View Slide

22. • Are developers “sloppy” when they
    ship slow experiences?
    

    View Slide

23. • Can focus on a million things with
    performance being one of them
    • Are advocates “out-of-touch”?
    Developer
    

    View Slide

24. • Are advocates “out-of-touch”?
    

    View Slide

25. View Slide

26. View Slide

27. Middle ground
    

    View Slide

28. How can we fix performance better?
    

    View Slide

29. Vue 3 Ivy
    React Fire
    1 We need better defaults
    • Framework-level
    

    View Slide

30. 1 We need better defaults
    • Framework-level
    

    View Slide

31. Header
    Lorem ipsum dolor sit
    amet, consectetur
    adipiscing elit. Aliquam
    fringilla magna at dolor
    dignissim iaculis. Donec
    lacinia in libero quis
    dignissim. Etiam tempor
    efficitur orci.
    Aenean a tempor ante,
    nec sagittis elit. Integer
    tristique, massa blandit
    ullamcorper accumsan,
    nulla dui efficitur nunc, et
    aliquam purus mi sit amet
    quam
    Eu finibus turpis feugiat.
    Pellentesque diam risus,
    iaculis ac est eget, varius
    
    1 We need better defaults
    • Browser-level
    

    View Slide

32. amet, consectetur
    adipiscing elit. Aliquam
    fringilla magna at dolor
    dignissim iaculis. Donec
    lacinia in libero quis
    dignissim. Etiam tempor
    efficitur orci.
    Aenean a tempor ante,
    nec sagittis elit. Integer
    tristique, massa blandit
    ullamcorper accumsan,
    nulla dui efficitur nunc, et
    aliquam purus mi sit amet
    quam
    Eu finibus turpis feugiat.
    Pellentesque diam risus,
    iaculis ac est eget, varius
    congue justo. Etiam
    hendrerit, lorem non
    luctus porttitor, tellus elit
    dictum orci, a rutrum nisl
    
    1 We need better defaults
    • Browser-level
    

    View Slide

33. 1 We need better defaults
    
    Item 1
    Item 2
    ...
    Item 1000
    
    • Browser-level
    

    View Slide

34. 1 We need better defaults
    
    Item 1
    Item 2
    ...
    Item 1000
    
    • Browser-level
    

    View Slide

35. 1 We need better defaults
    
    Item 1
    Item 2
    ...
    Item 1000
    
    • Browser-level
    

    View Slide

36. Lightwallet
    bit.ly/lightwallet-docs
    2 We need better guard rails
    • Budgets
    

    View Slide

37. Stack Packs
    bit.ly/stack-packs
    3 We need to meet developers where they are
    • Tooling
    

    View Slide

38. web.dev
    web.dev/react
    3 We need to meet developers where they are
    • Documentation
    

    View Slide

39. Framework Fund
    bit.ly/framework-perf
    3 We need to meet developers where they are
    • Support
    

    View Slide

40. External (blogs, third-party libraries, talks, etc…)
    Internal (built-in tooling, improved defaults, etc…)
    Fixing the performance problem
    

    View Slide

41. External Internal
    Fixing the performance problem
    

    View Slide

42. Internal
    External
    Fixing the performance problem
    

    View Slide

43. Internal
    Fixing the performance problem
    

    View Slide

44. Ideal world
    Internal
    Fixing the performance problem
    

    View Slide

45. @hdjirdeh
    

    View Slide