skills.rest
Martino17x
Martino17xCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

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

Updated Aug 13, 2026
Search Tags:#optimization#web performance#core web vitals#lcp#page experience#inp#cls
One-click install
npx skills add https://github.com/Martino17x/Sentinel-Invest --skill core-web-vitals-martino17x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/Martino17x/Sentinel-Invest/tree/main/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/Martino17x/Sentinel-Invest --skill core-web-vitals-martino17x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires web-vitals, and includes references (resource) components.

What problem does it solve? Web pages that fail Google's Core Web Vitals thresholds rank lower in search results and deliver poor user experiences, but diagnosing which metric is failing and why requires deep knowledge of rendering, networking, and JavaScript execution. ## Core Features & Use Cases - LCP Optimization: Fix slow server response times, render-blocking resources, unoptimized hero images, and client-side rendering delays with preloading, critical CSS, and SSR/SSG patterns. - INP Optimization: Break up long tasks, defer heavy event handler work, lazy-load third-party scripts, and reduce excessive re-renders in React and Vue. - CLS Optimization: Eliminate layout shifts from unsized images, ads, dynamic content injection, web font swaps, and layout-triggering animations. - Use Case: A Next.js site has a 4.5s LCP and failing Search Console report. Use this Skill to identify the LCP element, add fetchpriority preloading, inline critical CSS, and verify the fix with the web-vitals library. ## Quick Start Analyze my page's Core Web Vitals and fix the LCP and CLS issues in my Next.js hero section.

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 LCP on my website?▼

Improve LCP by reducing TTFB below 800ms with CDN or edge caching, preloading the LCP image with fetchpriority="high", inlining critical CSS under 14KB, and rendering the LCP element in initial HTML via SSR or SSG instead of client-side JavaScript.

How to reduce INP caused by long JavaScript tasks?▼

Reduce INP by breaking long tasks into chunks with setTimeout or scheduler.yield(), deferring non-critical work to requestIdleCallback, providing immediate visual feedback in event handlers, and lazy-loading third-party scripts on interaction.

What causes CLS layout shifts and how do I fix them?▼

CLS is caused by images without width/height attributes, ads and embeds without reserved space, dynamically injected content above the viewport, and web font swaps. Fix it with aspect-ratio, min-height containers, font-display: optional, and transform-based animations.

Does this work with Next.js and Nuxt frameworks?▼

Yes, the Skill includes framework-specific guidance. Next.js uses next/image with priority for LCP and dynamic imports for INP, while Nuxt uses NuxtImg with preload and async components for the same metrics.

How do I measure Core Web Vitals from real users?▼

Use the web-vitals library's onLCP, onINP, and onCLS callbacks to send field data to analytics, or query the Chrome User Experience Report. Lab testing uses Lighthouse, Chrome DevTools, and WebPageTest.

Related Skills

Explore More Software Engineering Skills→
GregM1991GregM1991

core-web-vitals

Diagnose and optimize LCP, INP, and CLS using field data and browser traces.

Community
Advanced
TeamDay-AITeamDay-AI
2

seo

Aggregate SEO data from Search Console, Ahrefs, SE Ranking, and Google Analytics to identify optimization opportunities.

Official
Advanced
Focus-GTSFocus-GTS

content-audit

Audit Adobe Edge Delivery Services pages for content quality, SEO, accessibility, and performance.

Official
Advanced
HollowvynHollowvyn

static-rendering

Pre-generate HTML at build time for non-personalized pages and dynamic routes.

Official
Intermediate