はじめに
本書の目的
本書は、Webパフォーマンスの主要な指標とそれらがユーザー体験や検索順位に与える影響を、わかりやすく解説します。特にGoogleのCore Web Vitals（ユーザー体験を表す代表的な指標）を中心に扱います。実際の改善に使える知識を目指しています。
なぜ重要か
ページ読み込みが遅いとユーザーはすぐ離れ、売上や問い合わせが減ります。指標を使うと、問題を数値で把握でき、優先順位をつけて改善できます。検索エンジンも速度や体験を評価に使うため、SEO対策にもなります。
誰に向けているか
開発者、デザイナー、サイト運営者、プロダクト担当の方に向けています。専門知識がなくても理解できるよう、具体例を交えて説明します。
読み方の案内
第2章で主要指標を詳しく、第3章でその他の代表的指標を紹介します。第4章で測定ツールの使い方を説明し、実践的な改善に結びつけます。まずは指標の意味を知り、実際に計測してみてください。
主要なWebパフォーマンス指標
LCP（Largest Contentful Paint）
ページ内で一番大きなコンテンツ（大きな画像やメインの見出しなど）が表示されるまでの時間です。読み込みの速さを直感的に示します。例：トップページのメイン画像が表示されるまで3秒かかると、LCPは3秒です。
改善のコツ：画像を軽くする、遅延読み込みを使う、サーバー応答を速くする。
INP（Interaction to Next Paint）
ユーザーの操作（クリックやタップ）に対して画面が反応するまでの体感遅延を測ります。従来のFIDの代わりに使われます。例：メニューを押してから開くまで0.2秒なら良好です。
改善のコツ：長いスクリプトを短く分割する、イベント処理を最適化する。
CLS（Cumulative Layout Shift）
ページの要素が不意に動く量を示します。広告や画像読み込みでボタンが移動するとスコアが悪くなります。例：記事を読んでいたら文章が下に押し出されると高くなります。
改善のコツ：画像や広告にサイズを指定する、動的挿入は場所を確保してから行う。
その他の代表的指標
First Contentful Paint (FCP)
ページに最初のテキストや画像など「目に見えるコンテンツ」が表示されるまでの時間です。例：サイトのロゴや見出しが出るまでの秒数。早いほどユーザーが「読み込みが始まった」と感じます。改善策は画像の遅延読み込みや重要なCSSのインライン化です。
Speed Index
ページ全体が視覚的に表示されるまでの速さを示す指標です。単純な秒数でなく、画面がどれだけ早く完成に近づくかを表します。例えば、上部だけ先に表示される場合と、段階的に表示される場合で差が出ます。改善はコンテンツの優先度付けや不要なアニメーションの削減です。
Time to Interactive (TTI)
ページ上のボタンや入力欄が実際に反応するまでの時間です。見た目は表示されても、操作できないことがあります。対策は長時間実行されるスクリプトを分割したり、Webワーカーを使うことです。
Total Blocking Time (TBT)
ユーザーの操作が阻害される「合計の時間」です。長い処理（例：200ms以上）が続くとブロック時間が増えます。TBTを減らすには、重い処理を小さな塊に分けることが有効です。
サーバー・システム指標（応答時間・スループット・CPU・メモリ・エラーレート）
応答時間はリクエストに対する返答の速さ、スループットは単位時間あたりの処理数です。CPU・メモリ使用量は負荷の指標で、エラーレートは失敗リクエストの割合を示します。改善策はキャッシュ導入、クエリ最適化、リソースの水平スケールなどです。
測定ツール
Google PageSpeed Insights
- 何ができるか：Core Web Vitals（LCP・FID/INP・CLS）を含む総合診断を行います。実測（フィールド）と模擬（ラボ）両方のデータを表示します。
- 使い方：URLを入力するだけでレポートが出ます。改善案は具体的なファイルや優先順位で示されます。
- 活用ポイント：モバイルとデスクトップの両方で確認し、提案を優先順位順に実施してください。
GTmetrix
- 何ができるか：読み込みのウォーターフォールチャートで、どのリクエストが時間を使っているかを可視化します。ページ速度やスコアも示します。
- 使い方：テスト設定で地域やブラウザを選べます。詳細なチャートを見て問題箇所を特定します。
- 活用ポイント：画像やスクリプトの遅延を見つけやすいです。最初に問題の要因を絞るのに便利です。
WebPageTest
- 何ができるか：世界中のロケーションや端末条件で細かくテストできます。詳細なタイムラインやフィルムストリップで実際の表示過程を確認できます。
- 使い方：テスト条件を細かく設定して複数回実行します。結果は非常に詳細です。
- 活用ポイント：地域差やネットワーク条件の影響を調べるときに有効です。
使い分けと実践のコツ
- 初期診断はPageSpeed Insights、要因特定はGTmetrix、環境差の検証はWebPageTestを使うと効率的です。
- 複数回テストし、モバイルとデスクトップ両方を確認してください。実際のユーザー環境を想定して検証を行いましょう。
