skills.rest
vh2224
vh2224COMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Diagnose and optimize LCP, INP, and CLS metrics on web pages.

1|Updated Jul 13, 2026
Search Tags:#web performance#core web vitals#lcp#inp#cls#frontend optimization
One-click install
npx skills add https://github.com/vh2224/forge-executor --skill core-web-vitals-vh2224
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/vh2224/forge-executor/tree/main/src/resources/skills/core-web-vitals
Command: npx skills add https://github.com/vh2224/forge-executor --skill core-web-vitals-vh2224

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and optimize Core Web Vitals so pages load faster, respond more smoothly, and avoid unexpected layout shifts that hurt user experience and search performance.

Core Features & Use Cases

  • LCP Optimization: Improve the time it takes for the main content to appear by reducing server latency, preloading key assets, and eliminating render-blocking resources.
  • INP Optimization: Reduce interaction delays by breaking up long tasks, simplifying event handlers, and deferring non-critical work.
  • CLS Prevention: Keep layouts stable by reserving space for media, managing font behavior, and avoiding dynamic content shifts.
  • Use Case: If a marketing homepage has a slow hero image, janky button clicks, and shifting content during load, this Skill provides concrete fixes for each problem.

Quick Start

Ask for a Core Web Vitals audit of your page and recommend specific changes to improve LCP, INP, and CLS.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I fix a slow LCP on my landing page?▼

To fix a slow LCP, reduce server latency, preload key assets, and eliminate render-blocking resources so the main content appears faster. This approach directly optimizes the Largest Contentful Paint for better user experience.

What is the best way to reduce interaction delays and improve INP?▼

Improving INP involves breaking up long tasks, simplifying event handlers, and deferring non-critical work. Reducing interaction delays ensures your web pages respond more smoothly to user inputs.

Why does my web page layout shift during loading and how do I prevent CLS?▼

Layout shifts happen when space is not reserved for media or dynamic content appears unexpectedly. Prevent CLS by reserving space for assets and managing font behavior to keep layouts stable.

Can I use this Core Web Vitals optimization approach for content sites and app interfaces?▼

Yes, this Core Web Vitals optimization applies to frontend performance work for landing pages, content sites, and app interfaces. It requires guidance for diagnosing and fixing LCP, INP, and CLS issues.

How do I audit my page for Core Web Vitals issues?▼

To audit Core Web Vitals, request a page evaluation to diagnose slow loading, poor interactivity, and layout instability. The audit recommends specific changes to improve LCP, INP, and CLS metrics.

Related Skills

Explore More Software Engineering Skills→
oiagorodriguesoiagorodrigues

core-web-vitals

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

Community
Advanced
hschnehschne
1

seo-performance

Diagnose Core Web Vitals failures using CrUX field data and PageSpeed Insights.

Community
Intermediate
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced
HouseofmvpsHouseofmvps
115

perf-audit

Automate Lighthouse website performance audits and apply remediation fixes.

Community
Intermediate