skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

core-web-vitals

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

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

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 and frustrate users with slow loading, laggy interactions, and shifting layouts. This Skill provides targeted diagnostics and fixes for the three metrics that determine page experience scores. ## Core Features & Use Cases - LCP Optimization: Fix slow server response, render-blocking resources, unoptimized hero images, and client-side rendering delays with preloading, critical CSS, and Speculation Rules. - INP Optimization: Break up long tasks with scheduler.yield, prioritize visual feedback in event handlers, defer third-party scripts, and reduce framework re-renders. - CLS Optimization: Reserve space for images, ads, and embeds, prevent font-related shifts with font-display and metric overrides, and use transform-based 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, preload the hero image with fetchpriority="high", 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, INP, and CLS issues hurting my search ranking.

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 and edge caching, preloading the LCP image with fetchpriority="high", inlining critical CSS under 14KB, and ensuring the LCP element renders in initial HTML rather than via client-side JavaScript.

How to fix INP issues caused by long JavaScript tasks?▼

Fix INP by breaking long tasks into chunks and yielding with scheduler.yield, providing immediate visual feedback in event handlers before heavy work, and deferring non-urgent work with requestIdleCallback. Target under 50ms input delay and 100ms processing time.

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

CLS is caused by images without dimensions, ads and embeds without reserved space, dynamically injected content, and web font swaps. Prevent shifts by setting width/height or aspect-ratio, using min-height containers, and applying font-display: optional or matched font metrics.

Does the Speculation Rules API work in all browsers?▼

Speculation Rules prerendering works only in Chromium browsers; Safari and Firefox ignore the script, making it a progressive enhancement. Gate side effects like analytics on the prerenderingchange event since they fire when prerendering starts, not on navigation.

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 your analytics. The web-vitals/attribution build adds LoAF breakdowns identifying which script and phase consumed the INP budget.

Related Skills

Explore More Software Engineering Skills→
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

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
narduk-enterprisesnarduk-enterprises

web-perf

Audit Core Web Vitals and render-blocking resources for web performance.

Official
Advanced
GenuinehGenuineh

frontend-framework-nextjs

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

Community
Intermediate