【WordPress】画像をWebpに変換して、ページの表示速度が格段にアップ！

サイトやブログを運営されているみなさんはページの速度表示が
SEO的にものすごく大事なコトをご存じでしょうか。

気にせずに大きい画像をバンバン使っていると表示速度が遅くなりその結果、
悲しいことに離脱率に繋がってしまいます。

読み込み時間が
1～3秒だと離脱率は32％、
1秒～5秒で90％、
1秒～6秒で106％、
1～10秒で123％も上昇することが報告されているらしいです。

出典：Find out how you stack up to new industry benchmarks for mobile page speed

いや、もう106％とか123％までくるとわけがわからない数字です><

当ブログは、画像をたくさん使用しているのでページ速度が心配に。。
なので画像データをWebp形式に変換してページ速度の改善を試みたことを書いていきます！

Webpとは

Webpは「ウェッピー」読みます^^

Google社が次世代の画像フォーマットとして開発した形式で、
画像ファイルによりますが、平均的に20～30％小さくすることができる！

メリットとデメリット

Webpを使うメリットとしては大きく3つあります！

JPGやPNG形式の画像ファイル1点につき、20～30％も小さくなるので
画像をたくさん使用しているページには速度アップがかなり見込めますね^^

デメリットとしては、対応していないブラウザがまだあるということ。

2022年5月22日現在では、「IE」「Edge 12-17」やChromeやSafariのバージョンの古いブラウザは対応されないです！
ただトータルで94.75％のブラウザでは対応しているので5.25％を多いか少ないかどう見るかですね・・・

今まで、Web業界の足をひっぱってきたIE（Internet Explorer）ですが、

IEがサポート終了されるので、Webpも安心して使用することが出来そうです^^

メリットの3つ目で紹介した「PageSpeed Insights」についてもご紹介します！

PageSpeed Insights

PageSpeed Insightsとは、Google社が提供しているツールの一つで、
サイトのURLを入力することで、スマホとPCの表示スピードを数値化して教えてくれます。

ちなみに、当ブログの画像ファイルをWebpに変換する前に計測してみました^^

スマホ

43はあきらかに遅い・・・
これは改善しないと離脱率に繋がりそうです。。

パソコン

パソコンは76と遅くも早くもない普通の数値。

EWWW Image Optimizerを使ってみた

当ブログの画像ファイルがWebpに変換したことで、
どれぐらい数値が変わったのかをご紹介します！

スマホ

43から61までなんと上がりました！

パソコン

パソコンは5だけ数値アップ。

Webpにすることでスマホの数値がだいぶ改善されました！

このプラグインはちゃんと速度が上がったことが
当ブログで証明されたので導入方法をご紹介していきます^^

EWWW Image Optimizerの導入方法

EWWW Image Optimizerとは、画像を劣化することなく、
アップ時に自動的に画像を圧縮・Webpに変換してくれる便利な無料プラグイン。

「プラグイン」→「新規追加」の検索窓に【EWWW Image Optimizer】で検索。
水色のホイール？が転がっているイラストのプラグインを「今すぐインストール」をクリック。

インストールをした後は、「メディア」→「一括最適化」を選択し、
「最適化されていない画像をスキャンする」をクリック。

画像ファイルを一括で最適化してくれます！
当ブログは自動的に生成されるサムネイル画像とかをもろもろ含めてファイル数が1021、
（実際アップした画像は250枚ほど）

まとめ

今回は「EWWW Image Optimizer」というWordPressのプラグインを使って
画像ファイルをWebpに変換し、ページの表示速度を改善することができました！

ページの表示速度が遅いなと感じたら
ぜひ、実践してみてください^^