skills.rest
rodrigotoledo
rodrigotoledoCOMMUNITY
Explore all skills by this author →
Website𝕏@foolkgsGitHub

core-web-vitals

Optimize LCP, INP, and CLS metrics using web-vitals and Lighthouse.

Updated Jun 18, 2026
Search Tags:#web-performance#core-web-vitals#lcp#frontend-optimization#inp#cls
One-click install
npx skills add https://github.com/rodrigotoledo/trading-exchange --skill core-web-vitals-rodrigotoledo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/rodrigotoledo/trading-exchange/tree/main/packages/skills-catalog/skills/%28performance%29/core-web-vitals
Command: npx skills add https://github.com/rodrigotoledo/trading-exchange --skill core-web-vitals-rodrigotoledo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance issues degrade user experience and hinder search visibility; Core Web Vitals (LCP, INP, CLS) are critical signals, yet many sites struggle to optimize them efficiently.

Core Features & Use Cases

  • LCP optimization strategies (preloading, image optimization, critical CSS)
  • INP responsiveness improvements (defer heavy work, task splitting)
  • CLS stabilization techniques (reserve space, font-display control)
  • Use Case: E-commerce product pages, long-form content, and dashboards requiring rapid, smooth interactions.

Quick Start

Identify the page to optimize and implement a focused plan using resource hints, image formats, and CSS strategies.

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 a web page with high LCP and CLS scores?▼

Improve Core Web Vitals by applying resource preloading, image format optimization, critical CSS extraction, and reserving layout space to stabilize rendering and reduce LCP and CLS metrics.

What is the best way to reduce INP on a dashboard with heavy interactions?▼

Reduce INP by deferring heavy JavaScript execution, splitting long tasks, and optimizing event handlers to ensure rapid visual feedback and smoother user interactions on dashboards.

Why does my content site have poor LCP and how can I fix it?▼

Poor LCP on content sites is often caused by slow server timing and unoptimized images. Fix it by applying server timing improvements, preloading critical assets, and optimizing image formats.

Can I measure Core Web Vitals metrics using the web-vitals library and Lighthouse?▼

Yes, you can measure Core Web Vitals reliably by implementing the web-vitals library for field data and running Lighthouse to capture lab data and identify LCP, INP, and CLS optimization opportunities.

Do I need strict performance budgets to optimize frontend rendering and SEO?▼

Yes, performance budgets are critical for maintaining fast, stable rendering on modern web pages and content sites, directly impacting user satisfaction and ensuring Core Web Vitals signals support SEO visibility.

Related Skills

Explore More Software Engineering Skills→
sigmadigitalzasigmadigitalza
1

web-performance

Analyze web application performance against Core Web Vitals metrics.

Official
Advanced
marcusagmmarcusagm
4

performance-profiling

Run Lighthouse audits to measure and analyze web performance.

Community
Advanced
KILWA73KILWA73

asset-optimizer

Convert images to WebP/AVIF and minify CSS/JS for web assets.

Community
Intermediate
btabaskabtabaska
1

rule-performance

Enforce performance budgets and query optimization rules in code changes.

Community
Advanced