·debug-optimize-lcp
</>

debug-optimize-lcp

✓
chromedevtools/chrome-devtools-mcpGitHub: chromedevtools/chrome-devtools-mcpSource: chromedevtools/chrome-devtools-mcp

Guides 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.

chromedevtools·debug·optimize·lcp
71Installs·7Trend·@chromedevtools

Installation

GitHub: chromedevtools/chrome-devtools-mcp
$npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp

How to Install debug-optimize-lcp

Quickly install debug-optimize-lcp AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: chromedevtools/chrome-devtools-mcp.

SKILL.md

View raw

Largest Contentful Paint (LCP) measures how quickly a page's main content becomes visible. It's the time from navigation start until the largest image or text block renders in the viewport.

LCP is a Core Web Vital that directly affects user experience and search ranking. On 73% of mobile pages, the LCP element is an image.

Every page's LCP breaks down into four sequential subparts with no gaps or overlaps. Understanding which subpart is the bottleneck is the key to effective optimization.

Guides 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. Source: chromedevtools/chrome-devtools-mcp.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp
Source
chromedevtools/chrome-devtools-mcp
Category
</>Dev Tools
Verified
✓
First Seen
2026-02-25
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp

Browse more skills from chromedevtools/chrome-devtools-mcp

Quick answers

What is debug-optimize-lcp?

Guides 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. Source: chromedevtools/chrome-devtools-mcp.

How do I install debug-optimize-lcp?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/chromedevtools/chrome-devtools-mcp

Details

Category
</>Dev Tools
Source
skills.sh
First Seen
2026-02-25

Related Skills

chrome-devtools
891 Installs
a11y-debugging
79 Installs
troubleshooting
26 Installs