Kyoei Works officialブログ

BLOG

  1. TOP
  2. BLOG
  3. 制作ノウハウ・Tips
  4. Webサイトの表示速度改善術〜Core Web Vitalsを最適化する実践手順

Webサイトの表示速度改善術〜Core Web Vitalsを最適化する実践手順

Webサイトの表示速度は、ユーザー体験だけでなくSEO評価にも直結する重要な要素です。
「検索順位が伸び悩んでいる」「直帰率が高い」「広告は見られているのに成果につながらない」といった課題の背景には、表示速度の遅さが隠れているケースも少なくありません。

特にGoogleが公式に検索順位評価の指標としている Core Web Vitals（コアウェブバイタル） は、今やWebサイト運用において無視できない存在です。

本記事では、Core Web Vitalsの基礎知識から、現場で実践しやすい具体的な改善方法までを分かりやすく解説します。

Core Web Vitalsとは？Googleが重視する3つの指標

Core Web Vitals

Core Web Vitalsとは、Webページのユーザー体験の質を数値で評価するためのGoogle公式指標です。
主に以下の3つの指標で構成されており、それぞれ異なる観点からサイトの使いやすさを測定します。

LCP（Largest Contentful Paint）

LCPは、「ページを開いてから、最も大きなコンテンツが表示されるまでの時間」を示す指標です。
多くの場合、ファーストビューに表示されるメインビジュアル画像や、ヒーローセクションのテキストが対象となります。

  • 良好：2.5秒以内
  • 改善が必要：2.5〜4.0秒
  • 不良：4.0秒以上

LCPが遅いと、ページが表示される前に離脱されやすくなり、第一印象を大きく損ないます。

INP（Interaction to Next Paint）

INPは、「クリック・タップ・入力などの操作に対して、画面が反応するまでの時間」を測定する指標です。
従来のFIDに代わる新指標で、ページ全体を通した操作の快適さをより正確に評価します。

  • 良好：200ms以内
  • 改善が必要：200〜500ms
  • 不良：500ms以上

見た目の表示が速くても、クリック時の反応が遅いとユーザーは強いストレスを感じます。 JavaScript処理が多いサイトでは、INPが悪化しやすい傾向にあります。

CLS（Cumulative Layout Shift）

CLSは、「ページ表示中に、レイアウトがどれだけズレたか」を数値化した指標です。

画像や広告が後から読み込まれることで、ボタンやテキストの位置がズレる現象は、多くのユーザーに不快感を与えます。

  • 良好：0.1以下
  • 改善が必要：0.1〜0.25
  • 不良：0.25以上

視覚的な安定性は、ユーザー体験の質を大きく左右する重要な要素です。

表示速度を測定する方法とツール紹介

表示速度測定ツール

改善に取り組む前に、まずは現状を正しく把握することが重要です。
代表的な測定ツールを紹介します。

PageSpeed Insights

Google公式の分析ツールで、URLを入力するだけでCore Web Vitalsの評価と具体的な改善提案を確認できます。
モバイルとデスクトップの両方を必ずチェックしましょう。

Google Search Console

Google Search Consoleの「ウェブに関する主な指標」レポートでは、実際のユーザーデータをもとに、問題のあるURLを確認できます。
サイト全体の傾向を把握するのに適しているツールです。

Lighthouse機能

Chrome DevToolsに内蔵されているLighthouseでは、ローカル環境で詳細なパフォーマンス分析が可能です。
施策前後のスコア比較や、開発中ページの検証に役立ちます。

LCP・INP・CLSのスコアを改善する方法

LCP・INP・CLSのスコア

それぞれのスコアを改善する具体的な改善方法を紹介します。

LCPの改善方法

LCP改善のポイントは、「ファーストビューで最も重要な要素を、できるだけ早く表示すること」です。
ユーザーが最初に目にする部分の表示速度を優先的に最適化しましょう。

＜実践ポイント＞

  • ファーストビューに表示される画像や見出しを最優先で読み込む
  • 画像サイズを適切に調整し、WebPなどの軽量フォーマットを使用する
  • ファーストビュー画像には遅延読み込み（lazy-load）を使用しない
  • CSSやJavaScriptが表示をブロックしていないか確認する
  • サーバー初期応答（TTFB）が遅い場合は、キャッシュやCDNの導入を検討する

INPの改善方法

INPは、ユーザー操作時の「待たされ感」を減らすことが重要です。
クリックやタップ後に処理が集中しないよう、JavaScriptの設計を見直しましょう。

＜実践ポイント＞

  • クリック時に実行されるJavaScript処理を洗い出す
  • 使用していないライブラリや不要なスクリプトを削除する
  • 初期表示時に重い処理をまとめて実行しない
  • deferやasync属性を使い、処理タイミングを後ろにずらす
  • アナリティクスや外部ツールは、ユーザー操作後に読み込む

CLSの改善方法

CLS対策では、「表示前からレイアウトを確定させておく」ことが重要です。
後から要素が差し込まれない設計を意識しましょう。

＜実践ポイント＞

  • 画像・動画・iframeには必ず幅と高さを指定する
  • 広告やバナーは、あらかじめ表示スペースを確保する
  • 後から読み込まれる要素は、ページ下部や固定エリアに配置する
  • Webフォントによるズレを防ぐため、font-display: swapを設定する
  • 表示・非表示が切り替わるUIは、レイアウトに影響しない設計にする