skills.rest
Khaledaun
KhaledaunCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Diagnose and resolve Core Web Vitals issues for LCP, INP, and CLS.

Updated Sep 6, 2025
Search Tags:#performance#optimization#core web vitals#lcp#page speed#inp#cls
One-click install
npx skills add https://github.com/Khaledaun/Yalla-london --skill core-web-vitals-khaledaun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/Khaledaun/Yalla-london/tree/main/.claude/skills/core-web-vitals
Command: npx skills add https://github.com/Khaledaun/Yalla-london --skill core-web-vitals-khaledaun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses issues that negatively impact Core Web Vitals (LCP, INP, CLS), leading to a better user experience and improved search engine rankings.

Core Features & Use Cases

  • LCP Optimization: Identifies and resolves slow server response times, render-blocking resources, and slow resource loading.
  • INP Optimization: Detects and fixes long tasks, heavy event handlers, and third-party script issues that hinder interactivity.
  • CLS Optimization: Solves layout shifts caused by images without dimensions, dynamic content, and font loading.
  • Use Case: Improve your website's performance scores by optimizing the loading speed, interactivity, and visual stability of your pages.

Quick Start

Use the core-web-vitals skill to optimize the Largest Contentful Paint for the homepage.

Frequently Asked Questions about core-web-vitals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Core Web Vitals for better page speed and user experience?▼

To optimize Core Web Vitals, diagnose and resolve loading, interactivity, and visual stability issues. Target slow server response times, render-blocking resources, long tasks, and layout shifts to ensure a fast, smooth user experience.

What causes poor LCP and how can I fix slow loading performance?▼

Poor LCP is caused by slow server response times, render-blocking resources, and slow resource loading. Fix LCP by identifying these bottlenecks and resolving them to improve your largest contentful paint loading speed.

How do I fix layout shifts and improve CLS on my webpage?▼

Fix layout shifts by resolving issues with images without dimensions, dynamic content injection, and font loading. Improving CLS prevents visual instability and ensures page elements do not move unexpectedly during rendering.

Why does my page have high INP and how do I optimize interactivity?▼

High INP results from long tasks, heavy event handlers, and third-party script issues. Optimize interactivity by detecting these bottlenecks and resolving them to ensure your page responds quickly to user input.

What is the best way to debug render-blocking resources affecting page speed?▼

Debug render-blocking resources using performance metrics and debugging techniques to identify scripts or stylesheets delaying rendering. Resolving these bottlenecks optimizes server response times and improves overall page speed.

Does this approach work for inefficient client-side rendering issues?▼

Yes, this approach targets inefficient client-side rendering by utilizing performance metrics to diagnose and resolve long tasks and heavy processing. This ensures fast page speed and smooth visual stability.

Related Skills

Explore More Software Engineering Skills→
lehoangphuc747lehoangphuc747

performance-profiling

Profile web application runtime behavior and resource usage to identify performance bottlenecks.

Community
Advanced
ofelixdevofelixdev

core-web-vitals

Optimize Core Web Vitals LCP, INP, and CLS with checklists and debugging strategies.

Community
Intermediate
felipebrgs1felipebrgs1

core-web-vitals

Optimize Core Web Vitals by analyzing and implementing loading, interactivity, and stability fixes.

Community
Advanced
udsy19udsy19

react-best-practices

Optimize React and Next.js application performance through refactoring and code generation guidelines.

Community
Advanced