core-web-vitals

Audit and optimize LCP, INP, and CLS metrics across devices.

Updated Apr 14, 2026

Search Tags:#performance #optimization #web-vitals #core-web-vitals #lcp #inp #cls

Ready to run

npx skills add https://github.com/dallay/opencode-docker --skill core-web-vitals-dallay

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/dallay/opencode-docker/tree/main/config/skills/core-web-vitals
Command: npx skills add https://github.com/dallay/opencode-docker --skill core-web-vitals-dallay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Core Web Vitals optimization to improve user-perceived performance and search rankings by addressing slow load times and visual instability.

Core Features & Use Cases

Auditing LCP, INP, and CLS metrics across devices and network conditions
Providing actionable fixes and optimization patterns for server response, resource loading, and layout stability
Framework-agnostic recommendations with framework-specific tips for Next.js, React, Vue, and more

Quick Start

Run a performance audit on your site and apply the recommended LCP/INP/CLS optimizations.

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 to improve page experience and search rankings?▼

Optimize Core Web Vitals by auditing LCP, INP, and CLS metrics across devices, then applying actionable fixes for server response, resource loading, and layout stability to improve page experience and search rankings.

What is the best way to fix a slow LCP and improve page load times?▼

Fix slow LCP by tuning server response optimization and implementing resource loading strategies. Addressing render-blocking resources directly improves page load times and stabilizes the largest contentful paint metric.

How do I reduce INP delays for better interaction responsiveness on mobile?▼

Reduce INP delays by auditing interaction responsiveness across mobile network conditions and applying framework-specific optimization patterns. Tuning render-blocking mitigation minimizes input delays and improves interaction metrics.

Why does my page layout shift and how can I stabilize CLS?▼

Page layout shifts occur from unstable visual elements, causing poor CLS. Stabilize CLS by applying actionable layout stability fixes and framework-specific render patterns to prevent unexpected visual movement.

Can I use these web performance optimization patterns with Next.js and Vue?▼

Yes, these web performance optimization patterns apply to Next.js and Vue. The framework-agnostic recommendations include specific tips for modern web projects to tune LCP, INP, and CLS effectively.

What are the limitations when auditing web vitals across different network conditions?▼

Auditing web vitals across varying network conditions requires simulating mobile and desktop environments accurately. Limitations arise when local tests fail to capture real-world server response delays or unpredictable resource loading bottlenecks.