core-web-vitals

Diagnose and reduce LCP, INP, and CLS regressions in web applications.

12|3|Updated Feb 17, 2026

Search Tags:#web performance #core web vitals #lcp #page speed #inp #cls #layout shift

Ready to run

npx skills add https://github.com/RodrigoTomeES/getmcp --skill core-web-vitals-rodrigotomees

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps improve user experience and search visibility by reducing the performance issues that hurt Core Web Vitals scores, especially slow loading, delayed interactions, and unexpected layout shifts.

Core Features & Use Cases

LCP Optimization: Find and fix slow hero content, render-blocking CSS, delayed image loading, and server response bottlenecks.
INP Optimization: Reduce main-thread blocking, expensive event handlers, and third-party script interference that makes pages feel unresponsive.
CLS Optimization: Prevent visual instability by reserving space for images, ads, embeds, and dynamic content.
Use Case: A product page with a slow hero image, heavy client-side rendering, and shifting elements can be audited and improved with targeted recommendations for each metric.

Quick Start

Ask the Skill to review your page and recommend concrete 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 speed for my web application?▼

To fix high LCP and improve page speed, diagnose slow hero content, render-blocking CSS, delayed image loading, and server response bottlenecks. The Skill provides targeted remediation guidance to reduce these Largest Contentful Paint regressions.

Why does my page have layout shift issues and how can I prevent CLS regressions?▼

Layout shift issues happen when space is not reserved for dynamic content. Prevent CLS regressions by reserving dimensions for images, ads, and embeds before they load, ensuring visual stability across your web pages.

What is the best way to reduce INP and main-thread blocking in Next.js or React?▼

The best way to reduce INP in frameworks like Next.js or React is to minimize JavaScript main-thread work, optimize expensive event handlers, and reduce third-party script interference. This makes pages feel highly responsive.

Can I use this to optimize Core Web Vitals across Vue, Nuxt, and Astro projects?▼

Yes, you can optimize Core Web Vitals across Vue, Nuxt, and Astro projects. The Skill applies page-speed, responsiveness, and layout-stability remediation guidance universally across these web frameworks.

What causes delayed interactions on my website and how do I debug INP?▼

Delayed interactions are caused by heavy JavaScript main-thread blocking and expensive event handlers. Debug INP by auditing third-party script interference and optimizing client-side rendering tasks to restore responsiveness.