最近、サイトの速度改善を行う中で、表示速度について意識する機会が増えました。
最初は、「画像が重いのかな？」くらいのイメージはあったものの、実際にどの部分が負荷になっているのかまでは、あまり意識できていませんでした。
ですが、実際にPageSpeed Insightsなどで調査を進めていくと、サイトが重くなる原因にはある程度パターンがあることを感じました。
実際に多かった重くなるパターン
例えば、
- PNG画像など容量の大きい画像がそのまま使用されている
- WebP化されていない
- 投稿画像が増えることで読み込み負荷が大きくなる
- 使用していないJavaScriptが全ページで読み込まれている
- 特定ページでしか使用していないライブラリが全体で読み込まれている
などです。
実際に、Swiperなどのライブラリがブログページでも読み込まれていたり、使用していないJavaScriptが残っていたりしました。
重くなる原因には共通点があった
最初は「速度改善」というと特別な技術が必要なイメージもありましたが、実際には、
- 不要なものを読み込まない
- 必要なページだけで読み込む
- 画像サイズや形式を見直す
など、基本的な部分の積み重ねが大きいのだと感じました。
速度改善は制作段階から始まっていると感じた
また、速度改善を行う中で、制作段階から表示速度を意識して実装することも大切だと感じるようになりました。
例えば、
- 最初から画像サイズを意識する
- 不要なライブラリを増やしすぎない
- 必要なページだけで読み込む構成にする
など、制作時点で意識できることも多くあります。
表示速度は、実装後に改善するものというより、制作段階から積み重なっていくものだと感じました。
