skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

core-web-vitals

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

Updated Jun 30, 2026
Search Tags:#lighthouse#web performance#core web vitals#LCP#CLS#INP#page experience
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill core-web-vitals-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/core-web-vitals
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill core-web-vitals-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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 whether the bottleneck is LCP, INP, or CLS—and knowing the exact fix—requires deep performance expertise. ## Core Features & Use Cases - LCP Optimization: Fix slow server response, render-blocking resources, unoptimized hero images, and client-side rendering delays using preload hints, fetchpriority, critical CSS, and the Speculation Rules API. - INP Optimization: Break up long tasks with scheduler.yield(), prioritize visual feedback in event handlers, defer third-party scripts, and reduce React/Vue re-renders. - CLS Optimization: Eliminate layout shifts from unsized images, ads, injected content, and web fonts using aspect-ratio, reserved space, and font metric overrides. - Use Case: A Next.js site has a 4.5s LCP and 0.3 CLS. Use this Skill to identify the LCP element, add image preloading with fetchpriority="high", reserve space for embeds, and verify improvements with PerformanceObserver debugging snippets. ## Quick Start Analyze my page's Core Web Vitals and give me a prioritized fix list for 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 improve LCP on my website?▼

Improve LCP by reducing TTFB below 800ms with a CDN, preloading the LCP image with fetchpriority="high", inlining critical CSS under 14KB, and ensuring the LCP element renders in the initial HTML rather than via client-side JavaScript.

How to reduce INP caused by long JavaScript tasks?▼

Reduce INP by breaking long tasks into chunks and yielding with scheduler.yield(), giving immediate visual feedback in event handlers before heavy work, and deferring non-urgent work with requestIdleCallback or Web Workers.

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

CLS is caused by images without dimensions, ads and iframes without reserved space, dynamically injected content, and web font swaps. Fix it with width/height attributes or aspect-ratio, min-height containers, and font-display: optional or matched font metrics.

Does the Speculation Rules API work in all browsers?▼

The Speculation Rules API for prerendering works only in Chromium browsers; Safari and Firefox ignore it, making it a progressive enhancement. Gate side effects like analytics on the prerenderingchange event or document.prerendering.

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

Measure field data with the web-vitals library by calling onLCP, onINP, and onCLS and sending results to analytics. The web-vitals/attribution build adds LoAF breakdowns identifying which script and phase consumed the INP budget.

Why is my LCP still slow after optimizing images?▼

Slow LCP despite optimized images usually indicates high TTFB, render-blocking CSS or JavaScript, or client-side rendering of the LCP element. Check server response time first, then inline critical CSS and move content to SSR or SSG.

Related Skills

Explore More Software Engineering Skills→
narr07narr07

pagespeed-insights

Audit web pages against PageSpeed Insights guidelines and Core Web Vitals thresholds.

Community
Intermediate
14nethuwa14nethuwa

canary

Monitor live deployments for console errors, performance regressions, and page failures.

Community
Advanced
bryanvillamilpragmabryanvillamilpragma
3

frontend-performance

Optimize Angular and React/Next.js frontend performance by improving Core Web Vitals and reducing bundle size.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate