What problem does it solve? Slow Largest Contentful Paint (LCP) hurts user experience and search rankings, but finding the root cause requires deep performance analysis. This Skill provides a structured workflow to record performance traces, break LCP into its four subparts, identify the bottleneck, and apply targeted fixes. ## Core Features & Use Cases - LCP Subpart Analysis: Breaks LCP into TTFB, resource load delay, resource load duration, and element render delay to pinpoint the exact bottleneck. - Guided Debugging Workflow: Uses Chrome DevTools MCP tools (performance traces, insight analysis, network waterfall inspection, and JavaScript evaluation snippets) in a five-step diagnostic sequence. - Prioritized Optimization Strategies: Provides concrete fixes for each subpart, including fetchpriority hints, preload directives, critical CSS inlining, image format optimization, and CDN caching. - Use Case: A developer notices their landing page's hero image takes 5 seconds to appear. Using this Skill, they record a trace, discover a large resource load delay caused by a lazy-loaded LCP image, remove loading="lazy", add fetchpriority="high", and verify the improvement with a follow-up trace. ## Quick Start Ask the AI to debug why my page's LCP is slow by recording a performance trace and analyzing the LCP breakdown.
