Webサイトの読み込みスピードは、SEOやユーザー体験に直結します。Googleは検索順位決定の要因として「ページエクスペリエンス」を重視しており、その評価基準の中心にあるのがコアウェブバイタルです。

例えば、ページが数秒遅れるだけで直帰率は大幅に上昇します。Eコマースサイトであれば、売上にも直結する課題です。そのため、サイト読み込みスピード最適化は、SEO対策でありつつ、ユーザー満足度を高める必須施策といえます。

コアウェブバイタルとは、WebサイトのUX（ユーザーが得られる体験）の質を計測するための指標のことです。

Googleはコアウェブバイタルを3つの指標で定義しており、これらを改善することで、サイト読み込みスピードの最適化に貢献できます。

LCP（Largest Contentful Paint）

LCPは「コンテンツの表示最大速度」を示します。ページの読み込みを開始してから、最大のコンテンツ（大きい画像や見出しなど）が表示されるまでの時間を測定しており、ページ訪問の75%以上で2.5秒以下に収めることを推奨されています。

おすすめ改善策

• 画像や動画の最適化（圧縮・WebP化）
  画像をそのまま使用するとサイズが大きくなってしまうため、圧縮してからの使用がおすすめです。WebP化に関しては、後ほど説明いたします。

• レンダリングブロックを防ぐためCSS・JavaScriptの軽量化
  未使用のコードを削除する、ファイルを圧縮する、重要なCSSとそうではないCSSのファイルを分け、重要ではない方は遅延読み込みにするなどがおすすめです。

• CDNを利用して配信速度を改善
  CDNに関しての説明は後ほどいたします。

INP（Interaction to Next Paint）

従来は、FID（First Input Delay／最初の入力遅延時間）がユーザーの操作応答性を測定する指標として用いられていました。FIDは、ユーザーが最初に操作（クリックやタップなど）を行ってから、ブラウザが実際に応答するまでの遅延を計測するものです。

しかし、FIDには「最初の操作しか測定できない」という制限があり、実際の利用体験を正確に反映しづらいという課題がありました。そこでGoogleは2024年に、新たな指標としてINP（Interaction to Next Paint）を正式導入しました。

INPは「ユーザーインタラクションの応答性」を評価します。ユーザーインタラクションとは、クリック・タップ・キーボード入力などの、ユーザーとサイトとの相互作用のことです。INPの目標値は200ms以下が望ましいとされています。
次の章で詳しく説明します。

CLS（Cumulative Layout Shift）

CLSは「視覚的安定性」を評価します。広告や画像の遅延読み込みにより、テキストが突然移動した経験があると思います。これによりボタンやリンクを間違ってクリックしてしまい、ユーザーのストレスやサイト離脱に繋がってしまいます。ページ訪問の少なくとも75%で CLSを0.1未満にすることを推奨されています。

おすすめ改善策

画像や広告枠にあらかじめサイズ指定を行う
imgタグにwidth属性とheight属性を付けると、画像が読み込まれる前に画像のスペースを確保してくれるため、読み込み後に前後の要素が突然移動するようなことは起こりにくくなります。

<img src="img/image.jpg" width="500" height="200" alt="画像">

これらのコアウェブバイタルの計測方法

LCPをはじめ、コアウェブバイタル（LCP・INP・CLS）は、Googleの無料ツールで簡単に計測できます。

代表的なのは以下の3つです。

• PageSpeed Insights：URLを入力するだけで、3指標をまとめて確認可能。

• Chrome DevTools（Lighthouse）：開発中のページで詳細な分析と改善提案を表示。

• Google Search Console：「ウェブに関する主な指標」でサイト全体の実データを確認できる。

これらを組み合わせることで、ページ単体からサイト全体まで、包括的にパフォーマンスを把握できます。

INPは「ユーザーインタラクションの応答性」を評価します。ユーザーインタラクションとは、クリック・タップ・キーボード入力などの、ユーザーとサイトとの相互作用のことです。INPの目標値は200ms以下が望ましいとされています。

INPは特にフロントエンド開発者が直面する課題です。改善の具体策を以下に示します。

JavaScript処理の最適化

長時間ブロックするJavaScript処理はINP悪化の要因です。コードスプリッティングや不要ライブラリの削除、遅延読み込みの導入が効果的です。

UI応答の優先度設定

ユーザー操作に関係する処理は優先度を高めるべきです。例えば、ボタンクリックに関連しない重い処理をWeb Workerに委譲することで、応答性を改善できます。

アニメーションの最適化

CSSアニメーションはGPUで処理されるtransformやopacityを活用すると、応答遅延を避けられます。特にモバイル環境では大きな差が出るポイントです。

CDN（Content Delivery Network）は、様々な地域に分散されたサーバー群のことです。

ユーザーに最も近いサーバーからコンテンツを配信する為、通信量の影響を受けにくく、サイト読み込みスピード最適化に大きく貢献します。

CDNのメリット

• サイト読み込み時間を短縮
  地理的に離れたユーザーでも、最寄りのサーバーからデータを取得できるため、読み込み時間の短縮に繋がります。

• サーバーへの負荷軽減
  静的コンテンツをCDN側でキャッシュしてくれるため、Webサイト本体のサーバーへの負担を減らします。

• トラフィック分散による安定性向上
  同時アクセスが集中した場合でも負荷を分散できるため、サイトの遅延やサーバーダウンを防ぎます。

画像の最適化はサイト読み込みスピード最適化に直結します。

WebP（ウェッピー）はGoogleが開発した次世代画像フォーマットで、JPEGやPNGと比べて軽量・高品質なのが特徴です。また、PNGのような透過や、GIFのようなニメーションにも対応しており、他画像形式と比較しても高性能と言えます。

実装例

<picture>
  <source srcset="/img/image.webp" type="image/webp">
  <img src="/img/image.jpg">
</picture>

このように書くことで、WebPに対応しているブラウザにはWebPを表示し、対応していないブラウザには指定のJPEGやPNGを表示できます。

WebP対応ブラウザ：https://caniuse.com/?search=webp

サイト読み込みスピード最適化を進める際は、以下の流れで取り組むのが効果的です。

1. 現状分析

   • PageSpeed InsightsやLighthouseで数値を計測し、LCP・INP・CLSのどれがボトルネックか把握する。

2. 優先度付け

   • すべてを同時に直す必要はありません。インパクトの大きい要素（例：画像最適化やCDN導入）から優先的に改善する。

3. 施策の実装

   • LCP改善：画像をWebPに変換、CSS/JSの軽量化

   • INP改善：JavaScript処理の最適化、Web Worker活用、UI応答性向上

   • CLS改善：画像サイズの事前指定、広告枠の安定化

   • CDN導入：配信距離を短縮し、読み込み速度を根本から改善

4. 再計測と継続改善

   • 実装後に再度ツールで計測し、改善の有無を確認。数値が改善されていない場合は別のボトルネックを探る。

一度の施策で完璧を目指す必要はありません。まずはLCPやINP、CLSなど、影響の大きいポイントから段階的に改善を進めましょう。

今日からでも、画像の最適化やCDNの導入、JavaScriptの軽量化など、手の届く改善から始めることがサイト読み込みスピード最適化を成功させる第一歩となります。