WPプラグイン

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

2021-02-23

EWWW Image Optimizer設定方法

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

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

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

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

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

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

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

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

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

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

画像圧縮手順

  1. 画像のリサイズは無料画像編集ツール『PhotoscapeX』で適切なサイズにサイズ変更
  2. 画像圧縮は無料圧縮サイト『TinyPNG』で圧縮
  3. さらにプラグイン『EWWW Image Optimizer』で圧縮

この3ステップで画像の軽量化をします!

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

ここで質問です。

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

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

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

pagespeedinghtsのトップページ

PageSpeedinsightsの使い方

  1. 空欄に自分のブログURL(トップページ)を入力
  2. 分析ボタンをクリック
  3. PCとモバイルそれぞれのスピードを確認

PCのスコア

pagespeedPC

モバイルのスコア

pagesppedmobile

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

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

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

pagesppedのスコアの目安

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

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

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

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

mobilespeed testmysite

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

mobilespeed testmysite

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

 

EWWW Image Optimizerでは何が出来る?

  • すでに挿入済の画像を一括圧縮できる
  • これから挿入する画像を自動で圧縮できる
  • 新世代画像フォーマットWebpの設定ができる

Webpとは?

Webpはウェッピーと読みます。Googleが開発した次世代の画像フォーマットで、圧縮率が高いのが特徴です。画像フォーマットはJPEGとかPNGなどがありますがそれよりも軽くできるよということです。

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

『EWWW Image Optimizer』の設定方法

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

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

プラグインEWWWImageOptimizerインストール

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

EWWW Image Optimizer

step
2
『基本』タブへ

デフォルト状態

EWWW Image Optimizerのデフォルト設定画面

おすすめ設定

EWWW Image Optimizer

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

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

EWWW Enable Ludicrous Mode

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

さらに『変換』タブへ。

EWWW Enable Ludicrous Mode

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

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

超ブログ初心者でWebpなんてさっぱりわからん!という人は下記の設定はいったんしないでここで終了でもOKです!

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

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

※この時点で念のため手動でバックアップを取得しておいてください。

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

EWWW Image OptimizerのWebp設定

Webp変換設定パターン1

EWWW Image Optimizer Webp変換設定

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

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

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

EWWW WEBP変換成功

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

キャッシュの削除方法

お使いのブラウザによって違いますが、基本的には閲覧履歴の削除をすることです。

ブラウザ名 キャッシュ削除方法でググるとでてきます。【参考】Google Chromeのキャッシュクリア方法

千愛
私のサイトもHtaccessをいじらないでもこの2ステップだけですぐにWebp変換が成功したサイトもありましたが、おすすめは最初から下記で説明するパターン2のWebp変換設定方法を最初からやることです。
ちょっと手間はかかりますがこっちの方が確実よ!
ユニコ

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

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

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

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

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

WP Htaccess Editor

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

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

WP Htaccess Editor

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

WP Htaccess EditorでWebp変換設定

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

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

WP Htaccess EditorでWebp設定成功

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

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

WP Htaccess EditorでWebp設定エラー

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

「このサイトにはmod.headersが抜けているようです。このApacheモデュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください」

でした。

日本語で説明してほしいよね…言っている意味がわからない…何を誰に連絡すればいいのよ??
ユニコ
千愛
んじゃ、今から日本語で説明します!

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

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

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

WP Htaccess Editor

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

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

WP Htaccess Editor

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

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

<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,L] </IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp

WP Htaccess EditorでWebp変換設定

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

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

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

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

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

EWWW Image Optimizerで画像を一括最適化

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

EWWW一括最適化

バックアップ
UpdraftPlusで簡単にバックアップを取る設定方法
【バックアッププラグイン】UpdraftPlusの設定方法!自動&手動バックアップも簡単!復元も1クリック

ワードプレスブログのバックアップ用プラグイン『UpdraftPlus(アップドラフトプラス)』の設定方法を解説します。と ...

続きを見る

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

EWWW一括最適化

最適化済み /home/○○/public_html/○○.com/wp-content/themes/images/favicon-min.png
再ー最適化を抑制

最適化済み /home/○○/public_html/○○.com/wp-content/themes/design/screenshot.png
節約なし
WebP: 9.2% (2.4 KB ) を減少

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

千愛
ボタンを押すだけだから簡単ね!

まとめ

軽やかな女性

この記事のまとめ

  • ワードプレスブログの高速化は大事
  • 画像はリサイズ、圧縮、プラグイン「EWWW Image Optimizer」での圧縮の3ステップで万全に
  • すでに挿入済の画像もEWWW Image Optimizerなら一発圧縮
  • Webp変換エラーは別のプラグイン『WP Htaccess Editor』で解決できる
千愛
ワードプレス初心者はとにかく画像を軽くするために絶対入れたほうがいいプラグインなんだなと理解できればOKです!さくっと入れちゃってください。

 

千愛メルマガ登録フォーム

 

【千愛メルマガ】月10万円稼ぐブログレシピ

  • この記事を書いた人
  • 最新記事

千愛

キーワード選定にこだわるブログ初心者サポーター!オーストラリア在住主婦。3人の子供を育てながらできる仕事を探していたらアフィリエイトに出会い、現在は年収8桁稼ぐ起業家ママに!ブログ、サイト作成、ブログコンサルをやりながら複数ビジネスを展開しています。 このブログでは、私と同じように子育てのスキマ時間を使いお小遣い稼ぎをしたい人に、アドセンスやブログで稼ぐためのノウハウをお届けしています。キーワード選定と外注化が得意です♪ ブログで稼ぐためには誰かにサポートしてもらいながら進めるのが、一番効率的に稼げます。 もし、あなたがブログで稼ぎたいけどやり方がわからないなら私が全力でサポートします!! いつでもお気軽にお問い合わせくださいね♪ マンツーマンコンサルに全力投球中!!

-WPプラグイン

© 2021 千愛のレインボーアフィリエイト