Core Web Vitals の LCP を改善する
こんにちは、森田です。
実はこのブログのトップページの Core Web Vitals の LCP スコアがあまりよくありませんでした。今回はそちらを改善したので紹介いたします。
LCP（Largest Contentful Paint) とは
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
Largest Contentful Paint の略で、ファーストビューの最も大きなコンテンツの表示スピードを評価する指標となります。
表示までの秒数をスコアをし、2.5秒以下で良いとされます。
LCP については以前記事にしておりますので、詳しくは以下リンクをご覧ください。
Before / After
早速ですが改善前後のスコアをご覧ください。
今回は Page Speed Insights で計測しました。
改善前のスコア
Largest Contentful Paint が 6.4秒です。
4.0秒以上ですと「Poor」の評価になるので 6.4秒はだいぶ悪い数値です。
改善後のスコア
Largest Contentful Paint が 1.9秒です。
2.5秒以下ですと「Good」となりLCPは良好と評価されます。
また、LCP 改善により必然的にページスピードも改善されたので Page Speed Insights のスコアも97点になりました。
誤差もあるので何度か計測しましたが LCP はつねに2秒前後でした。
スコア改善のためにやったこと
このブログは画像とテキストのみのシンプルな構成なのでテキストやCSSレイアウトで表示が遅くなるとはあまり考えられなかったので、画像やレンダリングをブロックするJavaScriptやプラグインのCSSなどを最適化することから考えました。
画像の最適化・圧縮
元々 画像最適化プラグイン は入れていたのですが、非可逆圧縮にし圧縮率を高めより軽量化することにしました。
わずかに LCP スコアは改善されました。
元が6.4秒だったので、1.6秒は速くなったことになります。
しかし、まだ赤文字で Poor の評価です。
コードの軽量化 (Minify)
コード圧縮のプラグインを使い、WordPressで自動で出力されるJS ファイルと CSS ファイルを1つに連結し、出力されるhtmlも圧縮しました。
元々ある程度はその辺りは意識してコーディングはしていたので、効果は誤差範囲のように見えます。
こちらでもまだ赤文字でPoorの評価です。
画像を CDN 配信に
画像を CDN に置いて高速化を試みます。
Jetpack を使うと簡単にCDN化できるのでありがたいです。
1秒ほど LCP スコアは改善されました。
これで4秒以下になりPoorは抜け出せたのですが、まだオレンジの「Needs Improvement」とう評価で改善が必要と言われています。
画像の遅延読み込み (Lazy Load)
画像の遅延読み込みを行っていなかったので実施しました。
だいぶスコアが改善されました。
ファーストビュー以下の画像が遅延読み込みされることで、サイト全体の読み込みが速くなり結果 LCP のスコアが上がったと考えられます。
まとめ
LCP の計測方法からファーストビューの高速化に囚われすぎていましたが、結局ページサイズを全体的に軽くすることが一番の改善に繋がりました。
あくまでこのブログでの話であり、サイトによって改善するポイントは違うので一概には言えませんが、まずは画像を軽くすることが一番の近道かもしれません。
遅延読み込みの効果は絶大ですね。まずは優先して導入されるのをオススメします。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！関連リンク
