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

EWWW Image Optimizer 画像ファイルを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つあります!

  • ページの表示速度の高速化
  • 容量を抑えることが出来る
  • PageSpeed Insightsのスコア向上

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

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

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

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

  • IEは今年の6月16日にサポート終了

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

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

PageSpeed Insights

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

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

スマホ

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

パソコン

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

ゆうくん
スマホの数値がよくないのでやはり対策が必要そうです・・
そこで、画像データを簡単にWebpに変換できる
便利なWordPressのプラグイン「EWWW Image Optimizer」を見つけました^^

EWWW Image Optimizerを使ってみた

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

スマホ

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

ゆうくん
数値が18もアップーーーー!!

パソコン

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

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

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

EWWW Image Optimizerの導入方法

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

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

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

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

ゆうくん
ファイル数、多いなぁ・・・汗
これで画像の形式がwebpに変わっていたら成功です!
もし、webpになっていなかった場合は、
設定」→「EWWW Image Optimizer」のタブ「基本」の下部にある
Picture WebP Rewriting」にチェックを入れて「変更を保存」してみてください^^

まとめ

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

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

  • 当ブログではページの表示速度の改善ができましたが、
    必ずしも改善されるとは限らなく、
    画像の少ないサイト・ブログは実感ないかもしれないです!
ゆうくん
離脱率を減らしていきましょーー!!
最後までお読みいただきありがとうございましたっ!!
このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^