転送量と表示速度を同時に改善する方法

レン

サイトを軽くしたいんだけど、プランを上げるしかないのかな？

プロクラ

その前にやれることがたくさんあるよ。しかも、転送量を減らす工夫はそのまま表示速度の改善になる。お金をかけずに両方良くなるから、まずこっちから手をつけるのがおすすめだね。

1. 画像の最適化（効果が一番大きい）

転送量の大半は画像です。撮ったままの大きさで置いているページなら、適切な大きさに縮めて圧縮するだけで半分以下になることも珍しくありません。しかも表示も速くなります。他のどの対策より先に、ここに手を付ける価値があります。

プロクラ

多くのサイトで、転送量の大半は画像が占めている。ここを削ると劇的に軽くなるよ。

• WebPやAVIFなど、新しい形式に変換する（同じ画質でファイルサイズが大幅減）
• 表示サイズに合わせてリサイズする（4000pxの写真をそのまま置かない）
• 遅延読み込み（loading="lazy"）で、画面外の画像は後から読む

2. 圧縮を有効にする

プロクラ

HTML・CSS・JavaScriptはテキストだから、gzipやbrotliで圧縮すると数分の1になる。nginxなら設定ファイルに数行足すだけで有効化できるよ。

3. キャッシュを効かせる

プロクラ

一度読んだファイルをブラウザ側に保存させれば、2回目以降はサーバーに取りに来なくなる。Cache-Controlヘッダを適切に設定するだけで、リピーターの転送量はぐっと減るよ。

レン

全部やったら、どれくらい変わるの？

プロクラ

サイトの状態にもよるけど、画像を最適化していないサイトなら転送量が半分以下になることも珍しくない。表示速度が上がれば離脱率も下がるし、検索評価にも効いてくる。プランを上げる前に、まずここを疑ってみて。

4. 大きなファイルは別の場所へ

プロクラ

動画や大きな配布ファイルを自前のサーバーから配ると、転送量が一気に膨らむ。ここは配信を専門とするサービスに任せるほうが、費用でも速さでも有利なことが多いよ。

• 動画は動画配信サービスに置いて、ページには埋め込む
• 大きなファイルの配布は、配信専用のサービスを使う
• 画像も、量が多いならCDNを前段に置くと効く

何が重いのかを先に測る

プロクラ

感覚で手をつけると、効かないところを直して終わることがある。ブラウザの開発者ツールで、1ページを開いたときに何がどれだけ読み込まれているかを見てみよう。

• サイズの大きい順に並べれば、削るべきものがすぐ分かる
• たいていは画像が上位を占める
• 外部サービスの読み込みが重い場合もある
• 直したあと、同じ画面で数字が下がったかを確認する

プロクラ

転送量を減らす工夫は、そのまま表示速度の改善になる。プランを上げる前に、まずここから手をつけよう。

レン

測ってから直す。画像から手をつけるのが一番効くんだね。