読み込み遅延とは？Webサイト表示を遅くする"目に見えないボトルネック"と改善策

ページスピードインサイト（PageSpeed Insights）に取り組む中で、最も難しく感じるポイントの一つが「LCP（最大コンテンツの描画）」の改善ではないでしょうか。この中のある4つの指標の一つが読み込み遅延です。今回は読み込み遅延の概要から主な原因、PageSpeed Insightsでの確認方法、そして具体的な改善策までを解説します。

LCPの読み込み遅延とは？

PageSpeed Insightsでは、LCPに関する内訳が以下の4つに分類されています：

• TTFB（最初のバイトまでの時間）
• 読み込み遅延
• 読み込み時間
• レンダリング遅延

このうち「読み込み遅延」とは、サーバーから最初のレスポンス（TTFB）が返ってきたあと、LCP要素（画像やテキストなど）が実際に描画されるまでにかかる"待ち時間"を指します。つまり「読み込み遅延＝LCPファイル取得の待機」となります。ファイル取得の待機遅延にはLazyloadやJavaScriptによるリクエスト遅延、ネットワーク・優先度・他リソースとの競合が影響します。

読み込み遅延が発生する主な原因

読み込み遅延の発生要因は主に以下であると考えます。

• 画像や動画の数が多い
• 画像や動画のサイズが大きすぎる
• LCP要素がlazyload対象になっている
• JavaScriptやCSSの読み込みがブロッキングしている
• サードパーティスクリプトの影響
• CDNキャッシュミスやネットワーク遅延
• HTTP/1.1など古い通信方式を利用している

ざっくりいうと画像やJavaScriptなど外部ファイルが影響します。なので外部ファイル数を減らすことが第一ポイントです。また、画像は背景画像にしたりlazyloadといった遅延読み込みをします。また、LCP要素に設定された画像が遅延読み込み（lazyload）したり、非同期で取得されていた場合などは、運営者側の意図と実際の表示速度のギャップを生みます。

読み込み遅延の確認方法

ページスピードインサイト（PageSpeed Insights）の「最大コンテンツの描画」要素を見ると読み込み遅延の状況が確認できます。

LCPの表示時間に対して「TTFB」「読み込み遅延」「読み込み時間」「レンダリング遅延」それぞれの割合と時間が表示されます。

読み込み遅延の改善策

読み込み遅延の改善は、LCP要素自体に対する施策とページ全体への施策で改善可能です。まず行うべくは外部ファイル数の見直しです。

• 画像数を減らす
  できる限り画像は少ない方が理想です。難しい場合は背景画像とすることでIMGタグ数を減らすことができます。
• 外部JavaScriptの厳選
  該当ページで使用しないJavaScriptは読み込まない、といったきめ細かな対応も検討します。設定ファイルを1つにしたりするなど、外部ファイル数を減らすことも有効です。広告タグ、SNS埋め込み、解析タグなどのサードパーティスクリプトも影響します。
• CSSのインライン化
  CSSを外部ファイルとすることはキャッシュ対策としては有効です。ただ、外部ファイルの読み込みは読み込み遅延に影響があるのでインライン化した方が良いです。

次に行うのはサイズの適正化です。

• 画像サイズの最適化
  使用箇所の適正サイズにリサイズします。
• 次世代画像フォーマットの使用
  WebPやAVIFといった次世代フォーマットを活用します。
• CSSの縮小化
  CSSネスト（入れ子）を使用することでCSSを縮小できます。また、全ページで全てのCSSを読み込まず、該当ページで使用しているCSSのみに厳選することも最適化に繋がります。

さらにその他の改善策も施します。

• 外部ファイルの遅延読み込み、非同期化
  画像や背景画像は遅延読み込みをします。JavaScriptは「defer」または「async」を活用して非同期読み込みにします。
• プリロードの活用（preload）
  画像やフォントなどLCPに関わる重要リソースには を用いることで、先に取得させることが可能です。
• LCP画像をLazyload対象から除外
  LCP要素には「loading="lazy"」など遅延読み込み対象から外します。

Lazyload対象から除外について補足です。LCP対象の画像は以下のように明示的に通常読み込みとします。

<img src="xxx.webp" width="xxx" height="xxx" fetchpriority="high">

さらに「fetchpriority="high"」を指定すると優先的なリソースとして扱われるようになります。

読み込み遅延とSEO・UXへの影響

Googleが提唱するCore Web Vitals（コアウェブバイタル）の一部であるLCPスコアの指標の一つであるのが読み込み遅延です。ユーザーの体感速度にも関わるため、UX・SEOともに重要な評価指標です。

特にスマートフォンユーザーでは回線環境により遅延が顕著になるため、LCPを構成する読み込み遅延への配慮は必須となります。

読み込み遅延はLCPの本丸

読み込み遅延は、表示速度のボトルネックのひとつであり、LCPを改善するには避けて通れない要素です。再掲となりますが、以下について改善に取り組むことで読み込み遅延対策となります。

• 画像数を減らす
• 外部JavaScriptの厳選
• CSSのインライン化
• 画像サイズの最適化
• 次世代画像フォーマットの使用
• CSSの縮小化
• 外部ファイルの遅延読み込み、非同期化
• LCP画像をLazyload対象から除外

PageSpeed Insightsのスコアが低いままでお困りの方は、読み込み遅延に着目することで大きく改善する可能性があります。