2021年2月【高速化対策プラグイン】EWWW Image Optimizerの設定方法！Webpエラーの対処法解説

ワードプレスブログの高速化に必須！画像を軽くしてくれるプラグイン『EWWW Image Optimizer』の設定方法を解説します。2021年2月の時点では前回のバージョンの設定画面と大きく異なっており、最新版の画面での設定方法を説明するのでぜひ参考にしてください。

千愛

過去のバージョンの解説記事が多くて、私も自分の疑問を解決するのに時間がかかったので最新版で図解解説しようと思ったんです。

ブログには画像をたくさん挿入すると思いますが、画像って重いんですよね…この画像を少しでも軽くするのがワードプレス高速化にはとても重要なんです。ワードプレスの高速化にはいろいろな対策がありますが、画像圧縮系プラグインを使用するというのも１つの手段です。

この記事では、ワードプレス高速化対策として画像圧縮系プラグイン『EWWW Image Optimizer』の設定方法や使い方、新世代画像フォーマットWebp(ウェッピー)の設定でエラーが出た時の対処方法を解説しますね。

千愛

私も今回Webp設定がスムーズにできなかったので実際にエラーを解決した方法をお伝えします。

ワードプレス高速化には画像の圧縮が大事

ワードプレスブログは画像をたくさん入れますよね？アイキャッチ画像や図など画像を使用することは読みやすい記事にするためには不可欠です。でも、この画像って実は重いんですよ…。

まさかと思いますが、画像は適切なサイズにリサイズせず、圧縮もせずそのまましようしていないですよね？？そのままの画像をワードプレスのメディアにアップロードしてワードプレス上でリサイズしているなんて言語道断ですよ？

そんなことをしたらせっかく上位表示できても、タイトルをクリックされブログ記事が表示されるまでの時間が遅すぎてユーザーが離脱してしまうかもしれません。ネットユーザーはせっかちです。たった10秒でも「遅い」と感じてしまうのです。

つまり、ブログの高速化をすることで確実に読者に記事を読んでもらえれば収益化へぐっと近づくんですね！

自分のブログの表示スピードを調べる方法

ここで質問です。

「あなたのブログの表示スピードは問題ないですか？」

千愛

今、ドキッとした？え？どうやってブログの表示スピードを調べたらいいかわからない？

GoogleのPageSpeedinsightsを使えばすぐにわかります。

基本的に、モバイルの方がPCでのスコアよりもシビアに出ます…。

千愛

グーグルはモバイルでの表示速度を重要視しているので、私たちもモバイル表示速度にこだわっていきましょう。

PageSpeedinsightsで測定したスコアは50以上であればとりあえずOKです。もちろん、速いに越したことはありませんが黄色の数値の範囲であれば合格圏内です。

千愛

サイト高速化にハマるといろいろいじる箇所が多くてブログ初心者では限界があります…。

自分のブログのモバイルスピードの調べ方

Think with GoogleのTest my siteを利用して調べます。

千愛

これは自分のブログのモバイルスピードをチェックできるサイトです。

使い方は簡単！空欄に自分のブログURLを入れてEnterキーを押すだけです。

こんな感じで結果が出ます。

EWWW Image Optimizerでは何が出来る？

千愛

『EWWW Image Optimizer』をインストールする前にすでに記事に挿入済の画像もまとめて一括最適化できるので画像圧縮したい人にはおすすめのプラグインなんです。

『EWWW Image Optimizer』の設定方法

2021年2月の時点での最新版での図解解説をしますね。

step
1EWWW Image Optimizerをインストール&有効化する

有効化するとこんなポップアップが出るのですが、画像の箇所にチェックをいれて次へ進むか、もしうっかりそのまま閉じてしまったら今から説明する設定をしてください。

step
2『基本』タブへ

忘れずに変更を保存してください。

step
3『基本』タブの「Enable Ludicrous Mode」をクリック

Enable Ludicrous Modeを使用することで詳細設定ができるようになります。

さらに『変換』タブへ。

「サイトやネットワークの管理者は以下の設定を無視するメディアライブラリの変換リンクを、他のユーザーが使えないようにできます。」にチェックを入れて、変更を保存します。

千愛

次はWebp変換の設定方法を解説します。

Webp変換設定の手順は2パターン

