Core Web Vitals の LCP を改善する

morita

こんにちは、森田です。
実はこのブログのトップページの Core Web Vitals の LCP スコアがあまりよくありませんでした。今回はそちらを改善したので紹介いたします。

LCP(Largest Contentful Paint) とは

LCP

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

Largest Contentful Paint の略で、ファーストビューの最も大きなコンテンツの表示スピードを評価する指標となります。

表示までの秒数をスコアをし、2.5秒以下で良いとされます。

LCP については以前記事にしておりますので、詳しくは以下リンクをご覧ください。

Before / After

早速ですが改善前後のスコアをご覧ください。
今回は Page Speed Insights で計測しました。

改善前のスコア

改善前の Page Speed Insights のスクリーンショット

Largest Contentful Paint が 6.4秒です。
4.0秒以上ですと「Poor」の評価になるので 6.4秒はだいぶ悪い数値です。

改善後のスコア

Page Speed Insights のスクリーンショット
改善後の Page Speed Insights のスクリーンショット

Largest Contentful Paint が 1.9秒です。
2.5秒以下ですと「Good」となりLCPは良好と評価されます。
また、LCP 改善により必然的にページスピードも改善されたので Page Speed Insights のスコアも97点になりました。

誤差もあるので何度か計測しましたが LCP はつねに2秒前後でした。

スコア改善のためにやったこと

このブログは画像とテキストのみのシンプルな構成なのでテキストやCSSレイアウトで表示が遅くなるとはあまり考えられなかったので、画像やレンダリングをブロックするJavaScriptやプラグインのCSSなどを最適化することから考えました。

画像の最適化・圧縮

元々 画像最適化プラグイン は入れていたのですが、非可逆圧縮にし圧縮率を高めより軽量化することにしました。

Largest Contentful Paint が 4.8秒

わずかに LCP スコアは改善されました。
元が6.4秒だったので、1.6秒は速くなったことになります。

しかし、まだ赤文字で Poor の評価です。

コードの軽量化 (Minify)

コード圧縮のプラグインを使い、WordPressで自動で出力されるJS ファイルと CSS ファイルを1つに連結し、出力されるhtmlも圧縮しました。

Largest Contentful Paint が 4.1秒

元々ある程度はその辺りは意識してコーディングはしていたので、効果は誤差範囲のように見えます。

こちらでもまだ赤文字でPoorの評価です。

画像を CDN 配信に

画像を CDN に置いて高速化を試みます。
Jetpack を使うと簡単にCDN化できるのでありがたいです。

Largest Contentful Paint が 3.2秒

1秒ほど LCP スコアは改善されました。

これで4秒以下になりPoorは抜け出せたのですが、まだオレンジの「Needs Improvement」とう評価で改善が必要と言われています。

画像の遅延読み込み (Lazy Load)

画像の遅延読み込みを行っていなかったので実施しました。

Largest Contentful Paint が 1.9秒

だいぶスコアが改善されました。
ファーストビュー以下の画像が遅延読み込みされることで、サイト全体の読み込みが速くなり結果 LCP のスコアが上がったと考えられます。

まとめ

LCP の計測方法からファーストビューの高速化に囚われすぎていましたが、結局ページサイズを全体的に軽くすることが一番の改善に繋がりました。

あくまでこのブログでの話であり、サイトによって改善するポイントは違うので一概には言えませんが、まずは画像を軽くすることが一番の近道かもしれません。
遅延読み込みの効果は絶大ですね。まずは優先して導入されるのをオススメします。

サイトの重要指標であるCore Web Vitals についてまとめた記事をシリーズとして集めてみました。Core Web Vitals の内容をもっと知りたい方、実践での考え方を模索している方、ウェブの優れたUX(ユーザーエクスペリエンス)を実現するための指標に興味のある方などにおすすめの内容です。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

関連リンク


morita

投稿者 Morita Sou

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