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

The Future Of Performance Tooling

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.

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

August 05, 2022
Tweet

More Decks by Addy Osmani

Other Decks in Technology

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/

  6. None
  7. What does the future of performance tooling look like?

  8. User-centric. Actionable. Contextual.

  9. User-centric. Actionable. Contextual.

  10. None
  11. None
  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

  21. None
  22. Introducing User Flows for DevTools & Lighthouse

  23. None
  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
  30. None
  31. What about cross-browser testing user flows?

  32. $ npm install cypress $ npx @cypress/chrome-recorder cart.json

  33. None
  34. $ npm install cypress $ npx @cypress/chrome-recorder cart.json $ npx

    cypress run - - record - - key <key>
  35. None
  36. User-centric. Actionable. Contextual.

  37. I am excited to announce my new position 🎉

  38. None
  39. None
  40. None
  41. None
  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
  45. None
  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.
  52. None
  53. None
  54. None
  55. None
  56. Debugging performance

  57. None
  58. None
  59. about:tracing

  60. ui.perfetto.dev

  61. Could this be better? A preview.

  62. None
  63. User-centric. Actionable. Contextual.

  64. A StackPack allows Lighthouse to display stack specific suggestions.

  65. None
  66. None
  67. None
  68. A Treemap displays large amounts of tree-structured data.

  69. Webpack Bundle Analyzer

  70. None
  71. Improving performance is a journey

  72. None
  73. None
  74. None
  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.

  92. None
  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
  101. None
  102. Good defaults matter. JavaScript Frameworks & Tools

  103. None
  104. None
  105. Can we make faster one-click away? Infrastructure

  106. None
  107. None
  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
  109. None
  110. PageSpeed Insights combines real-world & lab (diagnostic) data.

  111. None
  112. None