Understanding and Optimising INP

Transcript

1. Understanding and Optimising INP (Interaction to Next Paint) AKSHAY SHARMA Senior Software Engineer @Apollo 24|7 @sharma_akshayy | www.akshaysharma.vercel.app
2. Chrome DevTools Optimizing INP with Chrome DevTools Agenda Google Core Web Vitals What is Interaction to Next Paint (INP) How Interaction to Next Paint measured? What is Input delay What is Processing Time What is Presentation Delay Use Chrome devtool to identify INP Minimising main thread of JS Common misconception about INP
3. Google Core Web Vitals 1 Largest Contentful Paint (LCP) Measures the time it takes for the largest content element above the fold to become visible. 2 Cumulative Layout Shift (CLS) Measures the visual stability of a webpage during loading. 3 Interaction to Next Paint (INP) Measures the responsiveness of a webpage to user interactions.
4. What is Interaction to Next Paint (INP)? INP measures how long it takes for a user to interact with a webpage and for the browser to respond with new visual content. User Experience INP directly impacts user experience. Google Ranking Google uses INP as a factor in ranking web pages.
5. How INP measured INP can be measured through various tools, including the Chrome DevTools. 1 Input delay waiting for background tasks on the page that prevent the event handler from running 2 Processing time running event handlers in JavaScript 3 Presentation delay handling other queued up interactions, recalculating the page layout, and painting page content
6. Input Delay Main Thread Congestion If the main thread is busy executing long-running JavaScript tasks, it can't immediately respond to user input. Third-party Scripts Scripts from third-party sources (like analytics or ads) can introduce delays if they're not optimised or are blocking. Hardware Limitations On less powerful devices, input delay can be longer due to limited processing capabilities.
7. Processing Time and Presentation Delay Processing Time Complexity of event handlers Complex DOM tree structures Presentation Delay Time taken for layout calculations
8. Minimising the Main Thread Minimize JS code size Code splitting and Lazy loading Non-UI JavaScript operations Web Workers & Service workers Rate Limiter Debounce and Throttle
9. Chrome Devtool to identify INP Demo
10. Common Misconceptions about INP Only Interactive Elements Affect INP Only Your Own Website Code Impacts INP A single slow interaction ruins your INP score: It uses a percentile approach, typically reporting the 75th percentile of interaction latencies.