サイト軽量化のためにやったことまとめ

Webページの表示速度を計測するGoogle公式提供PageSpeed Insightsで、80点以上をとるために頑張ったことまとめです。

軽量化前の点数

PC79点、スマホ68点でした。画像が多いのでそのへん頑張っていけば軽量化できるかな…

画像を最適化する

webページで一番重いもの、それは画像と動画です。

なんとしても滅殺しなければなりません。

TinyJPGを使ってどんどん画像を軽量化していきました。
メディア内に入っているものもすべてです。

TinyJPGのほかに、Googleのサービスsquooshもおすすめです。

参考:PageSpeed Tools Insights>画像の最適化

CSS、HTML、JavaScriptを縮小する

プラグイン「Autoptimize」で解決しました。

縮小、インライン化などの細かい設定が出来ます。(header内で読み込むかや、縮小除外など)

キャッシュの設定

Autoptimizeと完全な互換性のある「Cache Enabler」も入れました。

軽量化結果

主要なほかにもいろいろ試しまくったのですが、それはおいおい書いていきたいと思います。

結果はスマホで92、PCで96です。ここまで来たらもっと100に近づけたい…けど…ぐぬぬ…って感じです。

サイト軽量化は大事

サイト軽量化は非常に大切です。おもすぎると楽しく見れなくなっちゃいますからね。これからコンテンツが増えてまた点数が減ってしまったら、また試行錯誤していきます!

参考URL: