Webページの表示速度を計測するGoogle公式提供PageSpeed Insightsで、80点以上をとるために頑張ったことまとめです。
軽量化前の点数
PC79点、スマホ68点でした。画像が多いのでそのへん頑張っていけば軽量化できるかな…
画像を最適化する
webページで一番重いもの、それは画像と動画です。
なんとしても滅殺しなければなりません。
TinyJPGを使ってどんどん画像を軽量化していきました。
メディア内に入っているものもすべてです。
TinyJPGのほかに、Googleのサービスsquooshもおすすめです。
参考:PageSpeed Tools Insights>画像の最適化
CSS、HTML、JavaScriptを縮小する
プラグイン「Autoptimize」で解決しました。
縮小、インライン化などの細かい設定が出来ます。(header内で読み込むかや、縮小除外など)
キャッシュの設定
Autoptimizeと完全な互換性のある「Cache Enabler」も入れました。
軽量化結果
主要なほかにもいろいろ試しまくったのですが、それはおいおい書いていきたいと思います。
いい感じになってきた pic.twitter.com/6IptFrwuoV
— のま@もぐら (@higemeganenoma) June 21, 2019
結果はスマホで92、PCで96です。ここまで来たらもっと100に近づけたい…けど…ぐぬぬ…って感じです。
サイト軽量化は大事
サイト軽量化は非常に大切です。おもすぎると楽しく見れなくなっちゃいますからね。これからコンテンツが増えてまた点数が減ってしまったら、また試行錯誤していきます!