The Future Of Performance Tooling

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