How does this skill identify loading bottlenecks?

It records a performance trace and breaks down the timing into four stages: TTFB, resource load delay, resource load duration, and element render delay to find the exact cause of slowness.

What is LCP and why should I optimize it?

Largest Contentful Paint (LCP) measures when the largest image or text block becomes visible. It is a Core Web Vital used by Google as a search ranking factor.

Does it support mobile performance testing?

Yes, the skill can emulate mobile devices using CPU throttling and network constraints like Fast 3G to surface issues that only appear on slower hardware.

Can it fix lazy-loading issues on hero images?

Yes, it specifically audits HTML for 'loading=lazy' on LCP elements and suggests using 'fetchpriority=high' to ensure critical images load as fast as possible.

LCP & Core Web Vitals Optimizer

Name: LCP & Core Web Vitals Optimizer
Author: ChromeDevTools

byChromeDevTools

•

30,809

•

分析与监控

Optimizes website loading speed and Core Web Vitals by identifying and resolving Largest Contentful Paint (LCP) bottlenecks using Chrome DevTools.

This skill provides a comprehensive workflow for analyzing and fixing Largest Contentful Paint (LCP) issues to improve user experience and search engine rankings. It leverages the Chrome DevTools MCP to record performance traces, break down LCP into four key subparts—TTFB, resource load delay, resource load duration, and element render delay—and identify the specific page elements causing slow loads. By auditing network requests and HTML attributes like fetchpriority and lazy loading, the skill guides developers through targeted optimization strategies to ensure the main content renders within the recommended 2.5-second window.

主要功能

01Guided implementation of fetchpriority and preloading strategies

02Performance trace recording with simulated network and CPU throttling

03Identification of specific LCP elements and their resource dependencies

04Automated LCP subpart breakdown and timing analysis

0530,809 GitHub stars

06Detection of render-blocking resources and discovery delays

使用场景

01Improving Core Web Vitals scores for better SEO search rankings

02Troubleshooting slow-loading hero images or main content on landing pages

03Reducing Time to First Byte (TTFB) and render-blocking delays in web apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chromedevtools/chrome-devtools-mcp debug-optimize-lcp

For use in Claude.ai and ChatGPT

Download Skill