Back to Skills

core-web-vitals

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

1,817stars155forksUpdated 4/28/2026

Security Assessment

Safe(100/100)
Security Score100/100

About core-web-vitals

The core-web-vitals skill helps optimize the three Core Web Vitals metrics that directly influence a website's user experience and Google Search ranking. These metrics—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—are critical for achieving better performance and a smoother browsing experience. This skill focuses on enhancing each of these metrics, addressing common issues such as slow server response, render-blocking resources, and excessive layout shifts, ultimately improving page loading times and interactivity.

FAQ

How does the core-web-vitals skill improve my website's performance?

This skill targets the optimization of LCP, INP, and CLS, which are key metrics for Google Search ranking and user experience. By addressing issues like slow server response, render-blocking resources, and layout shifts, it ensures your site loads quickly and interacts smoothly, leading to a better user experience.

Is this skill compatible with all websites?

Yes, the core-web-vitals skill can be applied to any website that needs optimization of LCP, INP, and CLS. However, the effectiveness of the optimizations may vary depending on the existing site architecture and technologies used.

What are the main optimizations suggested by this skill?

Main optimizations include reducing Time to First Byte (TTFB), preloading key images, inlining critical CSS, deferring non-essential JavaScript, and optimizing interactivity through efficient task management on the main thread.

All Files

2 files
references/LCP.md4.2 KB
View
SKILL.md11.3 KB
View

Install core-web-vitals

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill