core-web-vitals

Analyze websites and suggest fixes for LCP, INP, and CLS issues.

Updated Jun 21, 2026
One-click install
npx skills add https://github.com/Bonny94ITA/BottegaWeb --skill core-web-vitals-bonny94ita
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/Bonny94ITA/BottegaWeb/tree/main/.claude/skills/core-web-vitals
Command: npx skills add https://github.com/Bonny94ITA/BottegaWeb --skill core-web-vitals-bonny94ita

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires web-vitals, next/image, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit addresses common performance issues related to Core Web Vitals, which are essential for enhancing user experience and improving search engine rankings.

Core Features & Use Cases

  • LCP Optimization: Identify and fix the Largest Contentful Paint (LCP) issues that affect load times.
  • INP Improvement: Ensure interactive elements respond swiftly with Interactive to Next Paint (INP) enhancements.
  • CLS Mitigation: Reduce Cumulative Layout Shift (CLS) for smoother visual transitions.
  • Use Cases: Suited for any site looking to meet Core Web Vitals metrics, critical for SEO and user retention.

Quick Start

Run the core-web-vitals skill on your website to analyze and optimize LCP, INP, and CLS performance.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP, INP, and CLS for better SEO?

Optimize Core Web Vitals by identifying and fixing Largest Contentful Paint, Interactive to Next Paint, and Cumulative Layout Shift issues. This improves page performance, search rankings, and user retention for frontend developers and SEO specialists.

Why does my website have a poor Largest Contentful Paint score?

A poor Largest Contentful Paint score stems from slow load times affecting page performance. Analyzing Core Web Vitals identifies these LCP issues and suggests fixes to enhance user experience and search engine compliance.

How do I reduce Cumulative Layout Shift to stop visual elements from moving?

Reduce Cumulative Layout Shift by mitigating layout instabilities for smoother visual transitions. Analyzing CLS issues ensures your website meets Core Web Vitals requirements for enhanced user experience.

Does Next.js image optimization help fix Core Web Vitals metrics?

Next.js image optimization helps fix Core Web Vitals metrics by improving load times. Using web-vitals and next/image dependencies identifies and resolves LCP, INP, and CLS issues for better SEO performance.

What's the best way to fix Interactive to Next Paint delays on my site?

Fix Interactive to Next Paint delays by ensuring interactive elements respond swiftly. Improving INP performance resolves Core Web Vitals issues, enhancing website user experience and compliance with search engine requirements.

Can I use web-vitals to analyze frontend performance for SEO compliance?

You can use web-vitals to analyze frontend performance and ensure SEO compliance. It identifies specific Core Web Vitals issues like LCP, CLS, and INP, providing optimization fixes for webmasters and frontend developers.