core-web-vitals

Diagnose and fix LCP, INP, and CLS issues across React, Next.js, Vue, Nuxt, and Astro sites.

Updated Feb 15, 2026

Search Tags:#performance optimization #core web vitals #frontend debugging #lcp #page experience #inp #cls

Ready to run

npx skills add https://github.com/ricable/mcai --skill core-web-vitals-ricable

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/ricable/mcai/tree/main/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/ricable/mcai --skill core-web-vitals-ricable

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and fix the loading, responsiveness, and visual stability issues that hurt user experience, conversion rates, and search visibility.

Core Features & Use Cases

LCP Optimization: Improve the time it takes for the main content to appear by reducing server latency, preloading critical assets, and removing render-blocking resources.
INP Optimization: Make pages feel faster by shortening long tasks, streamlining event handlers, and reducing main-thread contention.
CLS Prevention: Eliminate unexpected layout shifts by reserving space for media, stabilizing fonts, and avoiding layout-changing animations.
Use Case: Use this Skill when a product page is slow to load, a dashboard feels laggy after clicks, or content jumps around during rendering.

Quick Start

Ask for a Core Web Vitals audit of your page and request prioritized fixes for LCP, INP, and CLS.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema

How do I fix a high LCP and improve page loading speed?▼

To fix a high LCP, reduce server latency, preload critical assets, and remove render-blocking resources. This optimization improves the time it takes for main page content to appear during frontend audits.

What is the best way to reduce INP and make my web page feel faster?▼

Reducing INP requires shortening long tasks, streamlining event handlers, and minimizing main-thread contention. This responsiveness optimization makes page interactions feel faster by addressing event handler delays.

Why does my page content jump around during rendering and how do I prevent it?▼

Content jumps during rendering due to unexpected layout shifts. Prevent CLS by reserving space for media dimensions, stabilizing font loading, and avoiding layout-changing animations to ensure visual stability.

Does this Core Web Vitals optimization approach work with Next.js and Astro?▼

Yes, this Core Web Vitals optimization applies to Next.js and Astro sites, alongside React, Vue, and Nuxt. It supports frontend debugging workflows across these frameworks to resolve page experience regressions.

How do I perform a Core Web Vitals audit for my website?▼

Perform a Core Web Vitals audit by requesting an evaluation of your page's LCP, INP, and CLS metrics. The audit outputs prioritized fixes for loading, responsiveness, and visual stability issues.