skills.rest
AlexDevFlow
AlexDevFlowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

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

Updated Aug 27, 2026
Search Tags:#performance#optimize#web-vitals#lcp#web-audit#inp#cls
One-click install
npx skills add https://github.com/AlexDevFlow/Claude10XD --skill core-web-vitals-alexdevflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/AlexDevFlow/Claude10XD/tree/main/skills/performance/core-web-vitals
Command: npx skills add https://github.com/AlexDevFlow/Claude10XD --skill core-web-vitals-alexdevflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Core Web Vitals are critical for user experience and search rankings, and many pages struggle to meet the targets for LCP, INP, and CLS. This skill provides a structured approach to diagnose and fix the bottlenecks that degrade these metrics.

Core Features & Use Cases

  • Guided measurement and diagnosis of LCP, INP, and CLS across common page types (landing pages, dashboards, content pages).
  • Practical fixes for resource loading, image and font optimization, and rendering strategies; supports SSR/SSG adjustments.
  • Use Case: When a product page loads slowly on mobile, apply the fixes to accelerate content rendering and reduce layout shifts.

Quick Start

Run a focused Core Web Vitals audit on your page and implement the recommended fixes to reduce LCP, improve INP, and lower 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 optimize Core Web Vitals for a slow loading product page?▼

Optimize Core Web Vitals by diagnosing LCP, INP, and CLS bottlenecks, then applying targeted fixes for resource loading, image and font optimization, and rendering strategies to accelerate content rendering and reduce layout shifts.

What is the best way to reduce CLS on marketing landing pages?▼

Reducing CLS involves applying rendering strategy adjustments and resource loading fixes to minimize layout shifts. This structured approach ensures your marketing landing pages maintain visual stability during loading.

How do I improve LCP and INP metrics for product dashboards?▼

Improve LCP and INP on product dashboards by measuring current performance, diagnosing rendering bottlenecks, and implementing SSR or SSG adjustments alongside resource loading optimizations to meet target thresholds.

Does this Core Web Vitals optimization approach support SSR and SSG adjustments?▼

Yes, the Core Web Vitals optimization approach supports SSR and SSG adjustments. It provides practical fixes for rendering strategies and resource loading that align with server-side and static site generation architectures.

How do I audit web performance to verify LCP, INP, and CLS target thresholds are met?▼

Audit web performance by running a focused measurement of LCP, INP, and CLS across your pages, implementing recommended code changes, and performing validation checks to verify that target thresholds are met.

Related Skills

Explore More Software Engineering Skills→
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
kennyolofsson23-netizenkennyolofsson23-netizen

core-web-vitals

Audit web pages and generate optimization checklists for LCP, INP, and CLS.

Community
Intermediate
SilverAssistSilverAssist
1

web-performance-analysis

Analyze web performance issues with PageSpeed Insights and Lighthouse data.

Official
Intermediate
nsuberinsuberi

optimize

Diagnoses UI performance issues in web apps and validates improvements with before/after Core Web Vitals metrics.

Community
Advanced