【WordPress】EWWW Image Optimizerを利用しWordPressの表示速度を改善する方法

2022年10月8日2024年2月20日

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

概要

「EWWW Image Optimizer」は、画像の最適化により表示速度を上げるWordPressのプラグインです。使用前後で体感速度が上がり、Googleの「PageSpeed Insights」でも数値的改善が見られました。本記事は「EWWW Image Optimizer」の設定と利用方法を解説します。

この記事の読者層

WordPressの読み込み速度を改善したい方

ユーザーの離脱率を防ぎたい方

EWWW Image Optimizerの設定方法

EWWW Image Optimizerとは？

WordPress記事の表示速度が遅いと感じていませんか？そんなとき、画像圧縮プラグイン「EWWW Image Optimizer」を利用して表示速度の改善できます。

EWWW Image Optimizerは表示速度を改善するために、画像の最適化をしてくれます。とたえば、読込速度を上げるためには、画像の容量を減らし圧縮率を上げる必要があります。しかし圧縮率を上げると画像の劣化を招きます。このバランスを自動的に最適化してくれるツールです。

WordPressのメディアファイル内に既に①保存されている画像を自動で最適化し、更に②アップロードする画像の最適化にも対応してくれます。

メディアファイルのバックアップ方法

EWWW Image Optimizerを利用すると、WordPressのメディアファイルに登録された画像のサイズ変更等を行ってしまいます。後程説明を致しますが、「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には対応しています。）

WebPとは？

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