Performance Empathy

Performance Empathy at JSConfEU

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
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
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”?
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