【2022年最新版】EWWW Image Optimizerを利用してWordPressの表示速度を改善する方法

この記事は 2 分で読めます。

概要

「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がを利用して最適化前に画像をすべて別ファイルへ保存しておくことに致します。

こちらのソフトはかなりお勧めで、以下の記事でも紹介しています。

【WordPress】ブログ初心者のモチベーションを高めるWordPressのプラグイン8選

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には対応しています。）

WebPとは？

WebPとは、Googleが開発したフォーマットで、画質を損なわずにファイルサイズを軽量化できる画像形式。JPGやPNGよりも25%以上軽量化できると言われており、SEO対策にも効果的です。圧縮率の高い非透過型JPGよりも圧縮率が高くPNG同様、透過型フォーマットのため、JPEGとPNGの良いとこ取りな画像フォーマットです。