【WordPress】EWWW Image OptimizerでWebPを導入!結果は微妙でした

7月 24, 2019

今回はプラグイン「EWWW Image Optimizer」を使って、画像のWebP(ウェッピー)化に挑戦してみました。

他のブログでは、それなりに効果があったように書かれていましたが、僕のサイトでは微妙な結果に。

多少なりとも速度改善をしたい方は試してみてください。

WebPとは?

サイトの表示速度を測れるPageSpeed Insightsで改善提案される「次世代フォーマットでの画像の配信」とは、このWebPのことです。

ただ、Webp画像の一番の問題は、表示できないブラウザが存在することです。

下の画像で、赤色のブラウザでは表示できないのです(2019年7月)。

このように、インターネットエクスプローラーとサファリが対応していないので、単純に画像をWebPに変えるだけでは駄目なのです。

WebPを表示できないブラウザには、これまで通りJpgやPngを表示するように設定する必要があります。

と言っても、設定はそれほど難しくありません。

Webpの設定方法

WordPressサイトの画像のWebP化は、

  1. 画像をWebP化
  2. WebP化した画像をサイトで表示

この2つの設定が必要です。

画像のWebP化

画像をWebpに変更する機能は、画像圧縮で有名なプラグイン「EWWW Image Optimizer」に付いています。

過去にアップロードした画像も、ワンクリックで全てWebpに変えてくれます。

ただし、JPGからWebPへの変換は非可逆(元に戻せない)なので、変換の前にはバックアップを取っておきましょう。

WebP画像をサイトに表示する

画像をWebPに変更したあとの表示方法は2つあります。

 画像表示を<img>タグから<picture>タグに変える

 .htaccessに追記する

画像のタグを<picture>の変えるのは、過去のものも全て変更しなければいけないので非常に面倒です。

ということで、オススメするのは.htaccessに追記する方法です

一度設定してしまえば、あとは今までどおり画像を貼り付けていくだけです。

先に.htaccessを確認

もしかすると、.htaccessにたどり着けない人が出てくるかも知れません。

おじさん
恥ずかしながら、僕も3ヶ月くらい前は.htaccessにたどり着けませんでした

後で困らないように、画像をWebPに変える前に.htaccessの場所を確認しておきます。

サーバー名 .htaccess」で検索すると、どこにあるか分かるはずです。

僕が使っているリトルサーバーでは、まずコントロールパネルからWEBマネージャを開きます。

次の画面で「接続」をクリックします。

WebPを導入したいドメインをクリックします。

.htaccessの編集マークをクリックすれば、追記できます。

追記する内容は、この後説明します。

Webpの設定手順

では、EWWWの設定していきましょう。

プラグインののインストール方法は、プラグインの入れ方・インストール方法を参考にしてみてください。

EWWWを有効化したら設定画面を開いてWebPのタグをクリックし、一番上の「Jpg、pingからWebp」のチェックを入れ、「変更を保存」をクリックします。

すると、ボタンの下にコードが出てきます。このコードを.htaccessに追記します

リライトルールを挿入する」のボタンは、上手くいかないことが多いようなので今回は使いません。

WebサーバーがNginxの方は、表示されたコードに追加が必要です。コードはEWWWの公式サイトに記載されています。

おじさん
英語なので、よく分かりませんでした

自分の使っているサーバーは、WordPressの「ツール」 > 「サイトヘルス」> 「情報」 > 「サーバー」で確認できます。

2019年7月現在はApacheのほうが多いですが、今後はNginxも増えていくでしょう。

.htaccessを見ると、おそらくWordPressのコードが先に書いてあるはずです。

WebPのコードは先に読み込んだほうが良いので、WordPressのコードの上に貼り付けてください

.htaccessの設定が終わると、EWWWの設定ページの一番下の赤いマークが緑色に変わるはずです。

次に、WordPressのメニューから「メディア」 > 「一括最適化」の順にクリックします。

開いた画面で「再最適化を強制」にチェックを入れ、「最適化されていない画像をスキャンする」の順にクリックします。

アップロードした以上に画像があると思われるかも知れませんが、WordPressは自動でサイズ違いの画像を生成するので多くなります。

おじさん
僕も40記事しか無いのに画像の数が10150個になっていました

WebPに変更した結果

今回、WebPに変更によりモバイル46→48、パソコン82→88へと多少の改善はありました。

Before
After
おじさん
これくらいの差は、数回の計測で出る誤差なので微妙な結果とも言えます

それよりも、改善できる項目に「次世代フォーマットでの画像の配信」がまだ出るのが不思議でした。

調べてみると、EWWWが一括最適化した時にWebP化していない画像が残っているんですね。

また、新規でアップロードした画像も、出来たり出来なかったりと気まぐれな変換をしています。

おじさん
まだら変換!

まとめ

今回はEWWWを使って画像のWebP化をしてみました。

多少の期待はありましたが、微妙な結果になりました。

おじさん
ぶっちゃけ、EWWWというプラグインを入れることによって速度が遅くなる面もありますからね

もう少し効果的なプラグインが出てくるまで待ったほうが良いかも知れません。

これまで当サイトではAffingerを使ってきました。

いろいろ試してみましたが速度改善の見込みが無いので、無料テーマ「ルクセリタス」に変更することにしました

僕と同じように速度で悩んでいる方は、「ルクセリタス」にすると一気に解決しますよ。

テーマの変更はあとになるほど面倒くさいので、変えるなら早いほうがいいですね
うさぎ