Google Chromeと拡張機能Lighthouseを使って、コアウェブバイタルズの指標のLCPを場所を特定する手順です。

まだLightHouseをインストールしていない方はこちらから
LightHouse-デベロッパーツール

2021/11/22 追記
LightHouseのUIが変わり、デベロッパーツールを使わずに簡単に特定ができるようになりました。

LighthouseでLCPの場所を特定する手順

  1. 調査したいページをChromeで開きます。
  2. Chromeの拡張機能から、Lighthouseのアイコンをクリック
  3. 「Generate report」をクリック
    ライトハウスでLCPの場所を特定する方法
  4. しばらく待つとレポートの結果が表示されるので、「LCP」をクリック
    ライトハウスでLCPの場所を特定する方法
  5. DIAGNOSTICS(診断)の「Largest Contentful Paint element」をクリックすると、LCPの要素を確認できます。
    ライトハウスでLCPの場所を特定する方法
おすすめの記事