Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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.

Addy Osmani

August 05, 2022
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. 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
  2. A User Flow is a series of steps a user

    takes to achieve a meaningful goal.
  3. 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
  4. Designing User Flows 1.Who is the user? 2.What is their

    goal? 3.What steps help achieve this goal?
  5. Designing User Flows 1.Who is the user? 2.What is their

    goal? 3.What steps help achieve this goal?
  6. 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
  7. 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
  8. 👩🔬 A new experimental Responsiveness metric 👆 Measures Runtime Responsiveness

    🕓 Full Interaction Latency ⌨ Tap, Drag, and Keyboard Interaction to Next Paint (INP)
  9. Total Blocking Time (TBT) - Lab metric 🤖 Automatic, out

    of the box 👆 Measures Long Tasks until Interactive 🔮 Best way to predict Responsiveness
  10. 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.
  11. 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/
  12. 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?
  13. 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
  14. 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
  15. Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating

    System Web Browsers Polyfills / Transforms The Platform Foundation Applications
  16. Proprietary + Confidential Hardware (CPU, GPU, RAM) and Network Operating

    System JavaScript Frameworks & Tools Components The Platform Foundation Applications Infrastructure Web Browsers Polyfills / Transforms
  17. If you want a fast site, test on slow hardware.

    regularly. Hardware (CPU, GPU, RAM) and Network
  18. Everyone talks about how Social Media is bad for your

    health, but what about JavaScript?
  19. 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