skills.rest
dallay
dallayOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/dallay/opencode-docker --skill core-web-vitals-dallay
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
sigmadigitalzasigmadigitalza
1

web-performance

Analyze web application performance against Core Web Vitals metrics.

Official
Advanced
aroidoaroido

Web Vitals Monitoring Skill

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

Official
Advanced
jorgejaramillojorgejaramillo
1

seo-images

Analyze web page images for SEO and performance issues.

Community
Advanced
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate