What problem does it solve? Web pages that fail Google's Core Web Vitals thresholds rank lower in search and frustrate users with slow loading, laggy interactions, and shifting layouts. This Skill provides targeted diagnosis and concrete code-level fixes for each of the three metrics. ## Core Features & Use Cases - LCP Optimization: Fix slow server response, render-blocking resources, unoptimized hero images, and client-side rendering delays using preloading, fetchpriority, critical CSS, and SSR/SSG patterns. - INP Optimization: Break up long tasks with scheduler.yield(), prioritize visual feedback in event handlers, defer third-party scripts, and reduce framework re-renders. - CLS Optimization: Reserve space for images, ads, and embeds with dimensions and aspect-ratio, prevent font-swap shifts, and use transform-based animations. - Use Case: A Next.js site scores poorly in Search Console. Use this Skill to identify the LCP element, preload it with fetchpriority="high", memoize expensive React components to fix INP, and add aspect-ratio to images to eliminate CLS. ## Quick Start Analyze my page's Core Web Vitals and give me concrete fixes to improve LCP, INP, and CLS scores.
