core-web-vitals

Audit LCP, INP, and CLS metrics and apply image, CSS, and SSR optimizations.

12|1|Updated May 29, 2026
One-click install
npx skills add https://github.com/qdzsh/gsd-revamp --skill core-web-vitals-qdzsh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/qdzsh/gsd-revamp/tree/main/src/resources/skills/core-web-vitals
Command: npx skills add https://github.com/qdzsh/gsd-revamp --skill core-web-vitals-qdzsh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams reduce page latency and layout instability by diagnosing and addressing Core Web Vitals issues such as LCP, INP, and CLS.

Core Features & Use Cases

  • Automated audits of LCP, INP, and CLS across pages to surface actionable optimizations.
  • Practical fixes including image optimization, critical CSS inlining, and server/SSR improvements.
  • Use Case: Optimize the homepage to achieve faster first paint, better interactivity, and stable layout under load.

Quick Start

Run a targeted audit to identify and fix Core Web Vitals issues on your page.

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?

You can reduce page latency by running targeted audits on LCP, INP, and CLS metrics, then applying practical fixes like image optimization, critical CSS inlining, and SSR or SSG strategies to improve initial paint and interactivity.

What is the best way to fix high LCP and improve initial paint on marketing sites?

To improve LCP and achieve faster initial paint on marketing sites, you can apply practical fixes such as image optimization and CSS critical-path inlining, ensuring quick content render under real user field conditions.

Why does my page layout shift during load and how do I stabilize CLS?

Layout instability and CLS issues occur when page elements move during load, which you can diagnose through automated CLS audits and fix using practical optimizations to enforce stable layout rendering under real user conditions.

Can I use Core Web Vitals optimization for e-commerce pages and product dashboards?

Core Web Vitals optimization applies to e-commerce pages and product dashboards, enforcing measurements for LCP, INP, and CLS to ensure fast initial paint, quick interactivity, and stable layout under real user conditions.

How do I measure Core Web Vitals using lab and field testing workflows?

You can measure Core Web Vitals by running automated audits across your pages using supported lab and field testing workflows, surfacing actionable optimizations for LCP, INP, and CLS under real user conditions.

Does reducing page interactivity latency require SSR or SSG implementation?

Reducing interactivity latency and INP issues can involve SSR or SSG strategies alongside other practical fixes like critical CSS inlining, helping achieve quicker interactivity and faster initial paint for web pages.