--- name: web-vitals-analyzer description: >- Analyze and optimize Core Web Vitals (LCP, CLS, INP) and frontend performance. Use when a user asks to improve page speed, fix layout shifts, reduce loading times, analyze Lighthouse reports, optimize bundle size, or improve Google PageSpeed scores. Covers image optimization, code splitting, font loading, render-blocking resources, and JavaScript execution costs. license: Apache-2.0 compatibility: >- Works with any web frontend. Best results with React, Next.js, Vue, Svelte, and static sites. metadata: author: terminal-skills version: 1.0.0 category: development tags: - performance - web-vitals - lighthouse - frontend - lcp --- # 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) - Check: Is there a `` for the LCP resource? - Check: Are render-blocking CSS/JS delaying first paint? - Check: Server response time (TTFB) — if > 800ms, it's a server issue - Check: Font loading strategy — is `font-display: swap` or `optional` used? - Check: Are critical CSS styles inlined or blocking? 3. **Analyze Cumulative Layout Shift (CLS)** — target < 0.1: - Identify elements causing layout shifts (images without dimensions, dynamic content, ads, web fonts) - Check: Do all `` and `

web-vitals-analyzer

Install this skill

Comments