Core Web Vitals の LCP(Largest Contentful Paint) について

morita
LCP

こんにちは、森田です。
サイトの重要指標 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にお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

関連リンク


morita

投稿者 Morita Sou

フロントエンドグループ内チームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。