ここからは2パターンあります。私が手持ちのサイトで試したところパターン１ですぐにWebP設定が完了したサイトとパターン１ではWebP設定がエラーになりパターン２で完了したサイトとありましたので両方解説します。

「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックをいれて、表示されているコードをコピーしてテキストエディタなどに貼っておいてください。

Webp変換設定パターン１

step
1「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェック

step
2「リライトルールを挿入する」をクリック

これだけで赤のPNGが緑のWebpになれば成功です。

キャッシュが残っていると赤のPNGのままのことがあるので、ここで一度キャッシュの削除をしてください。

千愛

私のサイトもHtaccessをいじらないでもこの2ステップだけですぐにWebp変換が成功したサイトもありましたが、おすすめは最初から下記で説明するパターン２のWebp変換設定方法を最初からやることです。

ちょっと手間はかかりますがこっちの方が確実よ！

ユニコ

【おすすめ】Webp変換設定パターン２

step
1「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェック

step
2表示されているコードをコピーしてテキストエディタなどに貼る

step
3プラグイン『WP Htaccess Editor』をインストール&有効化する

エックスサーバーなどのレンタルサーバーからでも.htaccess（ドットエイチティアクセス）はをいじることができますが、とても重要で繊細な場所なのでブログ初心者さんがむやみにいじるのは避けたいため、ワードプレス上で.htaccess（ドットエイチティアクセス）の環境を作り、万が一のミスがあっても修正が簡単にできるプラグイン『WP Htaccess Editor』を使います。

step
4中央の英文字をクリック

「I understand, Enable the editor.=理解しました。エディターを有効化します。」をクリックしてください。

step
5WP Htaccess Editorにコピーしておいたコードを貼る

忘れずに「Save Changes=変更を保存」を押してくださいね。これで完了です。

先ほどのEWWW Image OptimizerのWebp変換設定へ戻って確認しましょう。

この場合もいったんキャッシュの削除をした方が確実なので、万が一赤のPNGになっていたら一度キャッシュの削除をしてください。

『EWWW Image Optimizer』のWebp変換のエラーが直らない時の解決方法

私が経験したWebp変換エラーは、

でした。

日本語で説明してほしいよね…言っている意味がわからない…何を誰に連絡すればいいのよ？？

ユニコ

千愛

んじゃ、今から日本語で説明します！

上記エラーが出た場合や、パターン１で直接「リライトルールを挿入する」をクリックしてもWebp変換エラーが出てしまう場合は今から説明する方法でエラーを解消してください。基本的にはパターン２を実行するのですが、一度「リライトルールを挿入する」をクリックしてしまうと挿入すべきコードが表示されなくなりますが、そのコードはコピペ用にご用意していますのでご安心ください。

step
1プラグイン『WP Htaccess Editor』をインストール&有効化する

エックスサーバーなどのレンタルサーバーからでも.htaccess（ドットエイチティアクセス）はをいじることができますが、とても重要で繊細な場所なのでブログ初心者さんがむやみにいじるのは避けたいため、ワードプレス上で.htaccess（ドットエイチティアクセス）の環境を作り、万が一のミスがあっても修正が簡単にできるプラグイン『WP Htaccess Editor』を使います。

step
2中央の英文字をクリック

「I understand, Enable the editor.=理解しました。エディターを有効化します。」をクリックしてください。

step
3WP Htaccess Editorに下記のコードをコピペ

リライトルールを挿入するを押す前に表示されていたコードと同じものです。※全員共通のコードなので安心してコピーしてください。

忘れずに「Save Changes=変更を保存」を押す。

再度、EWWW Image OptimizerのWebp変換設定に戻り、赤のPNGボタンが緑のWEBPになったか確認してください。キャッシュの削除をすることをおすすめします。

千愛

私はこれで無事Webp変換エラーを修正できましたよ。

すでに挿入済の画像を一括最適化する方法

①プラグイン『EWWW Image Optimizer』をインストールした後にワードプレスの管理画面の『メディア』から『一括最適化』へ。

②「最適化されていない画像をスキャンする」をクリック

③表示されている「〇点の画像を最適化」をクリック

一括最適化が完了すると上記のようにずらっと表示されます。

千愛

ボタンを押すだけだから簡単ね！

まとめ

千愛

ワードプレス初心者はとにかく画像を軽くするために絶対入れたほうがいいプラグインなんだなと理解できればOKです！さくっと入れちゃってください。