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

Ready to run

npx skills add https://github.com/calvingit/skills --skill debug-optimize-lcp

💬 Prompt for ChatGPT / Claude Chat▼

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.