What problem does it solve? Web pages that fail Google's Core Web Vitals thresholds rank lower in search results and deliver poor user experience, but identifying and fixing LCP, INP, and CLS issues requires deep knowledge of rendering, networking, and JavaScript execution. ## Core Features & Use Cases - LCP Optimization: Diagnose slow server responses, render-blocking resources, and unoptimized hero images, with fixes like preloading, fetchpriority, and critical CSS inlining. - INP Optimization: Break up long tasks, defer heavy event handler work, and reduce main-thread blocking to keep interactions under 200ms. - CLS Optimization: Eliminate layout shifts by reserving space for images, embeds, and ads, and by using transform-based animations and font metric overrides. - Use Case: A Next.js site has a 4.5s LCP and failing Search Console report. Use this Skill to identify the LCP element, preload the hero image with fetchpriority="high", inline critical CSS, and verify the fix with the web-vitals library. ## Quick Start Analyze my page's Core Web Vitals and fix the LCP and CLS issues in my Next.js hero section.
