$30 off During Our Annual Pro Sale. View Details »

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. THE FUTURE OF
    PERFORMANCE TOOLING
    ADDY OSMANI

    View Slide

  2. @addyosmani
    chrome

    View Slide

  3. JavaScript

    View Slide

  4. User Experience
    Happening Useful Usable Delightful
    Is it…
    ?

    View Slide

  5. https://pagetransitions.netlify.app/

    View Slide

  6. View Slide

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

    View Slide

  8. User-centric.
    Actionable.
    Contextual.

    View Slide

  9. User-centric.
    Actionable.
    Contextual.

    View Slide

  10. View Slide

  11. View Slide

  12. A Page Load in Lighthouse

    View Slide

  13. A Page Load in DevTools

    View Slide

  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

    View Slide

  15. A User Flow is a series of
    steps a user takes to
    achieve a meaningful goal.

    View Slide

  16. MPA
    vs.
    SPA
    Purchasing
    Creating things
    User onboarding
    Inviting People
    Upgrading
    Cancelling
    page
    fl
    ows.com

    View Slide

  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

    View Slide

  18. Designing User Flows 1.Who is the user?

    2.What is their goal?

    3.What steps help achieve this goal?

    View Slide

  19. Designing User Flows 1.Who is the user?

    2.What is their goal?

    3.What steps help achieve this goal?

    View Slide

  20. User Flow: Buying something

    View Slide

  21. View Slide

  22. Introducing User Flows for
    DevTools & Lighthouse

    View Slide

  23. View Slide

  24. Export and Import User Flows
    Chrome Canary

    View Slide

  25. Edit User Flow selectors and timeouts

    View Slide

  26. Record flows from Lighthouse in DevTools 👩🔬

    View Slide

  27. What if you could use
    flows with other tools?

    View Slide

  28. https:
    /
    /
    github.com/WebPageTest/Recorder-To-WPT-Script


    $ node index.js cart.json
    Note: Very early and experimental 👩🔬🧪

    View Slide

  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

    View Slide

  30. View Slide

  31. What about
    cross-browser testing
    user flows?

    View Slide

  32. $ npm install cypress


    $ npx @cypress/chrome-recorder cart.json

    View Slide

  33. View Slide

  34. $ npm install cypress


    $ npx @cypress/chrome-recorder cart.json


    $ npx cypress run
    -
    -
    record
    -
    -
    key

    View Slide

  35. View Slide

  36. User-centric.
    Actionable.
    Contextual.

    View Slide

  37. I am excited to announce my new position 🎉

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Load code proportional to what's onscreen.

    View Slide

  43. Only load what you users need.

    View Slide

  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

    View Slide

  45. View Slide

  46. What is input
    responsiveness?
    FIRST INPUT DELAY TOTAL BLOCKING TIME TIME TO INTERACTIVE INP

    View Slide

  47. Click ➡ Open Menu

    View Slide

  48. Click ➡ Add to Cart

    View Slide

  49. 👩🔬 A new experimental Responsiveness metric

    👆 Measures Runtime Responsiveness

    🕓 Full Interaction Latency

    ⌨ Tap, Drag, and Keyboard

    Interaction to Next Paint (INP)

    View Slide

  50. Total Blocking Time (TBT) - Lab metric
    🤖 Automatic, out of the box

    👆 Measures Long Tasks until Interactive
    🔮 Best way to predict Responsiveness

    View Slide

  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.

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. Debugging
    performance

    View Slide

  57. View Slide

  58. View Slide

  59. about:tracing

    View Slide

  60. ui.perfetto.dev

    View Slide

  61. Could this be
    better? A preview.

    View Slide

  62. View Slide

  63. User-centric.
    Actionable.
    Contextual.

    View Slide

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

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. A Treemap displays
    large amounts of
    tree-structured data.

    View Slide

  69. Webpack Bundle Analyzer

    View Slide

  70. View Slide

  71. Improving
    performance is
    a journey

    View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. User-centric.
    Actionable.
    Contextual.
    The future of performance tooling is:

    View Slide

  76. @addyosmani

    View Slide

  77. Archive.

    View Slide

  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/

    View Slide

  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?

    View Slide

  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

    View Slide

  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


    View Slide

  82. Real-world / Time

    View Slide

  83. Real-world / Time

    View Slide

  84. Time

    View Slide

  85. Actionability

    View Slide

  86. Actionability

    View Slide

  87. Actionability

    View Slide

  88. Context

    View Slide

  89. Context

    View Slide

  90. Addy Osmani
    Future Of Performance Tooling
    DevsForUkraine

    View Slide

  91. The web is
    composed of layers.

    View Slide

  92. View Slide

  93. Proprietary + Confidential
    The Platform
    Foundation
    Applications

    View Slide

  94. Proprietary + Confidential
    Hardware (CPU, GPU, RAM) and Network
    Operating System
    The Platform
    Foundation
    Applications

    View Slide

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

    View Slide

  96. Proprietary + Confidential
    Hardware (CPU, GPU, RAM) and Network
    Operating System
    JavaScript Frameworks & Tools
    Components
    The Platform
    Foundation
    Applications
    Infrastructure
    Web Browsers
    Polyfills / Transforms

    View Slide

  97. If you want a fast site,
    test on slow hardware.
    regularly.
    Hardware (CPU, GPU, RAM) and Network

    View Slide

  98. Everyone talks about how Social Media is bad
    for your health, but what about JavaScript?

    View Slide

  99. There is a huge gap in CPU Perf between high-end vs. low-end phones

    View Slide

  100. There is a huge gap in CPU Perf between high-end vs. low-end laptops

    View Slide

  101. View Slide

  102. Good defaults
    matter.
    JavaScript Frameworks & Tools

    View Slide

  103. View Slide

  104. View Slide

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

    View Slide

  106. View Slide

  107. View Slide

  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

    View Slide

  109. View Slide

  110. PageSpeed Insights
    combines real-world &
    lab (diagnostic) data.

    View Slide

  111. View Slide

  112. View Slide