Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding and Optimising INP

Akshay Sharma
September 27, 2024

Understanding and Optimising INP

Akshay Sharma

September 27, 2024
Tweet

Other Decks in Technology

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. 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.