skills.rest
calvingit
calvingitCOMMUNITY
Explore all skills by this author →
Website𝕏@zhangwen_siteGitHub

debug-optimize-lcp

Diagnose and optimize Largest Contentful Paint performance using Chrome DevTools MCP tooling.

2|Updated Mar 26, 2026
Search Tags:#performance#debugging#chrome-devtools#web-vitals#lcp#lcp-snippets
One-click install
npx skills add https://github.com/calvingit/skills --skill debug-optimize-lcp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-optimize-lcp
Source: https://github.com/calvingit/skills/tree/main/external-skills/Tool/debug-optimize-lcp
Command: npx skills add https://github.com/calvingit/skills --skill debug-optimize-lcp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps diagnose and optimize Largest Contentful Paint (LCP) performance for web pages using Chrome DevTools MCP tooling.

Core Features & Use Cases

  • Identify bottlenecks such as TTFB, resource load delay, and render delay.
  • Provide actionable MCP-driven fixes to improve LCP and CWV metrics.
  • Support scenarios including slow page loads, hero image latency, and content rendering delays.

Quick Start

Identify LCP bottlenecks and apply MCP-based fixes to improve render performance.

Frequently Asked Questions about debug-optimize-lcp

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

FAQPage Schema
How do I debug slow Largest Contentful Paint using Chrome DevTools?▼

You can debug Largest Contentful Paint (LCP) performance using Chrome DevTools MCP tooling to identify bottlenecks like TTFB, resource load delay, and render delay. It then prescribes actionable fixes to improve page load metrics.

What causes high LCP and render delay on web pages?▼

High LCP and render delay are caused by bottlenecks in TTFB, resource load delay, and render delay. Diagnosing these Core Web Vitals concerns helps pinpoint why main content takes too long to render.

How do I optimize hero image latency for Core Web Vitals?▼

Optimize hero image latency by diagnosing LCP bottlenecks with Chrome DevTools MCP. This workflow identifies resource load delays and prescribes concrete fixes to improve Core Web Vitals metrics.

Can I use Chrome DevTools MCP to fix TTFB and resource load delay?▼

Yes, you can use Chrome DevTools MCP to fix TTFB and resource load delay. The workflow identifies these specific LCP bottlenecks and provides actionable fixes to accelerate content rendering.

What is the best way to diagnose page load delays affecting LCP?▼

The best way to diagnose page load delays affecting LCP is applying Chrome DevTools MCP insights to isolate TTFB, resource load delay, and render delay, yielding concrete fixes for slow rendering.

Related Skills

Explore More Software Engineering Skills→
STier-AiSTier-Ai
5

web-perf

Measure web page performance metrics using Chrome DevTools MCP.

Official
Advanced
LAF-USLAF-US

web-perf

Analyze Core Web Vitals and render-blocking resources to identify performance bottlenecks.

Official
Advanced
AndersonBaezPAndersonBaezP

core-web-vitals

Analyze and improve Core Web Vitals metrics including LCP, INP, and CLS.

Community
Intermediate
gwpjpgwpjp
3

visual-qa-lighthouse

Audit production web apps with Lighthouse CLI and generate JSON performance reports.

Community
Advanced