PageSpeed Insightsのスコアが100点になったのだが…これ以上どうしろと…

PR

まとめページは以下からどうぞ↓
PageSpeed Insightsスコア改善体験談

 以下で少しだけ書いていましたが、2018年11月14日公式ブログにてGoogleの提供しているパフォーマンス測定ツールの分析エンジンが代わりその影響を多くのサイトが受けたと思います。

 当サイトももちろん例外ではなく、かなり影響を受けました。PC版はともかくとして、モバイル版のスコアはとても低いものがありました。もし興味があればスコア等も載せていますので参考になればと思います。

「PageSpeed Insights」のスコアがLighthouseで分析されるようになって大変|Googleのスピード測定ツール

「PageSpeed Insights」のスコア改善レポート|Googleのスピード測定ツール

PR

PNG?JPEG?圧縮?いやいやWEBPらしいぞ。

 スコアレポートを見るとPNGやJPEGファイルをいくら圧縮しようが、拡張子が左記であれば、まだサイズを小さくできるとレポート上で怒られてしまいます。WEBPはなにも新しくもなにもない(詳しくはないので調べていただきたいです)のですが、たしかChrome上?でしか動作しないファイルだったような気がしていて当サイトでは画像を圧縮しかしていませんでした。※違うブラウザ(Chrome以外)ではwebpではなく、サイトにアップロードしたpngもしくはjpegといったファイルが使用されるはず…

スコアが低いままなのも癪なのでどこまでスコアをあげられるか試してみたら、PC版は100点を取ることができました。そこで今回使用したプラグインの内容をすべて公開です。といっても1つしか導入していないのですが。

プラグインを導入しよう

 今回導入したのはEWWW Image Optimizerです。PNG、JPEGからWEBPに変換してくれるプラグインです。ただ、おそらく多くの方が使用しているであろう、画像圧縮系のプラグインとは競合してしまうため、どちらかは停止しておく必要があります。

 設定方法は1点を除き簡単です。インストールすると以下の設定ページからWebPタブを選択します。JPG、PNGからWebPにチェックを入れます。すると、↓

すると、下記画像が設定ページ下に表示されるようになります。要は、.htaccessファイルにこの白枠内の文字列全てを挿入してくれと言っています。

.htaccessファイルとはなんぞや?って方はGoogle検索をお願いします。むやみにいじると大変なことになりますので注意してくださいね。

コメント