ライトハウス(Lighthouse)を使ってLCPの場所を特定する方法

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

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

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

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

1. 調査したいページをChromeで開きます。
2. Chromeの拡張機能から、Lighthouseのアイコンをクリック
3. 「Generate report」をクリック
   
4. しばらく待つとレポートの結果が表示されるので、「LCP」をクリック
   
5. DIAGNOSTICS（診断）の「Largest Contentful Paint element」をクリックすると、LCPの要素を確認できます。
   

lazy-load(遅延読み込み)の設定方法｜設定後にLCPが低下する理由

2022.3.28

この記事では、lazy-load(遅延読み込み)の設定方法や導入するメリット、確認方法をお伝えします。 ブラウザの標準仕様として簡単に実装できるようになりましたが、実際にはPageSpeed Insightsのスコアは下がってしまいました。その原因も併せてお伝えします。 lazy-load（遅延読み...