ページの表示が遅いとき、原因の多くは転送量にあります。とはいえ「重い」という感覚のまま手を付けると、効果の薄い場所を削って時間を使ってしまいがちです。大事なのは、まず何がどれだけの容量を占めているかを数字で把握し、削減の効果が大きいものから順に手を入れることです。この記事では、ページの転送量を見直す手順を、単位の理解から内訳の計測、削減、キャッシュ設定まで順番に紹介します。
1. サイズと速度の単位を正しく把握する
最初に押さえておきたいのが単位です。ここを取り違えると、見積もりが8倍ずれることがあります。まず、1バイトは8ビットで、記号は大文字のBがバイト、小文字のbがビットです。回線速度はビット単位で表記されるため、1Gbpsの回線で実際に転送できるのは毎秒約125メガバイトです。もう1つが1000区切りと1024区切りの違いで、ストレージの表記や通信量の請求は1000区切り、OSのファイルサイズ表示は1024区切りが使われることが多く、単位が上がるほど差が広がります。Data Size Converter を使うと、入力したサイズが両方の区切りで同時に表示され、あわせて回線別のダウンロード時間の目安も確認できます。「このページは3MBある。モバイル回線では何秒かかるのか」を具体的な数字にすることが、削減の出発点になります。
この手順で使うツール
Data Size Converter
B / KB / MB / GB を10進・2進の両方で相互変換
2. 何が容量を占めているか内訳を出す
次に、実際の内訳を計測します。ブラウザの開発者ツールのネットワークタブを開き、キャッシュを無効にした状態でページを再読み込みすると、リソースごとの転送量と合計が確認できます。ここで見るべきは、種類別の割合です。多くのサイトでは画像が過半を占め、次いでJavaScript、フォント、CSSと続きます。合計だけでなく「1ファイルで突出して大きいもの」を探すのがコツで、削減の効果はそこに集中していることがほとんどです。APIのレスポンスが大きい場合は、JSON Size Analyzer でどのキーや配列が容量を食っているかを分解して確認できます。不要な項目まで返していないか、画像のURLではなく画像データそのものを埋め込んでいないか、といった無駄がここで見つかります。まず内訳を出し、上位2つか3つに絞って対処する、という進め方が効率的です。
この手順で使うツール
JSON Size Analyzer
JSONのキーごとのサイズ貢献度をツリー表示で可視化
3. 画像を最適化する
内訳の上位が画像であれば、まずそこから手を付けます。効果が大きい順に、表示サイズに合わせたリサイズ、形式の変更、そして品質の調整です。特に見落とされがちなのが1つ目で、幅400ピクセルで表示する画像に幅2000ピクセルの元データを使っていると、必要量の何倍もの転送が発生します。形式については、写真であればWebPやAVIFに変換すると、見た目をほぼ保ったまま大きく削減できます。WebP Studio では、変換前後のサイズと削減率を比較しながら品質を調整できます。ロゴやアイコンのようなイラスト系はSVGが適しており、SVG Optimizer で不要なメタデータや小数点以下の桁を削ると、さらに軽くなります。加えて、画面外の画像に遅延読み込みを設定すると、初回表示に必要な転送量そのものを減らせます。
この手順で使うツール
WebP Studio
PNG/JPG → WebP/AVIF 一括変換
4. 転送するデータ自体を減らす
画像の次に効くのが、テキスト系リソースの見直しです。まず確認したいのが、サーバーで圧縮が有効になっているかです。gzipやbrotliが効いていれば、HTMLやCSS、JavaScriptは大きく縮みます。レスポンスヘッダーの content-encoding を見れば確認できます。次に、使っていないコードやライブラリが含まれていないかを見ます。APIのレスポンスについては、必要な項目だけを返すようにする、一覧では詳細データを省く、といった調整が有効です。HTMLそのものが肥大している場合は、HTML Formatter の圧縮で余分な空白やコメントを落とせます。ただし、サーバー側で圧縮が効いている場合、空白の削除による最終的な転送量の削減幅は小さくなります。効果を確かめたい場合は、実際に圧縮後のサイズを比較して判断してください。
この手順で使うツール
HTML Formatter
HTMLを整形・圧縮（インラインとpreは保持）
5. 2回目以降の読み込みをキャッシュで減らす
転送量を減らす最後の手段が、そもそも転送しないことです。適切にキャッシュを設定すれば、2回目以降のアクセスではリクエスト自体が発生しなくなります。定番は、ファイル名にハッシュが付いたビルド成果物を長期キャッシュし、HTMLは毎回確認させる組み合わせです。内容が変われば必ずファイル名も変わるため、長期間キャッシュしても古いファイルが残る事故が起きません。HTTP Cache Header Builder で、max-age や immutable、no-cache といったディレクティブを選ぶと、生成される値と挙動を確認しながら設定できます。注意点として、一度配ったキャッシュは期限が切れるまで取り消せません。ファイル名にハッシュを含める仕組みが整っていない段階で長期キャッシュを設定すると、更新が反映されなくなるため、短めの期間から始めるのが安全です。
この手順で使うツール
HTTP Cache Header Builder
Cache-Control / Vary / ETag ヘッダーをGUIで組み立て・日本語解説付き
まとめ
ページの転送量の見直しは「単位を正しく把握する → 内訳を計測する → 画像を最適化する → データ自体を減らす → キャッシュで2回目以降を減らす」という順で進めると、効果の大きいところから手を付けられます。特に「回線速度はビット単位」「表示サイズに合わせて画像をリサイズする」「ハッシュ付きファイルだけ長期キャッシュ」の3点は、そのまま実践のチェックリストとして使えます。