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.

The three metrics are scored at the 75th percentile of real user visits. Google treats them as good when LCP is 2.5 s or less, CLS is 0.1 or less, and INP is 200 ms or less. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Lighthouse runs a single lab load and cannot measure INP directly, so field data (Chrome UX Report, PageSpeed Insights "Discover what your real users experience") decides pass or fail.

Instructions

When asked to optimize frontend performance or Core Web Vitals:

1. Gather the current state — ask for or analyze:
   • Field values from PageSpeed Insights or the Chrome UX Report for the URL, if the site has enough traffic. These are the numbers that count.
   • Lighthouse report (JSON or screenshot). A lab run from the CLI: npx lighthouse https://terminalskills.io --only-categories=performance --output=json --output-path=./lighthouse.json (Lighthouse 13.x needs a local Chrome)
   • 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