EWWW Image Optimizerを使って画像の圧縮とWebP対応をしてみた

ついに、Googleがモバイルファーストインデックスを導入しましたね。Search Console開いたら「対応したで!」って通知きてました。私のこのブログはほとんどPCからのアクセスなのですが、モバイルファーストとGoogle様がいうので対応しなければなりません。

実はこのブログ、PC版は割と表示が早くPage Speed Insightの点数も80点前後なのですが、モバイルは20点という謎の差が発生していました。

モバイルの点数、19点。

主に指摘されていたのは、
– オフスクリーン画像の遅延読み込み
– レンダリングを妨げるリソースの除外
– 次世代フォーマットでの画像の配信
の3つ。このうち
– オフスクリーン画像の遅延読み込み
– 次世代フォーマットでの画像の配信
はプラグイン1つ入れれば解消できそうだったので、こちらから対応することにしました。

画像の圧縮とWebP対応

オフスクリーン画像の遅延読み込み

もはや解説する必要はないと思いますが、ユーザーがページにアクセスした時にそのページに必要な画像を全て読み込むのではなく、一旦ファーストビューにだけ必要な画像を読み込み、そのあとは画像が必要な場所までユーザーがきた時点で読み込むということです。
Lazy Loadと呼ばれるものですね。

次世代フォーマットでの画像の配信

基本的に画像はJPGかPNGを使用していると思うのですが、次世代フォーマットというのはJPG,PNGなど以外のもっと容量を減らせてかつ高画質で提供できるような画像フォーマットをさします。
有名なのはGoogleさんの作ったWebPです。

2018年あたりまでは、対応ブラウザが少ないということでWebP対応を見送っていましたが、最近対応しているブラウザも増えてきたのでそろそろフォーマットを変更してもいいかなと思います。Chrome, Edge, FireFoxは対応済み。

ただ、Safariとかはまだなはずなので、スマホユーザーが多いサイトはまだ対応いらないんじゃないかと。私のブログの場合はほどんどがPCかつChromeなので対応することにしました。対応状況は下記で見られます(緑が対応済みブラウザ)

https://caniuse.com/#feat=webp

EWWW Image Optimizerを使って対応

今回は下記の条件でプラグインを探しました。

  • 画像の圧縮ができる(既存、新規含め)
  • Lazy Loadに対応できる
  • WebP対応ができる

これで引っかかったのがEWWW Image Optimizerだったので、今回はこちらをインストール!Bulkで圧縮できるのが嬉しいです。

インストールして既存の画像を圧縮する

インストールして有効化すると、メディアライブラリのメニューの一番下に「一括画像最適化」という項目が出ます。

ここから既存画像をスキャンして圧縮してくれるので「最適化されていない画像をスキャンする」をクリックして進めてください。私は900枚強あり、1時間かかりました。時間に余裕がある時がおすすめです。

これ、どのサイトを読んでも見つけられなかったのですが、最新版ではクレジットがないと圧縮できなくなったのかもしれません。プラグインを有効化した時に「データを送るのを許可しますか?許可したら500枚分の画像クレジットあげます」という旨のメッセージが出てきますので、Yesにしてください。APIキーを受け取るためのメールが届きます。

メニューからBasic>Optimization API KeyにAPIキーを入力すると、500枚分の画像クレジットが受け取れます。

私は今回このクレジットを使用して圧縮しました。

WebP画像に変換する

次に、画像をWebPに変換します。変換すると言っても、対応していないブラウザに対してはJPG、PNGで今まで通り出してくれるので心配しなくて大丈夫です。

メニューの「WebP」を選び、「JPG,PNGからWebP」にチェックを入れます。

「変更を保存」を押すと、ブラウザごとに画像を出し分けるためのコードを提案してくれるので挿入。

右下に「PNG」と赤いアイコンが出ていますが、webP対応が完了するとこれが緑色になります。

WebP対応はこれで完了です。

LazyLoad対応

「ExactDN」のメニューの一番下に「Lazy Load」という項目があるので、チェックを入れます。Lazy Loadはこれで完了です。

すでに既存でLazyLoadプラグインを入れている場合は、バッティングする可能性があるので気をつけてくださいね。

Page Speed Insightはどれくらい上がるのか?

ここまでの対応を全てして、再度測ってみました。画像に関する項目が全て無くなるので、さぞかし点数が上がるに違いない。

20点。

え?1点しか上がってない。改善項目見てみます。

確かに画像系はなくなったのですが、代わりにサーバー応答時間の短縮とウェブフォントがきています…。

これ、この項目を一気に解消したからと言ってめちゃ上がるわけではないんですね。サーバー応答時間は何かな…プラグインが重かったのかな…。

ウェブフォントに関してや、レンダリングを妨げるリソースの除外に関しては、完全にGoogle Adsenseの広告が引っかかっていました。なので、ひとまずSEOを考えて広告を減らすことに!TOPページの広告をオフにした結果がこちら。

68点!敵はGoogle Adsenseでした。ここに対する対策は何かしら打てるものがあるのだろうか?引き続き調査することにします。

結論:

Page Speed Insightの画像の項目を全て解消したからと言って、点数が上がるわけではない。

この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)