core-web-vitals

Optimize Core Web Vitals LCP, INP, and CLS with checklists and debugging strategies.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/ofelixdev/cc-kit --skill core-web-vitals-ofelixdev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/ofelixdev/cc-kit/tree/main/template/skills/core-web-vitals
Command: npx skills add https://github.com/ofelixdev/cc-kit --skill core-web-vitals-ofelixdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the critical need to optimize Core Web Vitals (LCP, INP, CLS), directly impacting user experience, engagement, and search engine rankings by identifying and resolving performance bottlenecks.

Core Features & Use Cases

  • LCP Optimization: Identifies and resolves issues with Largest Contentful Paint, such as slow server response times, render-blocking resources, and slow resource loading.
  • INP Optimization: Improves Interactivity to Next Paint by addressing long tasks, heavy event handlers, and third-party script impacts.
  • CLS Optimization: Minimizes Cumulative Layout Shifts caused by images without dimensions, ads, dynamically injected content, and font loading.
  • Use Case: A website owner wants to improve their Google Search Console Core Web Vitals report. This skill provides actionable steps and code examples to fix LCP, INP, and CLS issues.

Quick Start

Use the core-web-vitals skill to optimize the Largest Contentful Paint for the website.

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 LCP, INP, and CLS scores for better search ranking?

Optimize Core Web Vitals by fixing slow server response and render-blocking resources for LCP, breaking up long tasks for INP, and setting image dimensions to prevent layout shifts for CLS.

Why does my page have a poor Interactivity to Next Paint score?

A poor INP score is typically caused by long tasks, heavy event handlers, and third-party script impacts that delay the browser's ability to respond quickly to user interactions.

How do I fix Cumulative Layout Shift caused by dynamically injected content?

Fix Cumulative Layout Shift by reserving space for dynamically injected content, ads, and images without dimensions, and by properly managing web font loading to prevent visual instability.

What is the best way to identify render-blocking resources affecting Largest Contentful Paint?

The best way to identify render-blocking resources affecting Largest Contentful Paint is to use measurement tools to audit loading performance and isolate slow server response times and slow resource loading.

Can I get framework-specific quick fixes for Core Web Vitals optimization?

Yes, you can access framework-specific quick fixes and detailed optimization checklists to resolve loading performance, interactivity, and visual stability issues across different development environments.