debug-optimize-lcp

Detect, analyze, and optimize Largest Contentful Paint bottlenecks from performance traces.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Mohamad44p/billix_agent_main --skill debug-optimize-lcp-mohamad44p
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: debug-optimize-lcp
Source: https://github.com/Mohamad44p/billix_agent_main/tree/main/.agents/skills/debug-optimize-lcp
Command: npx skills add https://github.com/Mohamad44p/billix_agent_main --skill debug-optimize-lcp-mohamad44p

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps web developers and SEO specialists understand and optimize Largest Contentful Paint (LCP), enhancing user experience and search rankings.

Core Features & Use Cases

  • Performance Recording: Capture detailed performance traces to analyze LCP timing.
  • Insight Analysis: Diagnose bottlenecks by examining LCP breakdown, server latency, and resource loading issues.
  • Element Identification: Locate the specific DOM element contributing to LCP delays for targeted fixes.
  • Network Inspection: Review network requests to assess resource load timing and size.
  • Issue Auditing: Detect common LCP-related problems like lazy-loaded images and render-blocking assets.
  • Optimization Strategies: Provide prioritized recommendations to reduce resource load delay, element render delay, and TTFB.

Quick Start

Use this Skill to record a page performance trace, analyze the insights, identify bottlenecks, and implement targeted web performance optimizations.

Frequently Asked Questions about debug-optimize-lcp

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

FAQPage Schema
How do I analyze and improve Largest Contentful Paint using Chrome DevTools performance tracing?

Largest Contentful Paint (LCP) optimization involves recording a performance trace to diagnose load and render bottlenecks. By examining the LCP breakdown, server latency, and resource loading issues, you can pinpoint and resolve web page speed delays.

How do I find which DOM element is causing Largest Contentful Paint delays?

To find the DOM element causing Largest Contentful Paint delays, use performance insights to locate the specific element contributing to LCP timing. This allows you to apply targeted web performance optimizations to that resource.

Why does my page speed suffer from render-blocking assets and how do I fix it?

Page speed suffers from render-blocking assets because they delay element rendering. Issue auditing detects common LCP-related problems like lazy-loaded images and render-blocking assets, providing prioritized recommendations to reduce resource load delay.

Can I audit network requests to assess resource load timing for web optimization?

Yes, you can review network requests to assess resource load timing and size during performance analysis. This network inspection identifies bottlenecks in resource delivery, helping you implement targeted web optimization strategies for faster page loads.

What is the best way to reduce Time to First Byte for web performance optimization?

The best way to reduce Time to First Byte (TTFB) is to analyze server latency within the LCP breakdown. By diagnosing server response bottlenecks, you can implement prioritized optimization strategies to improve webpage load times and user experience.