Core Web Vitals

What it does

This skill enables AI agents to analyze and optimize Core Web Vitals, specifically focusing on Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). It helps identify performance bottlenecks in frontend code to ensure faster load times and a more stable user experience.

When to use it

• Diagnosing why a website fails Google's PageSpeed Insights thresholds.
• Optimizing critical rendering paths for better mobile performance.
• Reducing layout shifts caused by dynamic content or missing image dimensions.
• Preparing a site for SEO ranking improvements based on user experience metrics.

Key capabilities

• LCP Analysis: Identifies slow-loading resources like images, fonts, and large text blocks that delay the main content from rendering.
• FID Optimization: Pinpoints JavaScript execution blocking the main thread, which delays user interaction responses.
• CLS Detection: Locates elements causing unexpected layout shifts by analyzing missing metadata or dynamic content injection points.
• Automated Reporting: Generates specific recommendations for code changes to improve these three critical metrics.

Example prompts

• "Analyze this React component and suggest changes to improve its Largest Contentful Paint score."
• "Identify the JavaScript functions causing high First Input Delay in this bundle and propose lazy loading strategies."
• "Find all elements contributing to Cumulative Layout Shift on this landing page and fix their sizing issues."

Tips & gotchas

Ensure you have access to the actual source code or a live URL, as the skill cannot analyze a site without its assets. While it focuses heavily on LCP, FID, and CLS, remember that these metrics are part of a broader performance picture including TTI (Time to Interactive) and network conditions.