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.

1.75x

Quality

87%

Does it follow best practices?

Impact

86%

1.75x

Average score across 3 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Evaluation results

100%

89%

LCP Performance Investigation

LCP debugging workflow

Criteria

Without context

With context

navigate_page called

100%

performance_start_trace reload param

100%

performance_start_trace autoStop param

100%

LCPBreakdown insight analyzed

100%

Additional LCP insights checked

100%

Identify LCP Element snippet used

41%

100%

list_network_requests with Image/Font filter

100%

get_network_request called

100%

Audit Common Issues snippet used

40%

100%

emulate with Fast 3G

100%

emulate with CPU throttling

25%

100%

60%

Homepage Hero Image Performance Review

LCP element HTML optimization

Criteria

Without context

With context

lazy removed from hero image

100%

fetchpriority on hero img element

100%

preload link for hero image

100%

fetchpriority on preload link

100%

analytics.js deferred

100%

ab-testing.js deferred

100%

WebP or AVIF format for hero

srcset for responsive hero

non-critical CSS deferred

100%

14%

LCP Bottleneck Analysis and Optimization Plan

LCP subparts bottleneck analysis

Criteria

Without context

With context

Resource load delay identified as bottleneck

100%

67% delay correctly flagged

100%

10% threshold for delay subparts stated

30%

100%

Remove lazy-loading recommended

100%

fetchpriority recommended

100%

Preload recommended

100%

TTFB deprioritized

100%

Image format/size deprioritized

53%

100%

Repository: ChromeDevTools/chrome-devtools-mcp
Commit: 1b857c9

Evaluated: 4 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

LCP Performance Investigation Homepage Hero Image Performance Review LCP Bottleneck Analysis and Optimization Plan

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.