SWELLでEWWW Image Optimizerの設定と相性効果と次世代フォーマット

画像圧縮系プラグインはSWELLでは相性が悪いと言われているのでインストールしていない人も多いと思いますが、PageSpeed Insightsでいつも「次世代フォーマットでの画像の配信」が改善項目になるので気になりませんか?

EWWW Image Optimizerプラグインで「WebP変換」すれば解決しますが、このサイトでは表示は消えましたが高速化どころかモバイルサイトでは低速になってしまいましたので、SWELLサイトの通り必要ないと思います。

もちろん画像はTinyPNGを使ってあらかじめ圧縮済みの画像をWordPresにアップロードしています。

画像を多く使うサイトや保存枚数が増えてくると「WebP変換」は確かに効果は増大していきますよ

目次

SWELLテーマが速すぎる?

元々Cocoonテーマで使用していたサイトをSWELLテーマに切り替えた時に、プラグインを入れ替えただけの時点でPageSpeed Insightsで計測したら、すでに高速化されていました。

それでも「使用していない JavaScript の削減」との改善項目が表示されるので、「Flying Scripts by WP Speed Mattersプラグイン」を追加インストールしてちょっとした設定をすると、モバイルサイトでは50ポイント以上改善され高速化できました。

ワードプレス高速化後

「Flying Scripts by WP Speed Mattersプラグイン」はインストールするだけでは、ワードプレスの高速化はできないので少し設定が必要なので設定方法は下記をご覧下さいませ。

消えない改善項目の「次世代フォーマットでの画像の配信」

SWELLテーマを使い「使用していない JavaScript の削減」の対策をしても、そして定期的にPageSpeed Insightsで計測をしているのですが、「次世代フォーマットでの画像の配信」が改善項目が消えません。

ワードプレス高速化次世代フォーマット
数値の変動はあるけどいつも提案される

SWELLテーマにしてからプラグインも減らすことができ、今まで見ることができなかったほどのPageSpeed Insightsで計測結果なのに・・・

次世代フォーマットでの画像の配信を簡単に行うには、画像圧縮系プラグインと言えば「EWWW Image Optimizer」なのですが、SWELLサイトでは不具合が起こることがあるので推奨していません。

確認できた不具合
  • フルワイドブロックの境界線の形状がページ上で不安定(波線などが反映されたりされなかったり)
  • フルワイドブロックの背景画像がページ上で不安定(画像表示が反映されたり真っ白だったり)

これらの症状はプラグインを無効化すればすぐに解決しますので「WebP変換」する時だけ有効化してください

EWWW Image Optimizerプラグイン設定方法

SWELLテーマを使ってサイトを運営されている方々には「EWWW Image Optimizer」を使っている方もいるようなので、次世代フォーマットでの画像の配信が改善できるかどうか試してみる事にしました。

もちろん画像圧縮系プラグイン「EWWW Image Optimizer」をインストールして有効化するだけでは、次世代フォーマットでの画像の配信の改善はできないので、設定方法をご紹介します。

STEP
ワードプレスのダッシュボードから操作

インストールして有効化後EWWW Image Optimizerの設定はダッシュボードから行えます

  1. ダッシュボードから「設定」にマウスを合わせる
  2. EWWW Image Optimizerをクリックすると設定画面に変わります
画像圧縮設定
STEP
3か所チェックを入れる

最初に表示されてた画面では3か所チェックを入れて次へをクリック

  • サイトを高速化
  • 保存スペースを節約
  • 今は無料モードのままにする
画像圧縮設定1
STEP
WebP 変換にチェックを追加

「WebP 変換」のみチェックが無いのでチェックを入れてると、メッセージが表示されるので次へをクリックしてから「設定を保存」をクリックします

画像圧縮設定2
WebP変換以外は初期設定のままです

画面が切り替わりますので、完了をクリックします

STEP
再度ダッシュボードの設定から操作

EWWW Image Optimizerをもう一度立ち上げて、WebPの設定を行います

  1. 不足している寸法を追加にチェックを入れる
  2. SVG プレースホルダーにチェックを入れる
  3. 2か所にチェックを入れたら下にスクロールする
画像圧縮設定3
STEP
「WeaPの配信方法」にあるコードをコピー
画像圧縮設定7
STEP
契約サーバーの.htaccessに貼り付ける

ここではエックスサーバーでの貼り付け方法ですので、さくらサーバーの設定は下記をご覧下さいませ。

  1. 契約サーバーにログインしてサーバーパネルを開きます
  2. サーバーパネルより.htaccess編集を開きます
  3. 変更したいドメインを選択します
  4. .htaccess編集パネルの先頭にコピーしたコードを挿入します
  5. 挿入したら「確認画面へ進む」そして「実行する」をクリックして貼り付け完了です
画像圧縮設定5
エックスサーバーの画面です
htaccess
STEP
リライトルールを挿入する

サーバーの.htaccess編集にコードの挿入が終わったら「リライトルールを挿入する」ボタンをクリックして全ての設定が終了です。

PNG の応答が MINEタイプ のテストに失敗しました

と、いうメッセージが表示されますが、WEBPと緑色表示されれば問題なく圧縮できています

EWWW Image Optimizerプラグインの効果は?

最初にもお話しした通り、このサイトではパソコンでの速度は変わらずでモバイルサイトは遅くなってしまったので、インすロールする必要なしと判断できます。

パソコンでの速度

PageSpeed Insights96
高速化の変化なし

モバイルでの速度

遅くなってしまった

ただし、サイト内で使用する写真の枚数やテーマ、その他のプラグインにより効果が出ているサイトもあるようなので、あまりにもサイトが遅くなってきてから考えてもいいと思います。

それぐらいSWELLテーマが高速化されているサイトという事の証明かもしれませんね。

これで、次世代フォーマットでの画像の配信に対するEWWW Image Optimizerプラグインの設定ができました。

よかったらシェアしてね!
目次
閉じる