The Future Of Performance Tooling

Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Transcript

1. THE FUTURE OF PERFORMANCE TOOLING ADDY OSMANI
2. @addyosmani chrome
3. JavaScript
4. User Experience Happening Useful Usable Delightful Is it… ?
5. https://pagetransitions.netlify.app/
7. What does the future of performance tooling look like?
8. User-centric. Actionable. Contextual.
9. User-centric. Actionable. Contextual.
12. A Page Load in Lighthouse
13. A Page Load in DevTools
14. MPA vs. SPA Back / Forward Cache Core Web Vitals Pre- fetch & Pre- render Warm cache vs. cold cache And many more. Beyond initial page-load performance
15. A User Flow is a series of steps a user takes to achieve a meaningful goal.
16. MPA vs. SPA Purchasing Creating things User onboarding Inviting People Upgrading Cancelling page fl ows.com
17. Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal? Source: https://butteracademy.com/user- fl ows Photo by Bekah Allmark from Pexels
18. Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal?
19. Designing User Flows 1.Who is the user? 2.What is their goal? 3.What steps help achieve this goal?
20. User Flow: Buying something
22. Introducing User Flows for DevTools & Lighthouse
24. Export and Import User Flows Chrome Canary
25. Edit User Flow selectors and timeouts
26. Record flows from Lighthouse in DevTools 👩🔬
27. What if you could use flows with other tools?
28. https: / / github.com/WebPageTest/Recorder-To-WPT-Script $ node index.js cart.json Note: Very early and experimental 👩🔬🧪
29. setEventName Navigate navigate https://demo.vercel.store/ setEventName Click execAndWait document.querySelector("#__next > div > main > div.Marquee_root__jkJK1.Marquee_secondary__8dcL6.marquee-container > div:nth- child(1) > a:nth-child(3) > div.ProductCard_header__qlwPO").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(1) > div:nth-child(2) > div > button:nth-child(3)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(4) > button").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Sidebar_root__hUV6J > div > section > div > div > div > header > button > svg").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Navbar_root__oKPSU.shadow-magical > div > div.Navbar_nav__FsbqY > div:nth-child(1) > nav > a:nth-child(2)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.col-span-8.order-3.lg\:order-none > div.grid.grid- cols-1.gap-6.sm\:grid-cols-2.lg\:grid-cols-3 > a:nth-child(5) > div.ProductCard_imageContainer__G6HoR > div > span > img").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(1) > div:nth-child(1) > div > button:nth-child(3)").click(); setEventName Click execAndWait document.querySelector("#__next > div > main > div > div > div.ProductView_sidebar__pNv5P > div:nth-child(4) > button").click(); setEventName Click execAndWait document.querySelector("#__next > div > div.Sidebar_root__hUV6J > div > section > div > div > div > div > div.flex- shrink-0.px-6.py-6.sm\:px-6.sticky.z-20.bottom-0.w-full.right-0.left-0.bg-accent-0.border-t.text-sm > div:nth-child(3) > a").click(); Example Output
31. What about cross-browser testing user flows?
32. $ npm install cypress $ npx @cypress/chrome-recorder cart.json
34. $ npm install cypress $ npx @cypress/chrome-recorder cart.json $ npx cypress run - - record - - key <key>
36. User-centric. Actionable. Contextual.
37. I am excited to announce my new position 🎉
42. Load code proportional to what's onscreen.
43. Only load what you users need.
44. Preload LCP image Avoid large layout shifts LCP image shouldn't be lazy- loaded Avoid long main- thread tasks Images should have dimensions specified And many more. Lighthouse Actionability for Web Vitals
46. What is input responsiveness? FIRST INPUT DELAY TOTAL BLOCKING TIME TIME TO INTERACTIVE INP
47. Click ➡ Open Menu
48. Click ➡ Add to Cart
49. 👩🔬 A new experimental Responsiveness metric 👆 Measures Runtime Responsiveness 🕓 Full Interaction Latency ⌨ Tap, Drag, and Keyboard Interaction to Next Paint (INP)
50. Total Blocking Time (TBT) - Lab metric 🤖 Automatic, out of the box 👆 Measures Long Tasks until Interactive 🔮 Best way to predict Responsiveness
51. 70% 100ms 2x views Share of users that experience terrible Responsiveness at least once a week. That’s measuring one whole second of interaction latency UX research on expected latency to user input. RAIL model: web.dev/rail Many studies cite even higher expectations for speci fi c fl ows. On desktop: Users load 2x more as many pages if they experience Good Responsiveness overall.
56. Debugging performance
59. about:tracing
60. ui.perfetto.dev
61. Could this be better? A preview.
63. User-centric. Actionable. Contextual.
64. A StackPack allows Lighthouse to display stack specific suggestions.
68. A Treemap displays large amounts of tree-structured data.
69. Webpack Bundle Analyzer
71. Improving performance is a journey
75. User-centric. Actionable. Contextual. The future of performance tooling is:
76. @addyosmani </thanks>
77. Archive.
78. Reference sheet What prior art should I be looking at? • https://twitter.com/addyosmani/status/1465221489209319428 • https://twitter.com/addyosmani/status/1455936618439737346 • https://twitter.com/addyosmani/status/1460515430204801031 • https://twitter.com/jec fi sh/status/1509849613473226752 • https://twitter.com/ChromeDevTools/status/1509808262249517056 • https://twitter.com/addyosmani/status/1443108286727852034 • https://twitter.com/addyosmani/status/1506518696709136384 • https://twitter.com/davewsmart/status/1463843638752989191 • https://web.dev/optimize-vitals-lighthouse/
79. Demos What should I be testing? • Vercel Commerce: • https://demo.vercel.store/ - Recorder, Flows • https://next-blog-wordpress.vercel.app/ • https://demo.vercel.events/ • Could even use Google Search • Movies: • tastejs.com/movies - Stack Packs. Maybe performance?
80. What Videobolts should I use? Un fi nalized Speed logo reveal maybe Car drift - good Car wheel Car electric logo Space trails Anime impact - good Nitro Lightning logo Zap Cyber city good Titles Quick titles Nice little podcast based intro edit Titles bigger font Another opener text And can use pexels for user fl ows, speed etc
81. What VideoHive should I use? Un fi nalized * Spectrum computer: https://videohive.net/item/spectrum-old-computer-opener/15247782 Car racing reveal https://videohive.net/item/car-racing-reveal/20157855 https://videohive.net/item/man-waiting-for-someone-who-late-at-the-coffee-shop-checking-time-on-his-watch/ 14676946 waiting
82. Real-world / Time
83. Real-world / Time
84. Time
85. Actionability
86. Actionability
87. Actionability
88. Context
89. Context
90. Addy Osmani Future Of Performance Tooling DevsForUkraine
91. The web is composed of layers.
93. Proprietary + Confidential The Platform Foundation Applications
94. Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System The Platform Foundation Applications
95. Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System Web Browsers Polyfills / Transforms The Platform Foundation Applications
96. Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating System JavaScript Frameworks & Tools Components The Platform Foundation Applications Infrastructure Web Browsers Polyfills / Transforms
97. If you want a fast site, test on slow hardware. regularly. Hardware (CPU, GPU, RAM) and Network
98. Everyone talks about how Social Media is bad for your health, but what about JavaScript?
99. There is a huge gap in CPU Perf between high-end vs. low-end phones
100. There is a huge gap in CPU Perf between high-end vs. low-end laptops
102. Good defaults matter. JavaScript Frameworks & Tools
105. Can we make faster one-click away? Infrastructure
108. Experimenting with performance using Cloudflare Workers Priority Hints improving Largest Contentful Paint from 2.6 s to 1.9 s in a test of Google Flights
110. PageSpeed Insights combines real-world & lab (diagnostic) data.