frontend-perf-core-web-vitals-inp

name	frontend-perf-core-web-vitals-inp
description	Use when measuring or improving Core Web Vitals (LCP, INP, CLS) at the 75th-percentile field-data bar, diagnosing why an interaction misses the 200 ms INP budget, picking a yielding strategy to break up a long task, prioritising the hero image with fetchpriority and preload, preventing cumulative layout shift on late-loading images, embeds, ads, or webfont swap, attributing a frame to a specific event handler via the LongAnimationFrame API, or wiring up Speculation Rules prefetch / prerender while protecting destructive URLs like sign-out and add-to-cart. Prevents the most common 2026 performance regressions : an LCP image marked loading lazy that defers past first paint, an image without explicit width and height that reflows content as it loads, a 350 ms synchronous loop inside a click handler that misses the INP budget, requestAnimationFrame mis-used as a generic yield that keeps the frame busy through paint, font-display block that produces a three-second invisible text period, content-visibility auto without contain-intrinsic-size that collapses off-screen rows to zero height and jitters the scrollbar, naive Speculation Rules that prerender /logout or ?add-to-cart and silently trigger side effects, eagerness left at the default conservative on a where rule when the author expected moderate hover-trigger, and the assumption that scheduler yield is Baseline when Firefox and Safari still lack it. Covers the binding 2026 thresholds (LCP 2 5 s good, 4 0 s poor ; INP 200 ms good, 500 ms poor and replacing FID since March 2024 ; CLS 0 1 good, 0 25 poor), the three INP phases (input delay, processing duration, presentation delay), the yield ladder (scheduler yield > scheduler postTask > setTimeout 0 > requestIdleCallback > requestAnimationFrame for INP work), the LongAnimationFrame API with PerformanceScriptTiming attribution, the full PerformanceObserver entry-type surface (event, long-animation-frame, largest-contentful-paint, layout-shift, longtask, first-input), LCP tactics (fetchpriority high on hero, preload with imagesrcset, font-display swap with size-adjust ascent-override descent-override, defer non-critical JS, 103 Early Hints), CLS prevention (width and height attrs, aspect-ratio CSS, reserved min-height for ads and embeds, matched fallback fonts), the Speculation Rules API JSON shape, the four eagerness values (immediate, eager, moderate, conservative) with their triggers and defaults, the destructive-URL exclusion pattern, and the rule that all three core vitals must pass at the 75th percentile across mobile and desktop. Keywords: Core Web Vitals, LCP, INP, CLS, fetchpriority, preload, loading lazy, content-visibility, contain-intrinsic-size, aspect-ratio, scheduler yield, scheduler postTask, setTimeout, requestIdleCallback, requestAnimationFrame, LongAnimationFrame, PerformanceObserver, PerformanceScriptTiming, LargestContentfulPaint, LayoutShift, Speculation Rules, prerender, prefetch, eagerness, immediate, moderate, conservative, isInputPending, font-display, size-adjust, ascent-override, descent-override, 103 Early Hints, Save-Data, slow LCP, layout shift, INP regression, slow tap response, page jank, hero image renders late, webfont flash, click lag, scrollbar jitter, off-screen list jank, how to improve LCP, what is INP, how to fix layout shift, why is my site slow, speed up first contentful paint, how to lazy load images, how to prerender next page, what eagerness should I pick
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend Perf : Core Web Vitals + INP

This skill is the operational reference for measuring and improving the 2026 Core Web Vitals (LCP, INP, CLS), with deep coverage of INP since it replaced FID as a Core Web Vital in March 2024. It covers the binding 75th-percentile thresholds, the three INP phases, the yielding ladder, LCP and CLS tactics, the LongAnimationFrame attribution surface, and the Speculation Rules API folded in per D-R10 because it is Chromium-only Limited Availability. The skill does NOT cover animation-specific performance (see [[frontend-perf-animation-gpu-containment]]), CSS containment for layout / paint / size isolation, or RUM tool integration (Datadog, Cloudflare, Vercel).

Quick Reference

Floor rules

• ALWAYS set fetchpriority="high" on the LCP <img> AND give it explicit width / height attributes. NEVER use loading="lazy" on the LCP image.
• ALWAYS reserve space for late-loading content : width and height on images and iframes, aspect-ratio for fluid embeds, min-height for ad and embed slots. NEVER let a late asset push existing content downward.
• ALWAYS break long synchronous work in event handlers with await scheduler.yield() plus a setTimeout(_, 0) fallback. NEVER ship a single >50 ms synchronous task on the main thread on a critical interaction path.
• ALWAYS apply the visual update FIRST in an event handler, then defer compute past the paint via requestAnimationFrame(() => setTimeout(work, 0)). NEVER do heavy compute before the DOM update : the user sees a slow tap response.
• ALWAYS feature-detect scheduler.yield() and Speculation Rules. NEVER assume Baseline ; both are Limited Availability (Chromium-only) as of 2026-05-19.
• ALWAYS use font-display: swap with size-adjust / ascent-override / descent-override on a matched fallback. NEVER use font-display: block (three-second invisible text period kills LCP).
• ALWAYS exclude destructive URLs from Speculation Rules (/logout, ?add-to-cart=, [rel~=nofollow], sign-in flows, OTP submission, ad-conversion endpoints). NEVER ship a blanket where: { href_matches: "/*" } prerender rule without a not clause for side-effecting paths.
• ALWAYS pair with . NEVER use alone ; off-screen children collapse to zero and the scrollbar jitters.