![](https://ichibon0822.com/wp-content/uploads/2022/06/22780927.png)
PageSpeed insightsでサイトのスコアを計測してみたけど悪いスコア表示だったわ……..
![](https://ichibon0822.com/wp-content/uploads/2022/08/22998967.png)
![](https://ichibon0822.com/wp-content/uploads/2022/08/22998967.png)
![](https://ichibon0822.com/wp-content/uploads/2022/08/22998967.png)
サイトのスコア改善に悩んでいるようですね、今回は【次世代フォーマットでの画像の配信】の項目を改善していきましょう!
![](https://ichibon0822.com/wp-content/uploads/2022/08/ページスペード1.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/ページスペード1.jpg)
今回はプラグイン【EWWW Image Optimizer】を導入して改善していきましょう。
プラグインをインストールして設定すればいいので、2ステップで比較的簡単に改善できます。
- EWWW Image Optimizerのインストール
- EWWW Image Optimizerの設定
![](https://ichibon0822.com/wp-content/uploads/2022/08/はてなブログ アイキャッチ画像 はてブ Blog-2-500x263.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/はてなブログ アイキャッチ画像 はてブ Blog-2-500x263.jpg)
画像の最適化は必要か
不適切な画像サイズの場合、サーバーからの読み込むにファイルサイズが大きく読み込みに時間がかかります。
ページが重くなかなか表示されないとユーザーはストレスを感じ離脱してしまいます。
サイト表示に時間がかかるほど離脱率は上がっていきます、SEOにも良くありません。
- 表示にかかる時間が1~3秒で離脱率32%
- 表示にかかる時間が1~5秒で離脱率90%
- 表示にかかる時間が1~6秒で離脱率106%
特に現在ではPCよりモバイルユーザーの方が圧倒的に多い傾向にあるので、モバイルユーザー向けに改善が必要なのです。
EWWW Image Optimizerのインストール・設定
それではインストールから設定まで順番にやっていきましょう!
「管理画面」→「プラグイン」→「新規追加」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/プラグイン→新規追加1-1.png)
![](https://ichibon0822.com/wp-content/uploads/2022/08/プラグイン→新規追加1-1.png)
「EWWW Image Optimizer」→「今すぐインストール」→「有効化」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar1-800x312.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar1-800x312.jpg)
「EWWW Image Optimizerの設定」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar2.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar2.jpg)
基本のタグ→「一括最適化」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar3.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar3.jpg)
「最適化されていない画像をスキャンする」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar4.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar4.jpg)
「〇〇点の画像を最適化」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar5.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar5.jpg)
ゲージが100%になり完了でOKです。
最適化ログが表示されるので見てみましょう!
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar6.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/EWWW-Image-Optimizar6.jpg)
画像が変換されているか確認しよう
画像がwebpに変換されているか確認してみましょう。
「サイト画面で右クリック」→「検証」→「Net work」をクリック
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認1.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認1.jpg)
「img」をクリック→「Ctrl+F5」
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認2.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認2.jpg)
webpになっていたらOK
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認3.jpg)
![](https://ichibon0822.com/wp-content/uploads/2022/08/確認3.jpg)
以上比較的簡単に作業が進められたんじゃないでしょうか。
離脱率を下げて少しでもPVを伸ばせるよう頑張っていきましょう!
最後までお読みいただきありがとうございました。
![](https://image.moshimo.com/af-img/1762/000000038398.png)
![](https://image.moshimo.com/af-img/1762/000000038398.png)