skills.rest
aymenhamoudii
aymenhamoudiiCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Diagnose Core Web Vitals regressions and generate prioritized remediation checklists.

Updated Mar 21, 2026
Search Tags:#auditing#seo#web-performance#core-web-vitals#lcp#inp#cls
One-click install
npx skills add https://github.com/aymenhamoudii/digitn-website --skill core-web-vitals-aymenhamoudii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/aymenhamoudii/digitn-website/tree/main/.qwen/skills/core-web-vitals
Command: npx skills add https://github.com/aymenhamoudii/digitn-website --skill core-web-vitals-aymenhamoudii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides actionable guidance to identify and fix Core Web Vitals regressions—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—so pages load faster, respond more quickly to user input, and remain visually stable to improve user experience and search ranking.

Core Features & Use Cases

  • Diagnosis & Measurement: Clear instructions for lab and field measurement using Lighthouse, Chrome DevTools, web-vitals, WebPageTest, and CrUX to find the root cause of poor metrics.
  • Targeted Remediations: Prioritized checklists and remediation patterns for slow TTFB, render-blocking resources, long main-thread tasks, third-party script management, reserved image/video dimensions, and font strategies.
  • Framework Tips & Example: Framework-specific examples for Next.js, React, and Vue/Nuxt that show how to preload LCP assets, defer heavy work, and ensure images and embeds reserve layout space; use this to audit a landing page or e-commerce product view and get prioritized fixes.

Quick Start

Run the core-web-vitals skill on your page URL to receive a prioritized audit and concrete fixes 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 diagnose and fix a poor Largest Contentful Paint score on my Next.js page?▼

To improve Largest Contentful Paint (LCP), diagnose slow TTFB and render-blocking resources using Lighthouse or Chrome DevTools. Apply targeted remediations like preloading LCP assets and deferring heavy main-thread tasks specifically for Next.js workflows to speed up page loading.

What is the best way to reduce Interaction to Next Paint delays in single-page applications?▼

To reduce Interaction to Next Paint (INP) delays, identify long main-thread tasks using field and lab measurement tools like web-vitals. Break up blocking JavaScript, defer heavy work, and optimize third-party script management to ensure your single-page application responds quickly to user input.

Why does my web page layout shift, and how can I calculate and fix Cumulative Layout Shift?▼

Cumulative Layout Shift (CLS) occurs when elements move after rendering. Fix CLS by reserving image and video dimensions, implementing proper font strategies, and ensuring embeds reserve layout space using framework-specific guidance for React and Vue/Nuxt.

Can I audit Core Web Vitals regressions for an e-commerce product view using Chrome DevTools?▼

Yes, you can audit Core Web Vitals for e-commerce pages using Chrome DevTools and the web-vitals library. This skill provides measurement instructions and a prioritized remediation checklist to diagnose regressions and apply framework-specific code fixes for your product views.

How do I measure field data versus lab data when auditing Core Web Vitals?▼

Measure Core Web Vitals lab data using Lighthouse and WebPageTest, and collect field data using the CrUX dataset. This skill provides clear instructions for both approaches to accurately find the root cause of poor LCP, INP, and CLS performance.

Related Skills

Explore More Software Engineering Skills→
wilfozwilfoz

core-web-vitals

Analyze and improve LCP, INP, and CLS metrics for website performance.

Community
Intermediate
xlelibertyxleliberty

a11y-audit

Automate detection and remediation of WCAG 2.2 Level A and AA violations in frontend apps.

Community
Advanced
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced
adcuelloaadcuelloa

core-web-vitals

Diagnose and resolve Core Web Vitals issues with code examples and checklists.

Community
Advanced