はじめに
概要
本記事は、Web ページの表示速度や体感速度を改善したい人向けの入門ガイドです。Google が推奨する指標やツールを使って、何を計測し、どのように改善するかを丁寧に解説します。特に Core Web Vitals や PageSpeed Insights、Search Console、Chrome DevTools の使い方と、SEO との関係性に重点を置いています。
なぜ web パフォーマンスが大切か
表示が遅いと訪問者はすぐ離れてしまいます。ユーザーの離脱はアクセス数や収益に直結しますし、検索順位にも影響する可能性があります。軽くて速いページは、訪問者に良い印象を与え、結果としてサイトの評価向上につながります。
この記事で学べること
- Web パフォーマンスの基本概念と重要性
- Core Web Vitals の3指標の意味と改善のヒント
- PageSpeed Insights の見方とスコアの解釈
- Search Console と Chrome DevTools を使った分析手順
読み方のガイド
各章で実例や画面の見方を紹介します。技術的な部分は具体例で補足するので、初めての方でも段階的に理解できます。まずは次章で、Google が重視する「Web パフォーマンス」とは何かを見ていきましょう。
Google が重視する「Web パフォーマンス」とは何か
Webパフォーマンスの捉え方
Google は単にページの読み込み時間だけを重視していません。ユーザーがページを見て感じる「使いやすさ」や「快適さ」を重視します。具体的には、表示の速さ、操作への反応、画面の安定性を含む総合的な体験を指します。
具体的に見るポイント
- 表示の速さ: ページが視覚的に表示されるまでの時間。たとえば最初の主要な画像や本文がすぐ表示されると快適です。
- 操作の反応: ボタンを押したときにすぐ反応するか。遅れると使いにくさを感じます。
- レイアウトの安定性: 読んでいる途中で文字や画像が動かないか。勝手に移動すると誤タップの原因になります。
身近な例
スマホで記事を開いて、画像が後から読み込まれて本文が下に押し出されると不快に感じます。読み込みが遅くてボタンを何度も押してしまうと離脱につながります。
検索との関係
Google はこれらの指標を評価し、良好な体験を提供するページを検索で優遇します。ただし、コンテンツの質や信頼性など他の要素も重要です。最初はユーザーの体感を第一に改善すると良い結果につながります。
Core Web Vitals の3つの主要指標
LCP（Largest Contentful Paint）
ページのメインとなるコンテンツが表示されるまでの時間を示します。たとえば、ページ上の大きな画像や見出し、記事本文が目に見えるようになるまでの時間です。良好な目安は2.5秒以下です。
改善のコツ：画像を圧縮・遅延読み込みし、サーバー応答を速め、レンダリングを妨げる不要なCSSやJavaScriptを減らします。
INP（Interaction to Next Paint）／旧 FID（First Input Delay）
ユーザーがクリックやキー入力をしたときに画面が反応する速さを評価します。INPは実際の操作全体の応答性を測ります。目安は200ms以下です。FIDは最初の操作だけを見ますが、INPがより実用的です。
改善のコツ：長時間実行するスクリプトを分割し、イベント処理を短く保ち、メインスレッドの負荷を下げます。
CLS（Cumulative Layout Shift）
ページのレイアウトが予期せず動く量を数値化します。広告や画像の読み込みで文字やボタンが移動すると大きくなります。良好な値は0.1以下です。
改善のコツ：画像や広告に幅・高さを指定してスペースを確保し、動的に挿入する要素は事前に領域を予約します。
Core Web Vitals が SEO で重要視される理由
概要
Google は検索結果でユーザーに「使いやすいページ」を届けたいと考えています。Core Web Vitals（LCP、INP、CLS）は、読み込みの速さ、操作の反応、画面の安定性といった体感面を数値化した指標です。良好なスコアはユーザー満足度の向上につながり、検索順位にも好影響を与えます。
なぜ検索順位に影響するのか
・ユーザー行動に直結するため：表示が遅いと離脱が増え、滞在時間やクリック率が下がります。検索エンジンはこうしたシグナルを重視します。
・同じ内容のページが複数あるときの判断材料になるため、速度や安定性が優先順位を決める要素になります。
実務的な意味合い
したがって、コンテンツや被リンクの改善に加え、パフォーマンスの改善は必須です。具体的には：
– LCP改善：画像を最適化、重要なリソースを preload、サーバー応答を短縮
– INP改善：長い JavaScript 実行を分割し、不要なスクリプトは遅延読み込み
– CLS改善：画像や広告にサイズを指定し、フォントの読み込みでレイアウトが崩れないようにする
測定と継続的改善
PageSpeed Insights や Search Console、Chrome DevTools で測定して優先順位を決めます。小さな改善を積み重ねることで検索での評価が安定して向上します。
PageSpeed Insights とは？できることとスコアの意味
概要
PageSpeed Insights（PSI）は Google が提供する無料ツールで、URL を入力するだけでページの表示速度や体感の良さを診断します。モバイルとパソコン別に点数と詳細を示し、改善点を分かりやすく教えてくれます。
主な機能
- パフォーマンススコア（0〜100）表示
- Core Web Vitals を含む主要指標の計測
- 改善できる項目と具体的な対策の提示（例：画像の圧縮、遅延読み込み、不要なスクリプトの削減）
- フィールドデータ（実際のユーザー）とラボデータ（シミュレーション）の両方を表示
スコアの見方
- 90〜100：良好、ほとんど対応不要
- 50〜89：改善の余地あり、優先度をつけて対応
- 0〜49：重大な問題あり、早急な対策が必要
一般的に 70 点以上を目標にすると良いです。
フィールドデータとラボデータの違い
フィールドデータは実際の利用環境から収集した結果で、現実のユーザー体験を示します。ラボデータは Lighthouse による再現実験で、原因の特定や再現がしやすい点が利点です。両方を見て総合的に判断してください。
改善提案の活用方法
PSI の提案は優先順位と詳細手順が付くので、まず影響の大きい項目から対応します。たとえば大きな画像を圧縮して遅延読み込みを設定すると、体感速度が大きく改善します。
Search Console でサイト全体のパフォーマンスを把握する
Google Search Console（以下 GSC）は、サイト全体のパフォーマンス傾向を把握するのに便利です。特に「エクスペリエンス → ウェブに関する主な指標」レポートで、モバイル・PC別に「良好」「改善が必要」「不良」の URL 数を確認できます。
- 何が見られるか
- デバイス別の URL 分布（良好・要改善・不良）
- 問題の種類ごとの該当 URL（例：LCP が遅い、CLS の問題）
-
サンプル URL をクリックして詳細や検出日時を確認
-
実務での使い方（具体例）
- まずモバイル／PC別に不良の多い方を確認します。モバイル優先ならモバイルを重視します。
- 問題一覧をテンプレートや URL パターンで絞り込み、どのページ群が影響大かを把握します。
- インプレッションやトラフィックが多いページを優先的に改善します。GSC のパフォーマンスレポートと併用すると判断が早くなります。
-
修正後は URL 検査でライブテストを実行し、問題が解消されたら再クロールをリクエストします。
-
補助機能
- レポートは期間指定とエクスポートが可能で、チーム共有や進捗管理に便利です。
定期的にレポートをチェックし、傾向をつかんで優先順位を決めると効率よく改善できます。
Chrome DevTools で深くパフォーマンス分析を行う
準備と録画方法
Chrome の DevTools を開き、上部の「Performance」パネルを選びます。録画ボタンを押して、問題が出る操作（ページ遷移やスクロール）を行い、録画を停止します。記録は CPU 使用や描画の様子を可視化します。
主要表示の見方
- Filmstrip（サムネイル）: 時間ごとの見た目を確認できます。どの瞬間で表示が乱れるか分かります。
- タイムライン（フレーム）: スクリプト実行、スタイル計算、レイアウト、ペイントが帯状に表示されます。
- Flame chart（フレームチャート）: どの関数が長く実行されたかを示します。クリックでソースへ移動できます。
よくあるボトルネックと対処例
- 長時間の JavaScript 実行: 関数を分割して遅延実行や Web Worker に移す。
- レイアウト再計算（リフロー）: 頻繁に DOM を書き換えないようにまとめて更新する。
- 大きな画像や同期的な読み込み: 画像は遅延読み込み、スクリプトは非同期化します。
実践的な解析手順（短め）
- 問題の再現を録画する
- Filmstrip で問題時刻を特定する
- Flame chart で重い関数を探す
- ソースを確認し、分割・非同期化・キャッシュを検討する
この流れで原因を絞り込み、対策を小さく試して再測定してください。
