Chrome DevTools MCP ツールを使用した Largest Contentful Paint (LCP) のデバッグと最適化をガイドします。ユーザーが LCP パフォーマンス、ページ読み込みの遅さ、Core Web Vitals の最適化について尋ねた場合、またはページのメイン コンテンツの表示に時間がかかりすぎる理由を知りたい場合は、このスキルを使用してください。ユーザーが「最大のコンテンツフルペイント」、「ページ読み込み速度」、「CWV」について言及したり、ヒーロー画像やメインコンテンツのレンダリング速度を向上させたい場合にも使用します。
コマンドラインで debug-optimize-lcp AI スキルを開発環境にすばやくインストール
ソース: chromedevtools/chrome-devtools-mcp。
Largest Contentful Paint (LCP) measures how quickly a page's main content becomes visible. It's the time from navigation start until the largest image or text block renders in the viewport.
LCP is a Core Web Vital that directly affects user experience and search ranking. On 73% of mobile pages, the LCP element is an image.
Every page's LCP breaks down into four sequential subparts with no gaps or overlaps. Understanding which subpart is the bottleneck is the key to effective optimization.
Chrome DevTools MCP ツールを使用した Largest Contentful Paint (LCP) のデバッグと最適化をガイドします。ユーザーが LCP パフォーマンス、ページ読み込みの遅さ、Core Web Vitals の最適化について尋ねた場合、またはページのメイン コンテンツの表示に時間がかかりすぎる理由を知りたい場合は、このスキルを使用してください。ユーザーが「最大のコンテンツフルペイント」、「ページ読み込み速度」、「CWV」について言及したり、ヒーロー画像やメインコンテンツのレンダリング速度を向上させたい場合にも使用します。 ソース: chromedevtools/chrome-devtools-mcp。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcpChrome DevTools MCP ツールを使用した Largest Contentful Paint (LCP) のデバッグと最適化をガイドします。ユーザーが LCP パフォーマンス、ページ読み込みの遅さ、Core Web Vitals の最適化について尋ねた場合、またはページのメイン コンテンツの表示に時間がかかりすぎる理由を知りたい場合は、このスキルを使用してください。ユーザーが「最大のコンテンツフルペイント」、「ページ読み込み速度」、「CWV」について言及したり、ヒーロー画像やメインコンテンツのレンダリング速度を向上させたい場合にも使用します。 ソース: chromedevtools/chrome-devtools-mcp。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill debug-optimize-lcp インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/chromedevtools/chrome-devtools-mcp