Web制作者に便利!! CLSやLCPなどWebバイタル情報をリアルタイム表示する方法

Web制作にとても重要なCLSやLCPなど
Webページのバイタル情報。
LCPやCLS、FID情報をオーバーレイ表示で
リアルタイム表示するChrome機能を紹介。

機能概要

現在表示しているページを即座に測定してFIDやCLS、LCP数値をリアルタイムに表示します。
またページ上にオーバーレイで表示されています。
CLSが発生した時は青色で要素をハイライト表示します。

表示方法

Chrome上でF12を押してデベロッパーを表示します。

右上の・・・部分をクリックしてメニューを表示します。

その他のツールから「レンダリング」をクリックします。

「レイアウトシフト領域」と「ウェブに関する主な指標」にチェックします。

これでChromeのページ上にWebバイタル情報がリアルタイムに表示されます。
FIDやCLSは発生した時に数値が表示されます。

LighthouseやPageinsightで毎回計測しなくても、これでリアルタイムに数値を確認。
どの部分で発生しているのかが分かります。
Web制作にとても便利なChrome機能です。