トップページの重さを6分の1にしました。原因は全部、画像です
本記事にはプロモーション（広告）を含みます。
こんなことで困っていませんか？
- サイトの表示が遅い気がする
- 画像を載せると重くなるのか知りたい
- 何を直せば速くなるのか分からない
実際に測った数字
トップページを開くときに読み込んでいたデータの量です。
| 大きさ | |
|---|---|
| 直す前 | 243KB |
| 直したあと | 41KB |
6分の1になりました。 そして、減ったぶんはほぼ全部が画像でした。
文章やデザインの部分は、ほとんど重さに関係していませんでした。
重い原因は、たいてい画像です
表示が遅いと聞くと、難しい原因を想像します。私もそうでした。
実際に測ってみたら、読み込んでいたデータの大半が画像でした。 文章は、どれだけ書いてもほとんど重くなりません。
つまり、画像さえ何とかすれば、それで終わりです。
やっていた2つの間違い
① スマホの人にも、大きい画像を送っていた
トップに大きな写真を1枚置いていました。横1536ピクセル・165KBの写真です。
パソコンで見るぶんには適切です。問題は、スマホで見ている人にも同じ写真を送っていたことでした。
スマホの画面には、そんなに大きな写真は要りません。無駄に大きいものを読ませていたわけです。
直し方は単純で、同じ写真の小さい版を用意して、画面の大きさに合わせて出し分けるだけです。
| 大きさ | |
|---|---|
| 元の写真（パソコン用） | 165KB |
| スマホ用に作った小さい版 | 42KB |
② 逆に、小さすぎる画像を引き伸ばしていた
こちらは反対の間違いです。
記事の一覧に並ぶ小さな写真で、用意していた画像が小さすぎて、引き伸ばして表示していました。 そのせいで、ぼやけて見えていました。
軽くしようとして小さくしすぎると、今度は汚くなります。 ちょうどいい大きさがある、ということです。
画面は見た目より細かい
最近のスマホの画面は、見た目の大きさの2倍細かく表示されます。 画面上で340ピクセルに見える場所には、680ピクセルの画像が要ります。
「画面の幅と同じ大きさの画像でいい」と思っていると、ぼやけます。
素人でもできる直し方
難しい設定は要りませんでした。やったのはこれだけです。
1. 写真をのせる前に、大きさを見る
スマホで撮った写真は、そのままだととても大きいです。 横4000ピクセル、数MBということもあります。
そのままのせると、それを全部読み込ませることになります。
のせる前に縮めてください。 横1500ピクセルくらいあれば、ほとんどの用途で足ります。
2. 使っていない画像を探す
私の場合、どこからも使われていない画像が1枚（73KB）残っていました。
作っている途中で不要になったものです。こういうものは、たまってきます。
3. 測ってみる
「重い気がする」ではなく、実際に数字を見てください。
ブラウザには、そのページが何を何KB読み込んだかを表示する機能が入っています。 無料です。何も入れなくても使えます。
私はこれで「ほぼ全部が画像」と分かりました。 分かってしまえば、直すのは早かったです。
なぜ重さを気にするのか
見に来た人が、待たずに帰るからです。
せっかく検索から来てくれても、表示されるまで待たされたら、戻るボタンを押されます。 中身を読んでもらえません。
そして表示の速さは、検索の順位にも関係します。 重いままだと、そもそも上に出にくくなります。
気をつけたこと
軽くすることを目的にしない。 これは大事だと思いました。
軽くしようとして画像を小さくしすぎると、ぼやけます。 ぼやけたサイトは、それはそれで信用されません。
ちょうどいい大きさにするのが正解で、小さければいいわけではありません。
まとめ
- トップページの重さは 243KB → 41KB（6分の1）
- 減ったぶんはほぼ全部が画像。文章は関係ない
- スマホの人に、パソコン用の大きい画像を送っていた
- 逆に、小さすぎて引き伸ばしてぼやけている場所もあった
- のせる前に縮める。横1500ピクセルくらいで足りる
- 小さければいいわけではない
画像を直したら、次に見るのはタイトルです。 表示されているのにクリックされていない記事があるかもしれません。