skills.rest
bingeli1379
bingeli1379COMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Diagnose and optimize Core Web Vitals (LCP, INP, CLS) across SSR/SSG and client-rendered pages.

2|Updated Apr 6, 2026
Search Tags:#core-web-vitals#lcp#performance-optimization#inp#cls#framework-tuning
One-click install
npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill core-web-vitals-bingeli1379
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/bingeli1379/eli-claude-marketplace/tree/main/plugins/eureka-sdd/skills/core-web-vitals
Command: npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill core-web-vitals-bingeli1379

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optimizes Core Web Vitals (LCP, INP, CLS) to improve page speed, interactivity, and visual stability.

Core Features & Use Cases

  • Provides framework-agnostic guidance to diagnose LCP, INP, and CLS bottlenecks and apply practical fixes.
  • Includes actionable patterns for preloading, critical CSS inlining, SSR/SSG strategies, and safe font loading to boost perceived and actual performance.
  • Covers framework-specific tweaks for Next.js, React, and Vue/Nuxt, plus debugging tips to measure impact.

Quick Start

Apply practical optimizations to reduce LCP, INP, and CLS on your pages with a framework-aware 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 like LCP, INP, and CLS for faster page speed?▼

Optimize Core Web Vitals by diagnosing LCP, INP, and CLS bottlenecks to apply actionable fixes like preloading, inline critical CSS, and safe font loading, improving page speed and visual stability across rendering modes.

What is the best way to reduce CLS and improve visual stability in Next.js?▼

The best way to reduce CLS in Next.js is applying framework-specific tweaks for layout-stable rendering and safe font loading, ensuring visual stability during client-side hydration and server-side generation.

How do I fix a high INP score on client-rendered pages?▼

Fix a high INP score on client-rendered pages by diagnosing interactivity bottlenecks and applying framework-specific tweaks for React and Vue/Nuxt to optimize main thread execution and improve responsiveness.

Does this Core Web Vitals optimization approach work with both SSR and SSG?▼

Yes, this Core Web Vitals optimization approach works across SSR and SSG strategies, providing framework-agnostic guidance to diagnose bottlenecks and apply practical fixes for both server-rendered and client-rendered pages.

Why does my LCP remain high even after image optimization?▼

Your LCP might remain high due to render-blocking resources; applying preloading, critical CSS inlining, and safe font loading patterns helps prioritize Largest Contentful Paint elements and boost perceived performance.

Related Skills

Explore More Software Engineering Skills→
lehoangphuc747lehoangphuc747

performance-profiling

Profile web application runtime behavior and resource usage to identify performance bottlenecks.

Community
Advanced
damacusdamacus
2

core-web-vitals

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

Community
Intermediate
rodrigotoledorodrigotoledo

perf-astro

Inline critical CSS and compress assets in Astro builds.

Community
Advanced
lastnight030506lastnight030506

perf-web-optimization

Analyze and optimize website performance through caching, lazy loading, and image optimization.

Community
Advanced