Debug Optimize Lcp
chromedevtools/chrome-devtools-mcpLargest Contentful Paint measures how fast the main content of a page appears. A slow LCP frustrates users and hurts search rankings. This guide helps you find and fix the cause.
You will learn to break down LCP into four parts: time to first byte, resource load delay, resource load duration, and render delay. Each part has an ideal time. You will use Chrome DevTools to record a trace, analyze insights, identify the LCP element, and check the network waterfall.
Follow the step by step workflow. It shows you exactly where the problem is. Then you can make targeted improvements like compressing images, reducing server response time, or removing render blocking resources.
Add Debug Optimize Lcp skill to your workflow
Global
mkdir -p ~/.claude/skills/debug-optimize-lcpProject
mkdir -p .claude/skills/debug-optimize-lcpSource Repository
More Debugging Claude Code Skills
Azure Diagnosticsmicrosoft/azure-skills
Debug Azure production issues with systematic diagnostics and AI-powered tools
Azure Messagingmicrosoft/azure-skills
Troubleshoot and fix Azure messaging SDK errors for Event Hubs and Service Bus
Use My Browserxixu-me/skills
Work inside your live browser session for real page inspection and debugging
Diagnosemattpocock/skills
A step-by-step debug loop for finding and fixing hard bugs
Systematic Debuggingobra/superpowers
Find the root cause of every bug before attempting any fix to save time
Safe Debuglllllllama/rigorpilot-skills
Debug deep learning failures safely with conservative diagnosis and minimal patches
Firebase Crashlyticsfirebase/agent-skills
Set up crash reporting for your Android or iOS app with ease
Python Performance Optimizationwshobson/agents
Profile and optimize Python code to find and fix performance bottlenecks quickly