An update will be available soon. Let's wait for the task to finish. An update will be available soon. Let's wait. An update will be available soon. Let's wait. Core Web Vitals Visualizer：CWVのデバッグ用無料Chrome拡張機能

Core Web Vitalsデバッグ用の無料Chrome拡張機能

Core Web Vitals Visualizerは、DevToolsを開かずにCore Web Vitalsをデバッグするために作成した無料 of Chrome拡張機能です。あらゆるページ上にリアルタイムでオーバーレイを表示し、LCP、CLS、INPに影響を与えている要素を正確に示します。14,000人以上の開発者が利用しています。

最終レビュー：Arjen Karel（2026年3月）

Core Web Vitalsの専門家として、ページを操作したときの挙動や応答の確認には多くの時間を費やします。モバイルエミュレーションへの切り替えやブラウザキャッシュの無効化によって、Core Web Vitalsにどのような影響があり、メトリクスがどう変化するでしょうか。

もちろん、RUMトラッキングも使用しています。これにより、ページレベルでどのメトリクスが合格し、どのメトリクスが不合格であるかは分かります。しかし、なぜ不合格になるのでしょうか。それは実際にページを操作しなければ分かりません。

時間を大幅に節約するため、時間のかかるプロセスの一部を自動化し、面倒な作業を代行するChrome拡張機能を作成することにしました。その結果生まれたのが、Core Web Vitals Visualizerです。誰でも利用できるように公開しました。ぜひChromeウェブストアでチェックしてください。

Core Web Vitals Visualizerの機能

まず、ページ操作に基づいてCore Web Vitalsを記録します。Largest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shift、First Contentful Paint、そしてTime to First Byteを追跡します。

次に、これらのメトリクスを可視化するオーバーレイを表示します。これにより、どの要素がLargest Contentful Paintであるか、どの要素が視覚的な不安定さを引き起こしているか、そしてページ操作時にどのイベントが最悪のinput delayの原因になったかが分かります。

いずれかのメトリクスをクリックすると、Core Web Vitals Visualizerはそれらを最も基本的な構成要素に分解します。LCPの場合は、resource load delay、load duration、element render delayが表示されます。INPの場合は、input delay、processing time、presentation delayが表示されます。

なぜ Lighthouseを使わないのか？

この質問はよく受けます。私の答えは常にこうです。「Lighthouseを使わないとは言っていません」（実際にはそれほど頻繁には使いませんが）。Lighthouseは優れたツールであり、使い方に慣れておくべきです。

しかし、重要な違いがあります。Lighthouseはラボテストであり、そのデータは実際の環境を反映していない可能性があります。そのため、この拡張機能はブラウザの実際のデータを使用します。また、Lighthouseは実際のインタラクション結果を提供しません。実際のユーザーがページを操作しないため、INPを測定することはできません。代わりにTotal Blocking Timeを代理指標として使用します。この拡張機能は、実際のCLSを発生時に可視化し、LCPとINPをサブパートに分解して、どこに時間がかかっているかを正確に示します。

GoogleのWeb Vitals拡張機能についてはどうでしょうか？

Googleは2025年1月にWeb Vitals Chrome拡張機能を非推奨にしました。現在は、代わりにDevToolsのPerformanceパネルを使用することを推奨しています。DevToolsは強力ですが、フルプロファイリングセッションを開かずに、すばやくオーバーレイを確認したいだけのケースもあります。Core Web Vitals Visualizerは、まさにそのためのツールです。さらに、DevToolsでは単一のビューで表示されない、メトリクスのサブパート分解データも提供します。

Core Web Vitals Visualizerのインストール

Chromeウェブストアにアクセスして、Core Web Vitals Visualizerをインストールしてください。気に入っていただけましたら、ぜひレビューを残してください。