skills.rest
SonPaier
SonPaierCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

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
One-click install
npx skills add https://github.com/SonPaier/carfect --skill core-web-vitals-sonpaier
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
AkaraChenAkaraChen
270

optimize

Diagnoses and fixes UI performance bottlenecks in web and mobile apps.

Community
Advanced
racciolyraccioly

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.

Community
Advanced
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced
carayacaraya
1

javascript-performance

Analyze JavaScript performance with profiling, memory analysis, and event loop diagnostics.

Community
Advanced