Core Web Vitals（GoogleのUX指標）の全貌と改善方法【中編】

LCPに影響を与える要素と解決策

一般的にLCPに影響を与えるといわれる代表的な要素は、「画像ロードに関する課題」「ページ描画処理をブロックするサードパーティを含むJavaScript」「サーバの応答時間」の3つです。

「画像ロード」に関する課題と解決策

LCPのスコアを悪くする要素として、画像の扱い方が挙げられます。企業サイトの速度改善を支援する際、画像サイズ・画像の読み込み方式がLCPに影響を与えるケースに頻繁に直面します。

画像サイズが問題である場合は、画像が劣化しない範囲でサイズを圧縮する必要があります。それまで画像サイズの圧縮を行っていなかったWebサイトの場合、平均してWebサイト全体の画像サイズをおよそ50～60％の範囲で圧縮できました。中には、ダウンロードする画像サイズを圧縮しただけで、LCPが1秒以上短縮されたケースなどもあるので、やはり画像サイズが肥大している場合はぜひサイズの圧縮を検討することをおすすめします。

また、次世代画像フォーマットといわれるGoogleが開発した「WebP（ウェッピー）」を採用することもおすすめです。WebPは画像表示速度の短縮を目的に規格された画像形式であるため、画像サイズの最適化という観点で大きなメリットがあります。

かつては、WebPに対応しているブラウザが少なく、導入に踏み切りづらい側面がありましたが、2021年9月時点では主要なブラウザでサポートが行われるようになってきているので、WebPの導入も検討されることをおすすめします。

専門的な話になりますが、画像の読み込みタイミングにメリハリをつけることもLCPの改善につながります。

「メリ」にあたるのが、優先度の低い画像の読み込みをページ表示直後には行わないという施策です。最初の画面（ファーストビュー）に収まらない画像は、画像の遅延読み込み指定を行う「loading属性」の「lazy」を利用して遅延読み込みさせることが鉄則になります。対象の画像が配置されるエリアまでスクロールされて初めて画像を読み込むようになるので、初回の読み込みリソースを軽減し、結果的にLCP要素が表示される時間を短縮することができます。

逆に「ハリ」にあたるのが、優先度の高い画像の読み込みを高速化する施策です。最初の画面で表示される画像には、画像読み込みを速めるために「loading属性の『eager』を付与する」「プリロード（事前読み込み）を行う」などの手法で、LCPを改善できます。

「JavaScript」に関する課題と解決策

ブラウザは「JavaScript」を検知するとJavaScriptのダウンロード・解析を優先して処理します。つまり、JavaScriptがあると、ブラウザはページ描画準備のための作業を中断してしまうことになります。そうなると、当然ページ描画が遅れてしまうので結果的にLCPのスコアが悪化してしまいます。

対処法としては、一般的にJavaScriptを非同期実行する「async」や「defer」属性を付与することが推奨されています。これは「非同期」の言葉通り、対象のJavaScriptの解析・実行をその他の作業と切り分けて行う手法です。ページ描画の作業を中断させないため、原則的には有効です。

ただし非同期を実装する場合は「JavaScript間の依存関係」に注意する必要があります。Asyncとdeferは「非同期でJavaScriptを読み込む」ことに変わりはありませんが、asyncは実行順序が保証されていない、deferは実行順序が保証されているという違いがあります。

例えば、下図のような依存関係があるとします。BというJavaScriptはAというJavaScriptが実行された後でないと実行できないことがあります。こうした制約がある場合は「defer」を付与する必要があります。また、C・Dのようにそれぞれが独立していて、他のJavaScriptと依存関係がない場合はasyncを付与する必要があります。こうした見極めが必要になります。

JavaScript間の依存関係

また、JavaScriptを非同期で読み込んでも解析・実行自体は行われているという事実も認識しておく必要があります。JavaScriptの実行が初期描画前に行われてしまうとLCPに影響がある場合があります。

その際におすすめなのは、初期描画に必要のないJavaScriptを実行しないための実装を行うことです。具体的には、HTMLの上部にJavaScriptが記述されており、かつ初期描画に影響しないものであれば、HTMLの下部に移設して実行順序を遅らせる方式です。こうすることで、初期に実行されるJavaScript自体を削減することができ、結果的にLCPの高速化に寄与するケースが多いです。

HTML上部のJavaScriptをHTML下部へ移設

「サーバの応答時間」に関する課題と解決策

サーバの応答性能が高まれば、よりWebページの表示速度全般に好影響があります。サーバの応答性能は、ページスピードインサイトの監査項目で確認することができます。ブラウザからのリクエストに対し、600ms以上応答に時間を要すると、以下の例のように、監査項目に引っかかってアラートがあがります。

サーバの応答速度に関する監査項目(https://web.dev/time-to-first-byte/) 　出典：web.dev

サーバの応答性能を阻害している要因としては、スペック自体の問題やキャッシュの利用有無、サーバに負荷をかけやすいアプリケーションロジックなど、さまざまなことが考えられます。この点に関しては、一律の対処方法がないので、サーバの応答性能に課題がある場合は、インフラ担当者とも協議するべきです。

また、サーバ側の設定でHTML等のリソースを通信する際に、通信中のリソース圧縮（gzip圧縮）の設定が行われていないケースもあります。こちらは、以前はサーバ、クライアントサイド双方の負担を考慮してオプションの扱いでしたが、現在はほとんどのWebサーバで標準設定で実現ができますので、設定していない場合は設定を行うことをおすすめします。

最終回となる次回のCore Web Vitals（GoogleのUX指標）の全貌と改善方法【後編】では、残りの2つの指標「FID」「CLS」に影響を与える要素と解決策について詳しく紹介します。