Web Vitals Analyzer

Overview

Diagnoses Core Web Vitals failures and frontend performance issues by analyzing page structure, resource loading patterns, JavaScript bundle composition, and rendering behavior. Produces prioritized fixes with estimated metric improvements.

Instructions

When asked to optimize frontend performance or Core Web Vitals:

1. Gather the current state — ask for or analyze:

   • Lighthouse report (JSON or screenshot)
   • The page URL or source code (HTML, CSS, JS entry points)
   • Framework used (React, Next.js, Vue, vanilla, etc.)
   • Current LCP, CLS, and INP values if available

2. Analyze Largest Contentful Paint (LCP) — target < 2.5s:

   • Identify the LCP element (usually hero image, heading, or above-fold content)
   • Check: Is the LCP image lazy-loaded? (it shouldn't be)