optimize-core-web-vitals

Diagnose and remediate Core Web Vitals metrics using Lighthouse audits and performance traces.

9|3|Updated Jun 13, 2026
One-click install
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill optimize-core-web-vitals
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize-core-web-vitals
Source: https://github.com/Sir-chawakorn/sanook-cli/tree/main/skills/optimize-core-web-vitals
Command: npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill optimize-core-web-vitals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses poor website performance by diagnosing and fixing issues related to Core Web Vitals, specifically LCP, INP, and CLS, which often lead to low search rankings and poor user experience.

Core Features & Use Cases

  • Performance Auditing: Executes automated Lighthouse audits and performance traces to pinpoint bottlenecks.
  • Optimization Strategies: Provides actionable steps to resolve render-blocking resources, eliminate layout shifts, and reduce interaction latency.
  • Use Case: Use this when your mobile landing page has a high Largest Contentful Paint (LCP) time or suffers from layout shifts, to identify the specific assets or scripts causing the delay and apply targeted fixes.

Quick Start

Run the optimize-core-web-vitals skill to audit the performance of the provided URL and generate a list of actionable browser-side optimizations.

Frequently Asked Questions about optimize-core-web-vitals

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

FAQPage Schema
How do I diagnose and fix high LCP and layout shifts on my web application?

To fix high LCP and layout shifts, you can run an automated Lighthouse audit to pinpoint browser-side performance bottlenecks. This process analyzes performance traces to identify render-blocking assets and provides actionable steps to optimize loading and rendering paths.

What is the best way to improve INP and reduce interaction latency for frontend performance?

Improving INP requires analyzing performance traces to identify critical path regressions causing interaction latency. By executing targeted audits, you can detect the specific browser-side bottlenecks and apply optimization strategies to reduce input delay.

Can I use Lighthouse audits to find render-blocking resources causing poor Core Web Vitals?

Yes, you can use Lighthouse audits to locate render-blocking resources. The audit executes via Chrome DevTools protocols to analyze your web application's asset loading and rendering paths, generating a list of targeted fixes for poor Core Web Vitals.

Do I need Chrome DevTools protocols to execute performance audits for Core Web Vitals?

Yes, Chrome DevTools protocols are required to execute the performance audits needed for Core Web Vitals. They facilitate the automated Lighthouse audits and performance traces necessary to identify critical path regressions and optimize rendering.

Why does my mobile landing page suffer from poor Largest Contentful Paint times?

Your mobile landing page suffers from poor LCP times due to browser-side performance bottlenecks like render-blocking resources or unoptimized asset loading. Running a performance trace identifies the specific assets causing the delay and provides targeted fixes.

What are the limitations of using Lighthouse traces for frontend optimization?

Lighthouse traces for frontend optimization primarily target browser-side performance bottlenecks and rendering paths. They focus on diagnosing issues like LCP, INP, and CLS, meaning they do not address server-side latency or backend database performance regressions.