Debug Optimize Lcp
Skill ActiveGuides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.
To help users identify and resolve Largest Contentful Paint (LCP) performance issues by leveraging Chrome DevTools for detailed analysis and actionable insights.
Features
- Guides debugging of LCP performance
- Analyzes LCP subparts (TTFB, resource load delay/duration, render delay)
- Identifies LCP elements and their attributes
- Inspects network waterfall for resource loading issues
- Audits common LCP-related issues like lazy loading and render-blocking scripts
- Provides prioritized optimization strategies
Use Cases
- When users ask about LCP performance or slow page loads
- When users want to optimize Core Web Vitals
- When users need to understand why their page's main content renders slowly
- When users mention 'largest contentful paint', 'page load speed', or 'CWV'
Non-Goals
- Optimizing other Core Web Vitals (FID, CLS) directly
- General website debugging beyond LCP performance
- Automating website content creation or SEO analysis
Workflow
- Navigate to the target URL.
- Start a performance trace with reload.
- Analyze LCP insights from the trace.
- Identify the LCP element using a script.
- Check the network waterfall for the LCP resource.
- Inspect HTML for common issues using a script.
- Apply prioritized optimization strategies based on identified bottlenecks.
- Verify fixes by re-running the trace and comparing results.
- Emulate slower network/CPU conditions for final testing.
Prerequisites
- Node.js v20.19+ or newer LTS
- Google Chrome current stable version or newer
- npm
Scope
- info:Tool surface sizeThe skill utilizes a subset of the available Chrome DevTools MCP tools, focusing on performance and debugging, resulting in a moderate tool surface size.
Compliance
- warning:Telemetry opt-inThe README indicates that usage statistics collection is enabled by default and can be opted out using a flag, which is not strictly opt-in.
Installation
First, add the marketplace
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp/plugin install chrome-devtools-mcp@chrome-devtools-pluginsQuality Score
Trust Signals
Similar Extensions
Troubleshooting
100Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.
Chrome Devtools
97Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).
Use My Browser
100Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.
Node Connect
100Diagnose OpenClaw Android, iOS, or macOS node pairing, QR/setup code, route, auth, and connection failures.
Openclaw Debugging
100Debug OpenClaw model, provider, tool-surface, code-mode, streaming, and live/Crabbox behavior by choosing the right logs, probes, and proof path before changing code.
Ctx Doctor
100Run context-mode diagnostics. Checks runtimes, hooks, FTS5, plugin registration, npm and marketplace versions. Trigger: /context-mode:ctx-doctor