chromedevtools--chrome-devtools-mcp
Matthias Rohmer
2cd9b95346
This is a draft for new skill to debug and optimize LCP scores, going hand in hand with https://github.com/ChromeDevTools/chrome-devtools-mcp/pull/831. Base for this skill is key authoritative learning material from web.dev, about debugging and optimizing LCP, mainly: - http://web.dev/articles/lcp - http://web.dev/articles/optimize-lcp - https://web.dev/articles/top-cwv I gave the content of those articles together with the [tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md), the README and the chrome-devtools core skill to both Claude Opus 4.6 and Gemini 3 Pro and their respective skill creator skills. The final skill in this PR is a merge of multiple runs with both models. The snippets to run with `evaluate_script` is something only Opus came up with, but I think it's quite nice, though our own `performance_*` tools might give the same insight but likely with more overhead (meaning tokens).
2.1 KiB
2.1 KiB
LCP Optimization Strategies
1. Eliminate Resource Load Delay
Goal: Ensure the LCP resource starts loading as early as possible.
- Early Discovery: Ensure the LCP resource is discoverable in the initial HTML document response (not dynamically added by JS or hidden in
data-src). - Preload: Use
<link rel="preload">withfetchpriority="high"for critical images or fonts. - Avoid Lazy Loading: Never set
loading="lazy"on the LCP image. - Fetch Priority: Use
fetchpriority="high"on the<img>tag. - Same Origin: Host critical resources on the same origin or use
<link rel="preconnect">.
2. Eliminate Element Render Delay
Goal: Ensure the LCP element can render immediately after its resource has finished loading.
- Minimize Render-Blocking CSS: Inline critical CSS and defer non-critical CSS. Ensure the stylesheet is smaller than the LCP resource.
- Minimize Render-Blocking JS: Avoid synchronous scripts in the
<head>. Inline very small scripts. - Server-Side Rendering (SSR): Deliver the full HTML markup from the server so image resources are discoverable immediately.
- Break Up Long Tasks: Prevent large JavaScript tasks from blocking the main thread during rendering.
3. Reduce Resource Load Duration
Goal: Reduce the time spent transferring the bytes of the resource.
- Optimize Resource Size: Serve optimal image sizes, use modern formats (AVIF, WebP), and compress images/fonts.
- Geographic Proximity (CDN): Use a Content Delivery Network to get servers closer to users.
- Reduce Contention: Use
fetchpriority="high"to prevent lower-priority resources from competing for bandwidth. - Caching: Use efficient
Cache-Controlpolicies.
4. Reduce Time to First Byte (TTFB)
Goal: Deliver the initial HTML as quickly as possible.
- Minimize Redirects: Avoid multiple redirects from advertisements or shortened links.
- CDN Caching: Cache static HTML documents at the edge.
- Edge Computing: Move dynamic logic to the edge to avoid trips to the origin server.
- Back/Forward Cache: Ensure pages are eligible for bfcache.