PRACTICAL GUIDE / 表示速度
個人サイトを重くしないために画像で見直すこと
Webページの表示速度を調べるときの環境・指標・変更前後の比べ方を紹介。測定ツールの点数と実際の使いやすさを分けて確認します。
まずは30秒で
この記事の要点
速度改善は、遅い場面と測定条件を決めるところから始めます。読み込み、操作への反応、表示のずれを分け、一つの変更で何が変わったかを比べます。一回の点数だけで、全利用者の体験が改善したとは判断しません。
1. 遅さを場面と指標に分ける
Web Vitalsでは、主な内容の表示に関わるLCP、操作への応答性を見るINP、レイアウトの安定性を見るCLSがCore Web Vitalsとして説明されています。それぞれ違う体験を見るため、まとめて「速さの点数」とだけ扱わないようにします。
- 最初の内容が出るまで待つのか。
- ボタンを押した後の反応が遅いのか。
- 読み込み途中にボタンや文章が動くのか。
- ページ表示後のゲーム本体が重いのか。
ページ速度の確認だけで、ゲームのフレームレートや対戦通信の品質まで検証したことにはなりません。
2. 同じ条件で変更前後を比べる
比較メモの例
対象：正式な記事URL。
環境：端末、ブラウザ、通信、測定ツールと日時。
変更：大きな画像1枚を調整。
測定：同じ条件で複数回確認。
実画面：文字、画像、ボタンの位置と動作も確認。
未確認：別回線や他の端末。
最初に大きな画像や不要な読み込みなど、根拠のある候補を一つ選びます。画像を軽くした結果、文字が読めなくなったり、重要な絵が欠けたりしないかも見ます。
キャッシュの有無や端末が違えば結果も変わります。設定を複数変えた後で、どれが効いたかを断定しないようにします。
3. 測定の種類と未確認範囲を残す
一定条件での測定と、実際の利用者から得たデータは分けて扱います。実利用のデータが表示されない場合は、ゼロや問題なしではなく、確認できるデータがないと記録します。
良い点数でも、お問い合わせやメニューが使えなければ改善は不十分です。代表的な操作をブラウザで確認し、測定結果とあわせて残します。
参考：Web Vitalsの公式解説（2026年10月19日確認）。画面の確認はスマホ表示のチェック、報告は更新メモへ。