Core Web Vitals の LCP（Largest Contentful Paint) について
こんにちは、森田です。
サイトの重要指標 Core Web Vitals について という記事を書き、3つの指標から前回は CLS について書いたのですが、引き続き今回は LCP という指標について掘り下げていきます。
まずは、以前の記事でも紹介しましたが、あらためて LCP とはなにか？を解説いたします。
LCP（Largest Contentful Paint) とは
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
ざっくり言うとページスピードを評価する指標となります。
しかし、通常のページスピードと違うのは「最も有意義なコンテンツ」の表示速度を評価するという点です。
最も有意義なコンテンツ？
「最も有意義なコンテンツ」とは、ビューポート内の最も大きいコンテンツ（要素）のことを指します。
考慮される要素は以下となります。
img要素svg要素内のimage要素video要素（ポスター画像を使用）url関数 を介してロードされた背景画像を持つ要素- テキストノードまたは他のインラインレベルのテキスト要素を含むブロックレベル要素
画像もしくはブロックレベル要素ということになるので、ほとんどの要素が当てはまると思われます。
ビューポート内の最も大きいコンテンツとなるので、デザインやコンテンツ次第ですが、コーポレートサイトやLPならファーストビューのキービジュアル、記事ページであれば記事本文やアイキャッチ画像になること多そうですね。
この「最も有意義なコンテンツ」の表示が2.5秒以内にレンダリングできれば LCP のスコアは良いとされます。
LCPスコアの改善方法
さて、実際に LCP のスコアを改善するにはどのようなことが必要でしょうか。まずはスコアが低下する要因から考えてみます。
LCPスコア低下の要因として大きく分けて2つあると思います
- サーバーの転送速度や応答時間が遅い
- ブラウザのレンダリングが遅い
ざっくりサーバーサイドかクライアントサイドか。ですね。
サーバーサイドの改善方法
サーバーサイドの改善は使っているサーバーのスペックに大きく左右されるので、フロント側の対応はできるところをということになりそうですが、サーバーエンジニアと相談してキャッシュやTTFPの短縮などの取り組みなどをしたいですね。
大きな画像を使う場合、img要素および背景画像は LCP に考慮される要素になるので、ファーストビューで使う場合は、画像の軽量化や高速に配信することが必要になりそうです。
画像および JavaScript や CSS などのリソース読み込みの高速化にCDNの導入や、WebP画像を使う場合のフォールバックなどをサーバーサイドで対応できれば良さそうですね。
レンタルサーバーの場合と AWS を使っている場合でスコアは全然違う気がします。
クライアントサイドの改善方法
クライアントサイドは主にブラウザレンダリングの高速化が求められます。
まずはレンダリングをブロックする CSS の改善や、JavaScript の実行タイミングを考慮したり、不要なコードを減らし読み込みを高速化する為に minify したり、動的なコンテンツによって遅くなっているならば見直す必要もありそうです。
特に、ファーストビューの表示では CSS を1ファイルにせずファーストビュー用のCSSに分けたり、それ以外の読み込みを遅らせたり、ファーストビューの CSS だけは head要素に直接書き込む、いわゆる Critical CSS の手法を用いても有効だと考えます。
ぶっちゃけ LCP対策 と言ってもやる事は今までのページ速度改善と変わりませんね。
まとめ
様々な要因が LCP に関係してくるのでフロントエンドだけでの解決は難しそうです。
サイトバックエンドやサーバーサイドでも今後はより高速化を考慮することになりそうですね。
設計・デザインの段階で LCP を意識することが大事だと考えます。
Gaji-Labo は SSR / SSG / SPA 開発実績があります
SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「フロントエンドの人手が足りず信頼できるエンジニアを探している」
「フロントエンド構築をどうしたらいいか分からない」
「手を付けてみたけどいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのフルリモート開発とチーム参加にも対応しています。
フロントエンドの相談をする！関連リンク
