skills.rest
damacus
damacusCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

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

2|Updated Feb 5, 2026
Search Tags:#performance#ssr#web-vitals#lcp#inp#cls
One-click install
npx skills add https://github.com/damacus/agent-skills --skill core-web-vitals-damacus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/damacus/agent-skills/tree/main/skills/core-web-vitals
Command: npx skills add https://github.com/damacus/agent-skills --skill core-web-vitals-damacus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Optimize Core Web Vitals (LCP, INP, CLS) to improve user experience and search rankings by guiding performance improvements.

Core Features & Use Cases

  • LCP optimization: speed up largest contentful paint through resource loading and rendering strategies.
  • INP improvements: reduce input latency and improve interactivity responsiveness.
  • CLS stabilization: minimize layout shifts via reserved space and font loading techniques.
  • Use Case: a page with slow loading and layout shifts can be guided to implement SSR/SSG, critical CSS, and preloads to meet target thresholds.

Quick Start

Provide a URL to optimize Core Web Vitals for that page.

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 metrics like LCP, INP, and CLS?▼

Improve Core Web Vitals by optimizing LCP, INP, and CLS through resource loading, SSR/SSG implementation, critical CSS inlining, and font loading strategies to boost page experience and search ranking.

What is the best way to reduce layout shifts on my web page?▼

Reduce layout shifts by stabilizing CLS through reserved space techniques and optimized font loading strategies, minimizing unexpected visual movement during page rendering.

How can I speed up Largest Contentful Paint for slow loading pages?▼

Speed up Largest Contentful Paint by applying resource loading and rendering strategies, including preloads, inlined critical CSS, and SSR or SSG to deliver content faster.

How do I fix high input latency and improve interactivity responsiveness?▼

Fix input latency by optimizing INP to reduce interaction delays, applying step-by-step performance tuning guidance to improve overall interactivity responsiveness.

Can I use the web-vitals library to measure LCP, INP, and CLS?▼

Use the web-vitals library to measure LCP, INP, and CLS metrics directly, providing the performance data needed to guide targeted optimizations and meet target thresholds.

Does this Core Web Vitals optimization guidance apply to specific web frameworks?▼

The guidance applies to performance tuning for websites and web apps, providing framework-specific tips to implement SSR/SSG, preloads, and font loading strategies across various pages.

Related Skills

Explore More Software Engineering Skills→
besync-labsbesync-labs
7

performance-profiling

Measure core web vitals and identify bottlenecks in web applications.

Community
Intermediate
racciolyraccioly

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.

Community
Advanced
jcsoftdevjcsoftdev

preload

Add link rel preload hints for fonts, hero images, and key scripts.

Community
Basic
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced