core-web-vitals

Diagnoses and fixes LCP, INP, and CLS performance bottlenecks in web applications.

59|14|Updated Mar 10, 2026

Search Tags:#web-performance #core-web-vitals #lcp #frontend-optimization #inp #cls

Ready to run

npx skills add https://github.com/guilhermemarketing/esc-skills --skill core-web-vitals-guilhermemarketing

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Optimize Core Web Vitals (LCP, INP, CLS) to improve page experience and search ranking.

Core Features & Use Cases

LCP optimization to reduce loading times by prioritizing critical resources and preloading assets.
INP improvements by minimizing main-thread work and optimizing interaction timing.
CLS stabilization through dimensioning placeholders, reserved space, and font-display strategies.

Quick Start

When asked to improve Core Web Vitals, apply LCP, INP, and CLS optimizations and present a prioritized action plan.

Frequently Asked Questions about core-web-vitals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize Core Web Vitals to improve search rankings?▼

Optimize Core Web Vitals by applying a structured workflow to diagnose and fix LCP, INP, and CLS bottlenecks. This improves page experience and search rankings through framework-agnostic guidelines and enforced performance thresholds.

What is the best way to reduce LCP loading times?▼

Reduce LCP loading times by prioritizing critical resources and preloading assets. This workflow targets server response and resource loading bottlenecks to ensure faster page rendering and meet LCP thresholds.

How do I fix high INP scores and interaction delays?▼

Fix high INP scores by minimizing main-thread work and optimizing interaction timing. The workflow provides framework-agnostic guidelines to reduce main-thread bottlenecks and ensure deterministic interaction improvements.

Why does my page layout shift and how do I stabilize CLS?▼

Stabilize CLS by dimensioning placeholders, reserving space for assets, and applying font-display strategies. This prevents layout shifts and ensures stable page rendering across server response and resource loading.

Can I use these web performance optimizations with any frontend framework?▼

Yes, you can apply these web performance optimizations with any frontend framework. The workflow provides framework-agnostic guidelines to diagnose and fix LCP, INP, and CLS bottlenecks deterministically.

What should a Core Web Vitals action plan include?▼

A Core Web Vitals action plan should include a prioritized workflow for diagnosing and fixing performance bottlenecks across server response, resource loading, and layout stability. It enforces thresholds and references for deterministic improvements.