久しぶりにWordpressでプラグインなどをいろいろ構っていたのでついでにこのブログも少し手直ししてみました。
このサイトの現時点でのPageSpeed Insightsの状況です。
PCは80でいいんですけど、モバイルでの40というパフォーマンスがいまいち…。今までもこれを解消しようといろいろやってきてはいたんですけど元のサーバーのプランが軽いプランということもあり、なかなか難しいです。ちょっとでも改善すべく、いろいろやってみました。
画像をWebPに対応させた
とりあえずよく注意される、次世代フォーマットWebPにあわせろという要求にこたえてみました。
WebPという画像フォーマットにするのは、対応してない古いブラウザもあるので不安だなーと思ってたんですが、wordpressのプラグインのEWWW Image Optimizerは古いブラウザには元のフォーマットで対応してくれるというので、その設定をしてみました。元々このプラグインは入れていたんですが、設定をやり直してみます。
●画像のメタデータを削除 ●画像のリサイズ（自分は画像が荒くなってほしくないので少し大きめに設定しました） ●遅延読み込みについては後述 ●WebP変換 対応するブラウザで変換する 配信方法については、本当は下の〈リライトルールを挿入する〉を試してダメだったら JS WebPリライトした方がいいです。JSリライトでほぼうまくいくと思い、面倒くさくて先にチェックしてしまいました。
●遅延読み込みについて
遅延読み込みにチェックをつけると、すでにCocoonでの高速化の設定での対策と重複してしまったらしく画像が全部非表示になってしまったのでチェックは外しました。すでに使っているプラグインやテーマでやっていることと重複するとバグの原因になりますので、Cocoon高速化している場合はチェックを外しましょう。
メディアのタブにいくと一括最適化という項目ができていて、今までの画像も全部最適化してくれますので、1211点の画像を最適化してみました。
WebP画像化を確かめる
すべての画像を最適化し、WebP画像になったかどうか見てみます。左が以前の、普通にpng画像です。右が最適化後で、webpというフォーマットに変わっています。ちゃんと画像が変更されていました。
ちなみにこの段階で画像を全て最適化したにもかかわらず、PageSpeed Insightsでの結果はなんと少し悪くなっていましたｗ
WP Fastest Cacheを導入する
画像を最適化したにも関わらず、パフォーマンスは少々悪化・しかも「 ページキャッシュが検出されず、サーバのレスポンスが遅くなっています」というサイトヘルスの致命的な問題が上がっていて、ページキャッシュに関するプラグイン未導入だったので入れることにしました。
入れるのはWP Fastest Cacheというプラグインです。ページを静的 HTML ファイルとしてキャッシングして読み込み速度を上げてくれるらしい。かなりよく使われているらしいので期待大です。
上記の記事を参考にしました。Cocoonは高速化ですでにコードの最小化みたいなことをしていて、気を付けないとかなり対策が重複してしまいます。
基本的な設定は大体同じ感じにしてみました。モバイルで、Cocoonはレスポンシブ対応なのでデスクトップのキャッシュが使えるというのも注意ですね。
キャッシュ削除時間を適当に５時とかに決めてみました。一応人があまり読まない時間がいいとのことで、早朝はいないだろうと思ったのですが、もっとちゃんと調べてから設定するのをお勧めします！
対応してみた結果
結果：PCのパフォーマンスが向上した！！
ということでした。できればモバイルパフォーマンスをもっと上げたいですが、ライトプランだから～とか言い訳してたけど、他にもライトプランだけどモバイルで９０くらい出している方もいるのでまだまだやりようはあるのでしょう。とりあえず今回はここまで。
コメント