What problem does it solve? Web pages that fail Google's Core Web Vitals thresholds rank lower in search results and deliver poor user experiences, but diagnosing slow LCP, laggy INP, or layout shifts requires deep knowledge of browser rendering behavior. ## Core Features & Use Cases - LCP Optimization: Fix slow server responses, render-blocking resources, and unoptimized hero images using preload hints, fetchpriority, critical CSS inlining, and the Speculation Rules API. - INP Optimization: Break up long tasks with scheduler.yield(), prioritize visual feedback in event handlers, defer third-party scripts, and reduce re-renders in React and Vue. - CLS Optimization: Eliminate layout shifts by reserving space for images, ads, and embeds, matching web font metrics, and using transform-based animations. - Use Case: A developer notices their Next.js landing page scores poorly in Search Console. They use this Skill to identify the LCP element, preload the hero image with fetchpriority="high", inline critical CSS, and add speculation rules for instant navigations. ## Quick Start Analyze my page's Core Web Vitals and fix the LCP, INP, and CLS issues in my hero section and event handlers.
