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

Diagnosing INP & Breaking down long tasks

Nishu Goel
November 02, 2023

Diagnosing INP & Breaking down long tasks

Explores the pending Core Web Vital, Interaction to Next Paint that replaces FID in 2024 and diagnose it to solve pains with annoying long tasks in the browser, also using the Long Animation Frames API.

Nishu Goel

November 02, 2023
Tweet

More Decks by Nishu Goel

Other Decks in Programming

Transcript

  1. What to record? • INP value • Responsible element selector

    • Loading state at the point • Interaction start time • Event type (tap, click, keyboard event)
  2. Not great INP value! RUM provider showed the bad INP

    value, but not the interaction causing it.
  3. Cannot use extensions? Mobile device? let worstInp = 0; const

    observer = new PerformanceObserver((list, obs, options) => { for (let entry of list.getEntries()) { if (!entry.interactionId) continue; entry.renderTime = entry.startTime + entry.duration; worstInp = Math.max(entry.duration, worstInp); console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options); } }); observer.observe({ type: 'event', durationThreshold: 0, // 16 minimum by spec buffered: true });
  4. Forced reflows – CSS selector complexity .box:nth-last-child(-n+1) .title { /*

    styles */ } https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calculations
  5. Long tasks API • Tells you a long task happened

    and took this long, but doesn't tell what might have caused it. – Basic attribution model • Doesn't count the rendering updates time, happens in a different task.
  6. • Name • Event type • Timing data • Window

    attribution etc. Better attribution https://developer.chrome.com/articles/long-animation-frames/
  7. Quick recap: • INP – pending CWV for March 2024

    • Gives good attribution data to diagnose • Leads you to measure field data using web vitals JS library for example • We should then use lab tools to reproduce the slowness • Understanding delays in the browser • Strategies to fix the main thread blocking.