core-web-vitals

Optimize Core Web Vitals by improving LCP, INP, and CLS metrics.

1|Updated Apr 13, 2026
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill core-web-vitals-yahav123147
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/core-web-vitals
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill core-web-vitals-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Core Web Vitals optimization fixes slow loading, unresponsive interactions, and visual layout shifts that hurt user experience and search performance.

Core Features & Use Cases

  • LCP optimization: Identify the largest content element, reduce TTFB, preload critical media, inline critical CSS, and ensure the LCP element is present in the initial HTML.
  • INP optimization: Reduce main-thread blocking, optimize long tasks and heavy event handlers, and prevent third-party scripts from degrading responsiveness.
  • CLS optimization: Eliminate unexpected layout shifts by reserving space for images, ads/iframes, and embeds, and by preventing font and injected-content shifts.

Use cases include improving “page experience” in SEO, speeding up landing pages for ads/CRO, and debugging performance regressions on modern frameworks.

Quick Start

Optimize my website for Core Web Vitals by improving LCP, INP, and CLS, and then provide a prioritized checklist of the most likely causes for each metric based on my current stack and page layout.

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 better SEO and user experience?

Improve Core Web Vitals by mapping LCP, INP, and CLS metrics to actionable causes. This involves reducing TTFB for LCP, minimizing main-thread blocking for INP, and reserving space for dynamic elements to prevent CLS.

What's the best way to reduce Largest Contentful Paint (LCP) time?

Reduce LCP time by lowering TTFB, preloading critical media, inlining critical CSS, and ensuring the LCP element is present in the initial HTML response for faster rendering.

How do I fix high Interaction to Next Paint (INP) caused by main-thread blocking?

Fix high INP by minimizing main-thread blocking, optimizing long tasks, deferring heavy event handlers, and preventing third-party scripts from degrading page responsiveness.

How can I prevent Cumulative Layout Shift (CLS) on web pages?

Prevent CLS by reserving space for images, ads, and iframes, and by stopping font or injected-content shifts. This eliminates unexpected visual layout shifts during page load.

Can I debug Core Web Vitals performance regressions on modern web frameworks?

Yes, you can debug performance regressions by mapping metrics to actionable causes. It provides implementation patterns and debugging methods for LCP, INP, and CLS tailored to your current stack.

When do I need to optimize Core Web Vitals for landing pages?

Optimize Core Web Vitals when improving page experience for SEO, speeding up landing pages for ads and CRO, or fixing slow loading and unresponsive interactions that hurt user experience.