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

Frontmania - All about Core Web Vitals: INP (In...

Sander van Surksum
October 11, 2024
61

Frontmania - All about Core Web Vitals: INP (Interaction to Next Paint)

In this presentation, we’ll explore INP (Interaction to Next Paint) and the new scheduler.yield API introduced in Chrome 129. We’ll discuss how this API allows developers to give the browser the flexibility to prioritise critical tasks, like painting or responding to user input, while handling longer-running operations. You’ll learn practical use cases for improving user experience and responsiveness on the web, making your applications feel smoother and more efficient.

Sander van Surksum

October 11, 2024
Tweet

Transcript

  1. Let’s <br/> the boundaries of page speed Sander van Surksum

    FRONTMANIA All about Core Web Vitals: INP (Interaction to Next Paint)
  2. Hello my name is! Get to know each other! Sander

    van Surksum WPO Consultant • Father of 4 daughters! • Web since 2003 • Web Performance enthusiast • Part Time muralist
  3. Part of the Makerstreet network We help businesses worldwide increase

    customer engagement and sales by making their websites faster. Speed up your website, improve your digital experience
  4. Interaction to Next Paint (INP) measures how long it takes

    for the browser to visually update after a user interaction.
  5. May 2022 Experimental Chrome announced experimental support for INP May

    2023 Pending Today, Chrome is announcing that INP will become a Core Web Vital metric March 2024 Stable INP becomes a stable Core Web Vital metric, replacing FID
  6. Why a good INP matters Performance metrics ”Over 90% of

    user time spent on a page is after the load.” 90%
  7. Google Core Web Vitals Web Performance Optimisation Loading speed Responsiveness

    Visual stability Time To First Byte First Contentful Paint Largest Contentful Paint First Input Delay Interaction to Next Paint Total Blocking Time Cumulative Layout Shift Google Core Web Vitals is a set of user-centric metrics for evaluating user experience. To be successful in search and ensure a great user experience, Google recommends that website owners focus on achieving good Core Web Vitals.
  8. What's in an interaction? Interaction to Next Paint The input

    delay occurs from the time an input is received, and may be caused by factors such as blocking tasks on the main thread.
  9. What's in an interaction? Interaction to Next Paint The input

    delay occurs from the time an input is received, and may be caused by factors such as blocking tasks on the main thread. The processing time is the time it takes for the interaction's event handlers to execute.
  10. What's in an interaction? Interaction to Next Paint The input

    delay occurs from the time an input is received, and may be caused by factors such as blocking tasks on the main thread. When execution finishes, we then enter the presentation delay , which is the time it takes to render and paint the next frame. The processing time is the time it takes for the interaction's event handlers to execute.
  11. What interactions does INP measure? Interaction to Next Paint It

    starts with a user interaction. Clicking with a mouse
  12. What interactions does INP measure? Interaction to Next Paint It

    starts with a user interaction. Clicking with a mouse Tapping on a device with a touchscreen
  13. What interactions does INP measure? Interaction to Next Paint It

    starts with a user interaction. Clicking with a mouse Tapping on a device with a touchscreen Pressing a key on either a physical or onscreen keyboard
  14. What interactions does INP measure? Interaction to Next Paint It

    starts with a user interaction. Clicking with a mouse Tapping on a device with a touchscreen Pressing a key on either a physical or onscreen keyboard Hovering and scrolling does not factor into INP. However, scrolling with the keyboard (space bar, page up, page down, and so forth) involves a keystroke, which may trigger other events that INP does measure. Any resulting scrolling is not factored into how INP is calculated.
  15. Geekbench 5 Single-Core Scores Responsiveness Alex Russell (@slightlyoff) Microsoft Partner

    PM on Edge It is my professional mission to build a web that works for everyone. “Updating the performance inequality gap series, and good gravy, the YoY single core performance gain for the iPhone 14 Pro to the iPhone 15 Pro was almost as large as the *the total perf of a moderately priced Android*.”
  16. INP for mobile has a *stronger* correlation with business metrics

    than INP for desktop https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/
  17. redBus Case Study INP optimizations for the search page helped

    redBus increase sales by about 7% User Experience Metric Improvement INP 72% faster Business Outcomes KPI Improvemen t Sales +7% https://web.dev/case-studies/redbus-inp?hl=en
  18. The Economic Times Case Study The Economic Times reduced INP

    nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews User Experience Metric Improvement INP 4x faster TBT 30x faster Business Outcomes KPI Improvemen t Page views +43% Bounce rate -50% https://web.dev/case-studies/economic-times-inp?hl=en
  19. Frasers Group Case Study INP improvements resulted in a significant

    boost in customer engagement and conversions, reinforcing the importance of a seamless digital experience User Experience INP Improvement Site A 36% faster Site B 38% faster Site C 42% faster Business Outcomes Conversion rate Improvemen t Site A +8.14% Site B +16.6% Site C +6.7%
  20. How to Find INP Issues? Interaction to Next Paint •

    Real User Monitoring (RUM): • Rumvision, Debugbear, Calibre, Treo, HoneyComb & more.. • Page Experience report in Search Console • Chrome DevTools • Open Chrome DevTools and go to the Performance panel. Record user interactions and analyze the INP metric for specific interactions.
  21. scheduler.yield() Interaction to Next Paint • A new API to

    improve web performance. • Helps break up long tasks by pausing them. • Gives the browser time to handle other tasks (like user interactions).
  22. Why scheduler.yield() is Useful Interaction to Next Paint • Prevents

    long tasks from blocking the main thread. • Improves responsiveness by giving control back to the browser. • Reduces "jank" in animations and interactions.
  23. Practical Use Cases for scheduler.yield() • Handling Large Data Processing:

    Break up heavy data computations to keep the UI responsive. • Rendering Many Items: Improve performance when loading large lists or grids (e.g., product listings). • Long-Running Loops: Avoid blocking the main thread by yielding during long loops or repeated actions. • Complex Animations: Ensure smoother animations by allowing the browser to catch up with rendering.
  24. Benefits for Performance and User Experience Interaction to Next Paint

    • Improves Responsiveness: Reduces delays during interactions, enhancing user experience. • Prevents UI Freezing: Keeps the page responsive, even during heavy tasks. • Smoother Animations: Minimizes jank, leading to fluid animations. • Optimised INP Scores: Faster response times improve Interaction to Next Paint (INP), boosting performance metrics.
  25. When not to use scheduler.yield() Interaction to Next Paint •

    Small Tasks: Overhead from yielding might outweigh the benefits for quick tasks. • Synchronous Code: Yielding won’t help with purely synchronous code where tasks need to finish immediately. • Overuse: Excessive yielding can lead to too many pauses, causing the main task to take longer than needed.
  26. Key points! Interaction to Next Paint • Prioritise visible UI

    work and defer invisible tasks (like analytics). • Avoid large, complex layouts and reduce layout thrashing. • Use native API’s where possible (dialog, popover, details, view-transitions etc..) • Yield to the main thread before or frequently during expensive functions. • Finish execution faster – improve runtime efficiency, abort previous tasks, and minimise the amount of JS overall.
  27. Part of the Makerstreet network “Make a journey enjoyable enough

    and nobody is that bothered about how long it lasts” Rory Sutherland