今回はSEOで重要視されているCore Web Vitals（コア ウェブバイタル）」の指標の一つであるLargest Contentful Paint（LCP）を改善する方法を紹介します。
pagespeedinsightでサイトスピードの得点を参照する時に様々な指標が表示されます。
その中の一つにLargest Contentful Paint（LCP）がありますが、もしここの得点が低くて改善策を探しているって方は今回の記事をしっかり読んでいただければ、あとはタスクをこなしていくだけになります。
明日からでも実践してみて下さい。
LCPって何？
LCPは「Largest Contentful Paint」の略称で日本語では「最大のコンテンツペイント」と言います。
LCPは、Webページのメインコンテンツが読み込まれて、ビューポート内に表示される最大の画像またはテキストブロックのレンダリングの時間を測定した指標です。
LCPの評価を高めるには、ページの読み込みが開始されてから最初の2.5秒以内に最大の要素が表示される必要があります。LCPの測定は、一定期間不特定多数のユーザーが読み込んだデータをもとに計測がされます。
そのため、一度だけ2.5秒で表示されれば評価が高いわけではなく、モバイルとデスクトップでセグメント化されたページ読み込みの75%が2.5秒以内に表示される、安定したWEBサイトほど評価が高くなります。
上記の画像の緑色部分が2.5秒以内に表示された、素晴らしい評価です。その他のオレンジと赤は2.6秒以内と残念な評価です。この場合1/3しかクリアしていないのでLCPとしては残念な評価になります。
一方、上記の画像の場合（pagespeedinsightで測定したあるサイト）は2.5秒以内に表示された部分（緑色部分）が90%の割合を占めているのでLCPとしては素晴らしい結果になります。
LCPに影響する要素
LCPに影響する実際の要素はファーストビューで表示される以下のものだと言われています。
- <img> 要素
- <image>要素内の<svg>要素
- <video> 要素
- url()（CSSグラデーションではなく）関数 を介してロードされた背景画像
- テキストノードまたはその他のインラインレベルのテキスト要素の子を含むブロック
と言われてもいまいちパッとしないと思うので、この記事を例にして説明します。
このページで言うとファーストビューで確認できる「KT LIFE」とのサイトタイトルがテキスト要素の最大コンテンツです。そして記事タイトル下にある画像が最大の画像であり、最大の要素です。
ここが表示されるスピードをLCPでは測っています。
ページのトップに動画があるとしたら、恐らくその動画が最大コンテンツとなるでしょう。
画像をHTMLで表示しているもの以外でも、CSSで背景を表示させている場合なども例外では無く最大コンテンツになります。
pagespeedinsightで自分のサイトを測定すると以下の部分にLCPに影響を及ぼしている要素の確認ができます。
LCPを改善する方法
LCPの評価が下がる要因は以下のものだと言われています。
- サーバーの応答時間が遅い
- レンダリングをブロックするJavaScriptとCSS
- リソースの読み込み時間
- クライアント側のレンダリング
上記の4項目を一つずつ改善すればLCPの評価は確実に改善します。
次ではこの4項目を一つずつ解説します。
サーバーの応答時間が遅い
サーバーの応答時間の問題は、サーバーの性能や状態にかなり依存します。
ほとんどの日本ユーザーの場合は、レンタルサーバーを使用していると思います。
例えばエックスサーバーを使用しているのであれば、サーバーキャッシュ機能、ブラウザキャッシュ機能、Xアクセラレーター機能などの高速化に関しての機能をONにするだけで大幅に改善されます。
他、コンテンツ配信ネットワーク（CDN）を通してJavaScriptを読み込む様にして少しでも
サーバーの負荷を軽減する努力が必要です。
レンダリングをブロックするJavaScriptとCSS
通常WEBサイトが読み込めれるにはHTMLの他にCSSやJavaScriptも同時に読み込まれ、それら全てが読み終えるとページが表示されます。もしCSSやJavaScriptのサイズが大きく、他のリソース読み込みを阻害しているならば、改善しなくてはいけません。
CSSを最適化するには以下の対応をすれば良いでしょう。
- CSSを圧縮する
- 重要でないCSSを後の方で読み込む
- 重要なCSSはインラインで読み込む
CSSを圧縮するにはMinifyツールを使って圧縮しましょう。
重要でないCSSはフッターで読み込むか、もしくは削除しましょう。
そして重要なCSSはインライン（HTMLに直接）で記載していきましょう。
JavaScriptを最適化するには以下の対応をすれば良いでしょう。
- JavaScriptファイルを圧縮する
- 余計なJavaScriptを読み込まない
JavaScriptもCSS同様にMinifyツールでMinify化しましょう。
またページに必要の無いJavaScriptは読み込まない様に制御しましょう。
具体的に削除や圧縮すべきCSSまたはJavascriptのファイルは、pagespeedinsightでサイトスピードを測定した後に以下の部分を確認すれば知る事が出来ます。
リソースの読み込み時間
リソースの読み込み時間は画像の重さ、動画の重さ、CSSやHTMLやJavaScriptの重さなどが主に影響しています。ただ、ここで言うリソースの読み込み時間は大抵が画像の読み込み時間の問題です。
これを改善するには、シンプルに画像を圧縮したりしてサイズを軽くしていく事です。（CSSやJavaScriptも同じです。）あとHTMLも圧縮して出来る限りサイズを節約しましょう。
またCDNを利用すれば、読み込み時間は早くなります。ブラウザキャッシュやサーバーキャッシュも同様に読み込み時間を減らせます。
画像に関しては次世代フォーマットを使用すれば大幅に改善に繋がります。
次世代フォーマットにはJPEG 2000、JPEG XR、WebPがあります。
特にWebPはGoogleが推奨している次世代フォーマットであり、読み込み時間の問題を確実に改善してくれます。
Webpに関しては以下を確認して下さい。
クライアント側のレンダリング
クライアント側のレンダリングに関しては次の最適化が効果があります。
- 重要なJavaScriptを最小限に抑える
- サーバー側レンダリングを使用する
- 事前レンダリングを使用
繰り返しですが、JavaScriptを圧縮して最小限に抑えます。
そして、React、Angular、 VueなどのフレームワークならCDNを利用して、サーバーではなくクライアント上でWebページのさまざまなファセットを完全に処理できる様にしましょう。
それ以外の最適化に関しては、レンタルサーバーを使用していれば基本的に大丈夫だと思います。
LCPを観測するツール
最後にLCPのズレを観測してくれるWEBツールを紹介します。以下のリンクのURL記入欄にWEBサイトのページのURLを貼り付けて「Generat」をクリックして下さい。すると要素のズレをGIF動画で視覚的に表現されます。非常に便利なツールなので利用してみて下さい。
以上が「LCP（最大のコンテンツペイント）の評価を改善する方法」でした。
他にも沢山の改善方法はあると思いますが、技術的な部分が多いのでここでは割愛します。
基本的にWordPressを使用して、テーマを使っていればクリアしている項目ばかりなので安心して下さい。
全てオリジナルでサイトを作成しているって方は他にも色々と検索してもてLCPの技術的改善策を見つけて下さい。
