読み込み時間とは？LCPにおける“純処理時間”と改善策

ページスピードインサイト（PageSpeed Insights）でLCP（最大コンテンツの描画）を確認すると、「TTFB」「読み込み遅延」「読み込み時間」「レンダリング遅延」という4つの構成要素に分けられます。今回はこの中でも「読み込み時間（Resource Load Delay）」に注目し、その概要と改善策を紹介します。

読み込み時間とは？

「読み込み時間」とは、LCP要素となる画像やテキストが、実際にサーバーからデータを受信してファイルが完全に読み込まれるまでの“実際のダウンロード時間”です。TTFB（最初のバイトまでの時間）が完了し、リクエストが送信された後の処理時間を指します。LCP要素が画像なら、画像の読み込み時間そのものになります。

PageSpeed Insightsでの確認方法

PageSpeed InsightsのLCP「最大コンテンツの描画」要素の項目を開くと、下記のように4つの指標が分かれています。

• TTFB（最初のバイトまでの時間）
• 読み込み遅延（ファイル取得までの待機）
• 読み込み時間（実データ取得にかかる時間）
• レンダリング遅延（読み込み後の描画処理）

この中で「読み込み時間」が大きい場合、画像やリソースのサイズそのものが大きすぎる、サーバーが遅い、CDN経由で遅延しているなどの可能性が考えられます。

読み込み時間が長くなる主な原因

読み込み時間の増加に繋がる代表的な原因は以下の通りです。

• 画像や動画のファイルサイズが大き過ぎる
• 次世代フォーマット（WebP/AVIF）未使用
• 圧縮（gzip、brなど）がされていない
• CDNが正しく機能していない、キャッシュが効いていない
• サーバーの応答速度が遅い
• 古いHTTPプロトコル（HTTP/1.1）を使用している

読み込み時間は「待っている時間」ではなく、実際にブラウザが処理している時間なので、ファイルサイズ・通信速度・圧縮率に起因します。

読み込み時間の改善策

上記踏まえて読み込み時間は以下で改善可能です。

• 画像サイズの最適化
  使用する画像の解像度を適切にし、実サイズを小さくします。特にスマホ表示では、PC用の画像をそのまま使わないことが重要です。
• WebP・AVIFなど次世代画像フォーマットの活用
  WebPやAVIFは同じ画質でもJPEGより遥かに軽量です。多くのブラウザが対応しているので優先的に導入します。
• gzip・br圧縮の設定
  HTML・CSS・JSなどのテキスト系リソースには、サーバー側でgzipやbr圧縮を有効にします。Xserverなど主要レンタルサーバーでは.htaccessで設定可能です。
• CDNの最適化・キャッシュ制御（可能ならば）
  CloudflareやXserver CDNなどを使っている場合、キャッシュのヒット率や応答時間を見直します。CDN未使用の場合は導入を検討しても良いでしょう。
• HTTP/2・HTTP/3の利用（可能ならば）
  並列通信が可能なHTTP/2やHTTP/3を使うことで、複数リソースの取得が高速になります。サーバー設定やSSL環境が対応していれば自動的に使用されます。

SEO・UXへの影響

読み込み時間は、表示速度の“本体”部分とも言えます。サイズが重い画像やスクリプトを配置すると、TTFBや遅延が良好でも読み込み時間の影響でLCPが悪化してしまいます。

LCPはGoogleの評価指標であるCore Web Vitals（コアウェブバイタル）の指標の一つです。中でも「最大コンテンツの描画」要素はスコアに影響が大きいです。読み込み時間は構成4指標の一つとなります。特にスマホ回線では帯域が狭いため、読み込み時間が全体のボトルネックになることもあります。

読み込み時間はLCPの“心臓部”

読み込み時間は、「表示が遅い」と感じさせる核心です。ページを高速に見せたいなら、次の2つは必ず見直しましょう。

• 画像サイズとフォーマット（WebP/AVIF）
• 圧縮設定（gzip/br）

PageSpeed Insights対策として「読み込み時間」に着目して改善を進めれば、LCPスコアは確実に向上します。前回記事「読み込み遅延」の改善とあわせて、ぜひ実践してみてください。