skills.rest
carloitaben
carloitabenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Diagnoses and fixes LCP, INP, and CLS issues in web pages.

Updated Jul 2, 2024
Search Tags:#performance#web vitals#optimization#core web vitals#LCP#CLS#INP
One-click install
npx skills add https://github.com/carloitaben/dotfiles --skill core-web-vitals-carloitaben
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/carloitaben/dotfiles/tree/main/.config/opencode/skills/core-web-vitals
Command: npx skills add https://github.com/carloitaben/dotfiles --skill core-web-vitals-carloitaben

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and fix issues impacting your website's Core Web Vitals (LCP, INP, CLS), leading to better user experience and improved search engine rankings.

Core Features & Use Cases

  • LCP Optimization: Identifies and resolves slow loading times for the largest content element.
  • INP Optimization: Addresses interactivity issues by reducing main thread blocking and optimizing event handlers.
  • CLS Optimization: Fixes unexpected layout shifts caused by images, ads, or dynamic content.
  • Use Case: A user wants to improve their website's performance score. They can use this skill to get actionable advice on how to reduce LCP, INP, and CLS.

Quick Start

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

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 like LCP, INP, and CLS for my website?▼

To optimize Core Web Vitals, this Skill diagnoses technical bottlenecks causing slow LCP, high INP, and poor CLS, then provides actionable solutions to enhance user experience and search visibility.

What is causing unexpected layout shifts and how do I fix CLS?▼

Unexpected layout shifts are typically caused by images, ads, or dynamic content without reserved space; this Skill diagnoses CLS issues and recommends fixes to stabilize visual elements.

How can I reduce server response times and render-blocking resources for better LCP?▼

This Skill identifies render-blocking resources and slow server response times delaying your Largest Contentful Paint, offering specific optimization steps to improve LCP loading speed.

Why does my web page have interactivity issues and how do I reduce main thread blocking?▼

Interactivity issues and high INP scores stem from main thread blocking and inefficient event handlers; this Skill targets these long tasks to restore responsiveness.

Can I use this to fix performance bottlenecks in client-side rendering delays?▼

Yes, this Skill specifically addresses client-side rendering delays alongside other performance bottlenecks, utilizing debugging techniques to optimize overall web page speed.

What is the best way to improve my website performance score without changing frameworks?▼

You can improve your website performance score by using this Skill to get detailed diagnostics and actionable advice on resolving LCP, INP, and CLS bottlenecks directly.

Related Skills

Explore More Software Engineering Skills→
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
statick88statick88
1

core-web-vitals

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

Community
Advanced
YeomanYeYeomanYe

webperf-interaction

Analyze interaction latency with INP and main-thread blocking via PerformanceObserver.

Community
Advanced
oscardlfroscardlfr
1

performance

Analyze web page performance and optimize assets with Lighthouse audits.

Community
Advanced