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.

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. linkedin.com/in/sandervansurksum
4. 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
5. Great brands and organisations A selection of our clients where web performance is top of mind
6. Part of the Makerstreet network Introduction to INP
7. What is INP? Responsiveness
8. Interaction to Next Paint (INP) measures how long it takes for the browser to visually update after a user interaction.
9. 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
10. Why a good INP matters Performance metrics ”Over 90% of user time spent on a page is after the load.” 90%
11. 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.
12. INP Interaction to Next Paint
13. What's in an interaction? Interaction to Next Paint
14. 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.
15. 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.
16. 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.
17. What interactions does INP measure? Interaction to Next Paint It starts with a user interaction.
18. What interactions does INP measure? Interaction to Next Paint It starts with a user interaction. Clicking with a mouse
19. 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
20. 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
21. 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.
22. Demo Time Responsiveness
23. https://inp-demo.netlify.app/
24. Part of the Makerstreet network Why It Matters Responsiveness
25. Amazon Best Sellers
26. It’s important to remember that measured performance and perceived performance do not always align Ilya Grigorik
27. 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*.”
28. INP for mobile has a *stronger* correlation with business metrics than INP for desktop https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/
29. https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/
30. 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
31. 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
32. 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%
33. Part of the Makerstreet network Debugging Slow Interactions
34. 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.
36. Part of the Makerstreet network Identifying Culprits
40. Part of the Makerstreet network Yield Patterns
42. What is scheduler.yield()? Yield!
43. 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).
44. 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.
47. 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.
49. Demo Time Responsiveness
50. 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.
51. 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.
54. Part of the Makerstreet network Best Practices
55. 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.
56. Part of the Makerstreet network “Make a journey enjoyable enough and nobody is that bothered about how long it lasts” Rory Sutherland
57. Let’s <br/> the boundaries of page speed Thanks Smooth site, Strong performance!