Chromeの「検証」機能と、拡張機能Lighthouseを使って、
コアウェブバイタルズの指標のLCPを場所を特定する手順です。
まだLightHouseをインストールしていない方はこちらから
LightHouse-デベロッパーツール

LCPの場所を特定する手順

  1. 調査したいページをChromeで開きます。
  2. 右クリックで、検証をクリック
    ライトハウスでLCPの場所を特定する方法
  3. デベロッパーツールが開かれますので、「Lighthouse」をクリックします。
    ライトハウスでLCPの場所を特定する方法※Lighthouseが表示されない場合は、>>マークをクリックしてみてください。
    ライトハウスでLCPの場所を特定する方法
  4. 「Generate report」をクリック
    ライトハウスでLCPの場所を特定する方法
  5. しばらく待つとレポートの結果が表示されるので、「View Original Report」をクリック
    ライトハウスでLCPの場所を特定する方法
  6. 「LCP」をクリックすると、要素の場所が表示されます。
    ライトハウスでLCPの場所を特定する方法

補足

要素の特定ができない場合

いくつかのサイトでこちらの手順を実施してみましたが、要素の場所がうまく表示されないサイトがありました。
原因は調査中です。(わかる方いたら教えていただけますと幸いです)
なお、画面下部のSummaryの欄で、LCPのタイプが画像なのか、テキストなのか判断することができます。
ライトハウスでLCPの場所を特定する方法
 

おすすめの記事