WordPressを高速表示!!EWWW Image Optimizerで画像をWebPに変更をする方法

2019 11/08
WordPressを高速表示!!EWWW Image Optimizerで画像をWebPに変更をする方法

WordPressで作成しているサイトの高速化はさまざまな方法があるが、画像フォーマットの変更記事は「見ても見ても実行するのが怖いな。」って思いがあったので後回しにしていました。
が、やっぱりグーグルさんの評価基準にもあるように「サイトの高速化で画像フォーマットの変更は避けて通れないな。」って思ったので、今回は自分が行った方法を記載していきます。

目次

画像フォーマットを変更する前の状況

まず、PageSpeed Insightsで高速化前の状況がこちら。

画像
画像

モバイルのスコアで77は表示が速い方なのだが、この時はまだ3記事しか書いていない状態なので
記事を書き進めていくと「もっと遅くなる可能性」があります。
ちなみに画像の青枠「次世代フォーマットでの画像の配信」が2.25sになっていています。
内容は画像のフォーマットを「JPEG 2000」やら「JPEG XR」やら「WebP」にすると画像の圧縮率が高いので、よりサイトを高速表示ができるよって意味になります。

今回の記事は、画像フォーマットを「WebP」に変える記事になっています。

※ちなみにPageSpeed Insightsとは、自サイトの表示速度テストができるサイトです。
ご存じでない方は下記からどうぞ。

URL:https://developers.google.com/speed/pagespeed/insights/

プラグイン「EWWW Image Optimizer」

いろんなプラグインを使って試したんですが、1番わかりやすく使い勝手が良かった「EWWW Image Optimizer」の使い方をご説明していきます。

インストール方法

まず管理画面(ダッシュボード)にログインをして下さい。そのあと左側の「プラグイン⇒新規追加」をクリックしてください。そうすると下記画像のような状態になるので「①」にEWWW Image Optimizerを入力してください。

画像

しばらくすると「 EWWW Image Optimizer 」のプラグインが表示されます。次に②のところが「今すぐインストール」になっているのでクリック。インストール後、上記画像の②の「有効化」をクリックすることで使用可能になります。

設定方法

インストールが出来たら、次は設定です。 管理画面に戻って「設定⇒EWWW Image Optimizer」をクリックします。
すると、EWWW Image Optimizerの管理画面に変わるので、真ん中あたりに下記画像の①「WebP」があるのでクリック。すると、その下の表示が変わるので②の「JPG,PNGからWebPにチェック」を入れて③の「変更を保存」をクリックして下さい。

画像

保存後、スクロールして下の方に進むと下記画像が表示されると思います。

画像

ここで注意ですが。「リライトルールを挿入する」をクリックすると「.htacsses」に自動で書き込みをしてくれるので簡単なんですが、もし「.htacsses」に他のコードを記載していたら消えてしまいます

なので .htacssesに自分で記載をする方がいいのですが、自分で書き込む場合は.htacssesをバックアップしておいてください。最悪の場合、サイトが真っ白になってしまいますので。

大切なのでもう1度言いますが「.htacsses」ファイルは絶対にバックアップを保存してから記載をして下さい!ちなみに「リライトルールを挿入する」でもできますが、その後にバグが発生するかもしれないので、おすすめは「手動で追記」の方です。

下記にコピペ用のソースを記載していきますね。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{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

上記をコードを.htacssesに記載すると、上記画像の左下の「赤枠のPNG 」が下記画像のように「緑枠のWEBP」になります。これで設定は終了です。

画像

アップロード済み画像を「WebP」に変換させる方法

今の段階では、すでにアップロードした画像は「WebPフォーマット」になっていません。なのでアップロード済み画像を変換していく作業になります。
管理画面の「メディア⇒一括最適化」をクリックしてください。

画像

下記画像が表示されるので「最適化されていない画像をスキャンする」をクリックします。

画像

スキャンが終わると「最適化を開始」ボタンが表示されるのでクリックします。

画像

すべて完了したらアップロード済みのフォーマットとWebP化されたフォーマットが出来上がりますので
WebPに変更は完了です。

「WebP」 PC・Googleクロームから確認方法

まず、自サイトを表示させてください。
次に、マウスカーソルをサイト上に載せて「右クリック」して下さい。
下記画像が表示されるので一番下の「検証」をクリック。

画像

下の方にソースコードやらが表示されますが、その一番上のタグ内に「Network」のタブがあるのでクリック。

もし、その下に何も表示がされていなかったら、1度サイトをリロード(開きなお)してください。

すると下記画像のように色々と表示がされるので、Typeを逆ソート順にします。
画像(JPG,PNG)のTypeが「webp」の表示になっていたら完成です。

画像

画像フォーマットを変更した後の状況

では、PageSpeed Insightsで画像フォーマットを変更したあとのPageSpeed Insightsを確認していきます。
変更後の画像がこちら。

画像
画像

モバイルのスコアが80点になりました!(って3点しか変わってないですが。)
まだ3記事しか書いていないのでそんなに変わりません。

ただ、改善できる項目の「次世代フォーマットでの画像の配信」2.25s はなくなっています。
記事数が増えてアイキャッチ画像が増えてくると2.25sはもっと数値が高くなりますので
記事数が増えた場合は大きな差になってきます。

画像をWebPに変更をする方法のまとめ

いかがだったでしょうか。
自分のサイトは「体感的には遅くないよ」ってサイトもありますが、
「PageSpeed Insights」でスコアがよくない場合、Googleさんからの評価はよくないかもしれません。(断言はできませんが・・。)
評価がよくないってことは、検索上位に表示がされたいのに悪影響を及ぼす可能性がありますので
ぜひ1度、「PageSpeed Insights」で自分のサイトの速度を計測してみてくださいね。

URL:https://developers.google.com/speed/pagespeed/insights/

この記事が気に入ったら
フォローしてね!

目次
目次