skills.rest
oiagorodrigues
oiagorodriguesCOMMUNITY
Explore all skills by this author →
Website𝕏@iagokvGitHub

core-web-vitals

Identify Core Web Vitals metrics and apply optimization patterns for LCP, INP, and CLS.

Updated Mar 29, 2026
Search Tags:#web-performance#core-web-vitals#lcp#frontend-optimization#inp#cls
One-click install
npx skills add https://github.com/oiagorodrigues/qcontabil --skill core-web-vitals-oiagorodrigues
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/oiagorodrigues/qcontabil/tree/main/.cursor/skills/core-web-vitals
Command: npx skills add https://github.com/oiagorodrigues/qcontabil --skill core-web-vitals-oiagorodrigues

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps web teams improve user experience and search ranking by optimizing the three Core Web Vitals (LCP, INP, CLS) across modern web pages, addressing slow load times and layout instability.

Core Features & Use Cases

  • LCP optimization improves largest contentful paint by prioritizing critical resources, inlining critical CSS, and preloading hero assets.
  • INP optimization reduces input delays by deferring non-essential work, splitting tasks, and improving event-handler efficiency.
  • CLS stabilization prevents unexpected layout shifts by reserving space, using aspect ratios, and avoiding layout-changing animations.
  • Use cases include optimizing a marketing homepage, blog posts with hero images, product detail pages, and SPA routes where core metrics drift.

Quick Start

Identify current LCP, INP, and CLS values for your target page and apply the recommended optimizations.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I validate frontend optimization improvements for Core Web Vitals?▼

Validate frontend optimization improvements using CrUX, Lighthouse, or browser analytics. Iterate on applied patterns like code-splitting and resource hints until your LCP, INP, and CLS thresholds are consistently met.

How do I improve Core Web Vitals metrics like LCP, INP, and CLS for my website?▼

To improve Core Web Vitals, establish performance baselines for LCP, INP, and CLS, then apply patterns like critical CSS inline, resource hints, and code-splitting. Validate improvements using CrUX, Lighthouse, or browser analytics until thresholds are consistently met.

What is the best way to optimize Largest Contentful Paint (LCP) on web pages?▼

Optimizing Largest Contentful Paint involves prioritizing critical resources, inlining critical CSS, and preloading hero assets. This ensures the largest visible element renders quickly, addressing slow load times on marketing homepages or blog posts.

How do I fix unexpected layout shifts and reduce CLS on my product pages?▼

To fix unexpected layout shifts and reduce CLS, reserve space for elements using aspect ratios and avoid layout-changing animations. This stabilization prevents visual jumps during page rendering.

Why does my SPA route experience high input delays, and how can I optimize INP?▼

High input delays in SPA routes occur when main threads are blocked. Optimize INP by deferring non-essential work, splitting long tasks, and improving event-handler efficiency to reduce interaction latency.

How do I validate frontend optimization improvements for Core Web Vitals?▼

Validate frontend optimization improvements using CrUX, Lighthouse, or browser analytics. Iterate on applied patterns like code-splitting and resource hints until your LCP, INP, and CLS thresholds are consistently met.

Related Skills

Explore More Software Engineering Skills→
idiaz01idiaz01
3

benchmark

Compare browser metrics, API latency, and build times against stored baselines.

Community
Intermediate
fjavidcrfjavidcr

core-web-vitals

Optimize LCP, INP, and CLS to meet Lighthouse and CrUX performance targets.

Community
Intermediate
johwerjohwer

frontend-performance

Optimize Core Web Vitals and resource loading in React/SPA projects.

Community
Advanced
Sir-chawakornSir-chawakorn
9

optimize-core-web-vitals

Diagnose and remediate Core Web Vitals metrics using Lighthouse audits and performance traces.

Community
Advanced