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

Performance Empathy

Performance Empathy

Performance Empathy at JSConfEU

4e3a8581bae65a5a8d89dc5015aac185?s=128

Houssein Djirdeh

June 02, 2019
Tweet

Transcript

  1. Performance Empathy @hdjirdeh

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

    another
  3. per·for·mance em·pa·thy: the ability to understand and share the performance

    concerns of a site
  4. Advocating for performance

  5. None
  6. Why care about performance?

  7. 1MB of JavaScript Network: Slow 3G

  8. 19 seconds Network: Slow 3G

  9. Median JS: ~350 KB Sum of transfer size of all

    external scripts on mobile in 2019 (median) - HTTP Archive
  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
  11. None
  12. Network: Slow 3G?

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

    mobile?
  14. You know your users better than anyone

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

    they?
  16. #1 You get an idea Scenario You find out how

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

    codebase You start building
  18. Performance awareness

  19. Learning a new tool Launching your first website Launching your

    10th website Noticing performance issues Performance awareness
  20. Advocate Developer

  21. • There are way too many slow sites • Are

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

  23. • Can focus on a million things with performance being

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

  25. None
  26. None
  27. Middle ground

  28. How can we fix performance better?

  29. Vue 3 Ivy React Fire 1 We need better defaults

    • Framework-level
  30. 1 We need better defaults • Framework-level

  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 <img src=“raptors.jpg" loading="lazy" /> 1 We need better defaults • Browser-level
  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 <img src=“raptors.jpg" loading="lazy" /> 1 We need better defaults • Browser-level
  33. 1 We need better defaults <virtual-scroller id='scroller'> <div>Item 1</div> <div>Item

    2</div> ... <div>Item 1000</div> </virtual-scroller> • Browser-level
  34. 1 We need better defaults <virtual-scroller id='scroller'> <div>Item 1</div> <div>Item

    2</div> ... <div>Item 1000</div> </virtual-scroller> • Browser-level
  35. 1 We need better defaults <virtual-scroller id='scroller'> <div>Item 1</div> <div>Item

    2</div> ... <div>Item 1000</div> </virtual-scroller> • Browser-level
  36. Lightwallet bit.ly/lightwallet-docs 2 We need better guard rails • Budgets

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

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

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

    they are • Support
  40. External (blogs, third-party libraries, talks, etc…) Internal (built-in tooling, improved

    defaults, etc…) Fixing the performance problem
  41. External Internal Fixing the performance problem

  42. Internal External Fixing the performance problem

  43. Internal Fixing the performance problem

  44. Ideal world Internal Fixing the performance problem

  45. @hdjirdeh