skills.rest
junwonp
junwonpCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

debug-optimize-lcp

Diagnose and optimize Largest Contentful Paint performance using Chrome DevTools traces.

Updated Nov 7, 2025
Search Tags:#performance#debugging#optimization#chrome-devtools#web-vitals#lcp#network-analysis
One-click install
npx skills add https://github.com/junwonp/portfolio --skill debug-optimize-lcp-junwonp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-optimize-lcp
Source: https://github.com/junwonp/portfolio/tree/main/.agents/skills/debug-optimize-lcp
Command: npx skills add https://github.com/junwonp/portfolio --skill debug-optimize-lcp-junwonp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides debugging and optimizing Largest Contentful Paint (LCP) performance 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.

Core Features & Use Cases

  • Step-by-step workflow to record performance traces, analyze LCP insights, identify LCP elements, and inspect network waterfalls.
  • Guidance on common issues (lazy loading, resource timing, render-blocking assets) and practical optimization strategies.
  • Use Case: When pages exhibit delayed LCP, you can diagnose bottlenecks, verify LCP element, and apply preloads and prioritization to accelerate rendering.

Quick Start

Ask me to diagnose an LCP issue on a page and guide you through recording a performance trace, analyzing insights, and applying optimization steps.

Frequently Asked Questions about debug-optimize-lcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I diagnose slow Largest Contentful Paint using Chrome DevTools?▼

LCP optimization involves recording performance traces, analyzing insights to identify the LCP element, inspecting network waterfalls, and auditing common issues like lazy loading and render-blocking assets to accelerate hero image rendering.

Why does my page hero image take too long to appear on initial load?▼

Hero images render slowly due to render-blocking assets, improper lazy loading, or network waterfall delays. Auditing LCP element resource timing and applying preloads accelerates main content appearance.

What is the best way to optimize Core Web Vitals for page load speed?▼

Optimizing Core Web Vitals requires tracing LCP elements, inspecting network waterfalls for bottlenecks, and applying resource prioritization and preloads to accelerate main content rendering across desktop and mobile.

Does this LCP debugging workflow apply to both desktop and mobile pages?▼

Yes, LCP debugging workflows apply to both desktop and mobile pages, tracing initial render delays, analyzing network waterfalls, and identifying bottlenecks to optimize Core Web Vitals performance.

How do I fix render-blocking assets delaying my page's main content?▼

Fix render-blocking assets by inspecting network waterfalls, auditing resource timing, and applying preloads and prioritization to accelerate LCP element rendering and eliminate initial render delays.

Related Skills

Explore More Software Engineering Skills→
ylxaiylxai
2

web-perf

Analyze web page performance metrics using Chrome DevTools Metrics Collector Protocol.

Community
Advanced
ricablericable

performance

Audit website loading bottlenecks and prioritize Core Web Vitals fixes.

Community
Advanced
sharegpusharegpu

debug-optimize-lcp

Analyze and optimize Largest Contentful Paint performance using Chrome DevTools MCP workflows.

Official
Advanced
arroschavesarroschaves
1

web-perf

Audit web page performance and Core Web Vitals using Chrome DevTools MCP.

Community
Advanced