「EWWW Image Optimizer」は、画像の最適化により表示速度を上げるWordPressのプラグインです。使用前後で体感速度は上がり、Googleの「PageSpeed Insights」でも数値的改善が見られました。本記事はEWWW Image Optimizerの設定方法を踏まえ解説します。
- WordPressの読み込み速度が遅いと感じる方
- ブログで離脱率を防ぐSEO対策を考えている方
EWWW Image Optimizerの設定方法
EWWW Image Optimizerとは?
WordPress記事の表示速度が遅いと感じている場合、画像圧縮プラグイン「EWWW Image Optimizer」を利用して表示速度の改善を考えてみては如何でしょうか?
EWWW Image Optimizerは表示速度を上げるため画像を最適化してくれます。例えば、読込速度を上げるためには、画像の容量を減らし圧縮率を上げる必要があります。しかし圧縮率を上げると画像の劣化を招きます。このバランスを自動的に最適化してくれます。
WordPressのメディアファイル内に既に①保存されている画像を自動で最適化し、更に②これからアップロードする画像の最適化にも対応してくれます。
メディアファイルのバックアップ方法
EWWW Image Optimizerは既存のメディアファイル内の画像変更を行ってしまいます。後程説明を加えますが「EWWW Image Optimizer」ではメディアファイル内で「オリジナル画像を復元」することができますが、念のためにメディアファイルのバックアップを撮っておくことをお勧めします。
一度画像を最適化してしまうと元には戻せません。そのため、必ずバックアップを取ってから実施することをお勧めします。
以下、メディアファイルのバックアップ方法を2つ紹介します。
All-in-One WP Migration+Export Media Library (バックアップ方法1)
All-in-One WP Migrationがを利用して最適化前に画像をすべて別ファイルへ保存しておくことに致します。
こちらのソフトはかなりお勧めで、以下の記事でも紹介しています。
FTPによるメディアファイルのバックアップ方法 (バックアップ方法2)
WordPressのメディアファイルはサーバーのwordpressフォルダの/wp-content/uploadsディレクトリにあります。
ここには、アップロードされたPNGファイルやJPEGファイル並びに変換されたwebpファイルも存在しています。
こちらをFTPサーバーからダウンロードして保存しておいて下さい。
EWWW Image Optimizerの設定
WordPressのプラグインからキーワード「EWWW Image Optimizer」を検索します。

「今すぐインストール」から「有効化」をクリックします。
「WordPress設定」から「EWWW Image Optimizer」を選択すると、以下の画面が表示されます。

簡易設定画面にて、①「サイトを高速化」と②「今は無料モードのままにする」にチェックを入れて次ぎを選択します。

①「メタデータを削除」と②「遅延読み込み」、③「WebP変換」にチェックを入れます。
更に④「幅の上限」と⑤「高さの上限」をそれぞれ0に設定します。
⑥Image Backups (オリジナル画像を後で復元) 場所を「ローカル」として「設定を保存」をクリックします。

ここで、「一括最適化」のボタンを押すと以下のような画面になります。

ここで「○○点の画像を最適化」のボタンを押して変換が始まります。
少し時間がかかりますが、以下のような「完了」スクリーンが現れたら終了です。

一度上記の「EWWW Image Optimizer」の簡易設定が終わると、WordPressの「設定画面」>「EWWW Image Optimizer」に詳細な設定画面が現れます。

「基本」タブ(上図)にて、WebPの配信方法を確認すると、以下の赤枠の部分に対応するテキストを「.htaccess」に記載し、モジュールヘッダーを追加するよう指示があります。これは、ブラウザが対応していれば次世代フォーマットでの画像配信であるwebpを使うようにする命令になります。

「赤枠の内容」は以下↓
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
実際にwordpressのフォルダ内にある「.htaccess」にコピペを行いHTTPサーバーを再起動してみます。
すると以下の画面のように「赤色に白時のPNG画像」が「緑色に白時のWEBP画像」となります。

「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックをいれます。(「ほかのブラウザ」というのは気になりますが、IE以外の主要ブラウザChrome, Microsoft, FireFox, Safariには対応しています。)
EWWW Image Optimizerの使用方法
次に「メディアライブラリ」という項目を開くと、画像最適化という列が出来ています。
この中に「最適化」と「オリジナル画像を復元」という項目ができています。

「オリジナル復元」を押すと、画像サイズが元に戻ります。

ここで「今すぐ最適化!」を押すと再最適化が行われます。
実際の速度の違いの検証
画像を「最適化する前」と、「最適化後」でgoogleの「PageSpeed Insights」の結果がどの程度違うか確認してみました。
以下が結果となります。
実際の体感速度がかなり違うことが確認できています。


全体のパフォーマンスはあまり変わっていないですが、67から71
[✔] Speed Index:5.0sから3.3sと速くなりました。 [✔] 項目から次世代フォーマットでの画像配信の項目がなくなりました。 [✔] Total Blocking Time:10ミリ秒から0ミリ秒になっています。 [✔] 適切なサイズの画像:3.28sから2.08sと速くなっています。まとめ
✔ EWWW Image Optimizerは画像の最適化を行うプラグインです。圧縮率は25%程度の改善が確認。
✔ 既存の画像の一括最適化・今後アップデート予定の画像の最適化、最適化後のオリジナル画像への復元が用意されている。
✔ 「PageSpeed Insights」での「次世代フォーマットでの画像配信」が確認され、30%弱の表示速度の改善が見られた。