core-web-vitals

Name: core-web-vitals
Availability: InStock
Author: sonpaier

Diagnose and fix LCP, INP, and CLS issues with code-level solutions.

Updated Aug 23, 2026

Search Tags:#performance #frontend #web vitals #optimization #LCP #CLS #INP

Ready to run

npx skills add https://github.com/SonPaier/carfect --skill core-web-vitals-sonpaier

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/SonPaier/carfect/tree/main/.claude/skills/core-web-vitals
Command: npx skills add https://github.com/SonPaier/carfect --skill core-web-vitals-sonpaier

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you identify and fix issues that negatively impact your website's performance, specifically focusing on Core Web Vitals (LCP, INP, CLS), which are crucial for user experience and search engine rankings.

Core Features & Use Cases

Diagnose Performance Bottlenecks: Understand the causes behind slow loading times, poor interactivity, and layout shifts.
Optimize Key Metrics: Provides actionable steps and code examples to improve Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Use Case: A user asks to "improve Core Web Vitals" for their e-commerce site. This Skill can analyze the current performance, identify that large images are causing a high LCP, and provide code snippets to optimize image loading and preloading.

Quick Start

Use the core-web-vitals skill to optimize the LCP for the homepage.

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 Core Web Vitals for my website?▼

To improve Core Web Vitals, you must diagnose and optimize loading speed, interactivity, and visual stability. This involves addressing LCP, INP, and CLS metrics through targeted code-level solutions to enhance user experience and search engine rankings.

What causes a high Largest Contentful Paint score and how can I fix it?▼

A high LCP score is often caused by large, unoptimized images slowing down loading speed. You can fix LCP by implementing image optimization, preloading critical assets, and removing render-blocking resources to improve website performance.

Why does my webpage have poor Interaction to Next Paint metrics?▼

Poor INP metrics happen when heavy JavaScript execution delays user input responsiveness. You can optimize INP by breaking up long tasks, reducing script execution time, and improving interactivity to ensure immediate visual feedback for users.

How do I stop Cumulative Layout Shift on my frontend?▼

To stop Cumulative Layout Shift, you must identify and fix elements moving during page load. Prevent CLS by specifying width and height dimensions for media, and reserving space for dynamic content to maintain visual stability.

Can I use frontend optimization techniques for an e-commerce site?▼

Yes, frontend performance optimization is highly effective for e-commerce sites. Diagnosing bottlenecks and applying code solutions for metrics like LCP directly enhances user experience, which improves search engine rankings and conversion rates.