skills.rest
GregM1991
GregM1991COMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Diagnose and optimize LCP, INP, and CLS using field data and browser traces.

Updated Apr 28, 2026
Search Tags:#performance optimization#web performance#core web vitals#lcp#inp#cls#crux
One-click install
npx skills add https://github.com/GregM1991/skills --skill core-web-vitals-gregm1991
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/GregM1991/skills/tree/main/skills/vendor/addyosmani/core-web-vitals
Command: npx skills add https://github.com/GregM1991/skills --skill core-web-vitals-gregm1991

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web pages often fail Google's Core Web Vitals thresholds, hurting page experience and search rankings, and developers struggle to identify whether the root cause is slow server response, render-blocking resources, long main-thread tasks, or unexpected layout shifts. ## Core Features & Use Cases - Metric-specific diagnosis: Provides targeted optimization guidance for LCP (loading), INP (interactivity), and CLS (visual stability) with p75 thresholds and checklists. - Evidence-driven workflow: Directs measurement through CrUX field data, Chrome DevTools performance traces, and first-party RUM before and after fixes. - Framework quick fixes: Includes ready patterns for Next.js, React, Vue/Nuxt, and Astro, such as priority images, dynamic imports, and dimension reservation. - Use Case: A developer sees poor INP in Search Console, uses this Skill to trace the slow interaction, identifies a long task blocking the main thread, and applies scheduler.yield() chunking to fix it. ## Quick Start Ask the assistant to analyze your page's Core Web Vitals and fix the failing LCP, INP, or CLS metric using trace and field data.

Frequently Asked Questions about core-web-vitals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve LCP on my website?▼

Improve LCP by reducing TTFB below 800ms with CDN or edge caching, making the LCP image discoverable in initial HTML with fetchpriority="high", inlining critical CSS, and avoiding client-side rendering of the LCP element. Measure with a browser trace before and after each fix.

How to fix poor INP scores in field data?▼

Fix poor INP by first identifying whether input delay, processing time, or presentation delay dominates using a performance trace. Then split long tasks with scheduler.yield(), defer nonessential third-party scripts, and provide visible feedback before deferred work.

What causes high CLS and how do I reduce it?▼

High CLS is caused by images without dimensions, dynamically injected content above the viewport, font swaps, and layout-triggering animations. Reserve space with width/height attributes or aspect-ratio, use stable containers for dynamic content, and animate with transform and opacity.

Does this work with Next.js and React frameworks?▼

Yes, the Skill includes framework-specific patterns for Next.js, React, Vue/Nuxt, and Astro. Examples include next/image with priority for LCP, useTransition and dynamic imports for INP, and automatic dimension handling for CLS.

Why should I not compare lab metrics directly with CrUX field data?▼

Lab measurements capture a single controlled session while CrUX reports the 75th percentile of real user visits, so they are not equivalent samples. Field improvement can only be claimed after new RUM or CrUX visits accumulate following a fix.

Related Skills

Explore More Software Engineering Skills→
AradotsoAradotso
7

chrome-devtools-mcp-automation

Automate Chrome browser navigation, debugging, and performance analysis via MCP.

Official
Advanced
lwokeraylwokeray

marketing-performance-report

Generates marketing performance reports with KPI scorecards, funnel analysis, and attribution from Excel and SharePoint data.

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

best-practices

Audit web code for security, compatibility, and quality issues.

Community
Intermediate
ngxtmngxtm

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Community
Intermediate