Core Web Vitals

What it does

This skill analyzes your frontend codebase to assess Core Web Vitals performance, providing insights for optimization and improved user experience. It focuses on three key metrics – Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) – which directly impact Google Search ranking. The analysis considers the 75th percentile of page visits as a benchmark for good performance, aligning with how Google measures these metrics.

When to use it

• You want to improve your website's Google Search ranking.
• You’re experiencing user experience issues related to slow loading times or visual instability.
• You need to identify and address specific bottlenecks affecting LCP, INP, or CLS performance.
• You are performing a frontend audit and want data-driven insights for optimization.

Key capabilities

• Core Web Vitals Analysis: Evaluates LCP, INP, and CLS metrics.
• Metric Thresholds: Provides clear "Good," "Needs Work," and "Poor" classifications based on established thresholds.
• Issue Identification: Highlights common issues impacting LCP (e.g., slow server response, render-blocking resources, slow resource load times, client-side rendering delays).
• Optimization Suggestions: Offers potential fixes for identified LCP problems, such as using CDNs, inlining critical CSS, preloading resources, and implementing server-side or static rendering.

Example prompts

• "Analyze the Core Web Vitals performance of my frontend codebase."
• "What are the common issues affecting Largest Contentful Paint (LCP)?"
• "Suggest optimizations for Cumulative Layout Shift (CLS)."

Tips & gotchas

• The skill focuses specifically on Core Web Vitals and doesn’t cover other aspects of website performance.
• Google measures these metrics at the 75th percentile, so ensure your optimization efforts address this benchmark.
• Pay attention to the provided checklists for LCP optimization – implementing suggested changes can significantly improve performance.