![](https://zakkioh.com/wp-content/uploads/2021/01/hatena-chan2.jpg)
PageSpeed Insightsでページ表示速度を測ると、「次世代フォーマットでの画像」にしろと指示されるんだけど、どうして良いか分かりません。
![](https://zakkioh.com/wp-content/uploads/2021/01/cropped-zacky-5.gif)
一つの解決方法がここで紹介するWecPへの変換だよ
PageSpeed Insightsでページ表示速度を測ると、下画像のように改善できる項目として「次世代フォーマットでの画像の配信」が表示される場合があります。
![](https://zakkioh.com/wp-content/uploads/2020/03/jisedaiformat.jpg)
筆者もこれに悩まされ、対策に困っていました。
が、EWWW Image OptimizerでWebP変換することで、ページ表示速度を上げることができましたので、解説します。
WebPに変換する手順
プラグインEWWWをインストールして有効化します。
- WordPressにログインし、サイドバーの「プラグイン」を押します。
- 「新規追加」を押します。
- EWWWをキーワード爛(検索窓)に入れます。
- 「今すぐインストール」を押し、「有効」ボタンを押します。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-install-new.jpg)
「WebP変換」にチェックを入れて「変更を保存」
コードをサーバーの.htaccess欄にコピペします。
スキャンした画像を一括変換します。
次世代フォーマットWebPとは?
次世代画像フォーマットとは従来のPNGやJPEGより圧縮率の高い新しい画像フォーマットのことで、そのなかの1つに「WebP(ウェッピー)」があります。
今回はそのWebPによる対策です。
WebPとはGoogleが開発する表示速度を短縮させる静止画フォーマットです。
ただしWebPは読み込めるブラウザが限定的です。「Edge」「Firefox」「Chrome」などのブラウザは対応していますが、「Safari」や「iOS Safari」は対応していません。Androidでは古いバージョンでなければ問題なく使うことができるようです。
筆者の場合はSafariやiOS Safariでも大丈夫ですが、念のため。 Safariをご利用の方、このページ大丈夫ですか?
EWWW Image Optimizerの設定
画像を次世代フォーマットWebPにするには、プラグイン「EWWW Image Optimizer」を使います。
WordPress管理画面のサイドバーメニューから、「設定」→「EWWW Image Optimizer」→「基本」の順に進みます。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-webp003.jpg)
「WebP変換」の部分のチェックボックスにチェックを入れ、「変更を保存」ボタンを押下します。
![](https://zakkioh.com/wp-content/uploads/2022/02/webp-henkan-1.jpg)
「リサイズ」ボタンを押し、「既存の画像をリサイズ」と「他の画像をリサイズ」にチェックを入れ、「変更を保存」ボタンを押します。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-resize.jpg)
サーバー側の設定
XSERVER の場合
次にサーバーの管理パネルにログインします。
ここではまず、エックスサーバーを例に説明します。次にConoHaWingの場合を説明します。
サーバーパネルにログインします。
![](https://zakkioh.com/wp-content/uploads/2022/02/image.png)
![](https://zakkioh.com/wp-content/uploads/2020/03/login2.jpg)
サーバーパネルから「.htaccess編集」を押します。
![](https://zakkioh.com/wp-content/uploads/2022/02/image-1.jpg)
ドメインの中から対象のドメインを探し、「選択する」を押します。
![](https://zakkioh.com/wp-content/uploads/2020/07/domain-select2.jpg)
「.htaccess編集」のタブを選択。
![](https://zakkioh.com/wp-content/uploads/2020/03/htaccess-edi.jpg)
「.htaccess」欄上部に、下記のコードを舌画像のように貼り付けます。
<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
![.htaccessにコードを貼り付ける](https://zakkioh.com/wp-content/uploads/2020/03/htaccess-cpypaste.jpg)
必ず元の状態をメモ帳などに保存しておきましょう。
編集後はサイトが正常に表示されているかどうかを必ず確認し、異常が見つかったら元の状態にに戻せるようにします。
「確認画面へ進む」ボタンを押下します。
![](https://zakkioh.com/wp-content/uploads/2020/07/confirm.jpg)
「実行する」を押します。
![](https://zakkioh.com/wp-content/uploads/2020/03/jikkou.jpg)
「編集が完了」となったらOK。
![](https://zakkioh.com/wp-content/uploads/2020/07/edi-end.jpg)
WordPressのEWWW設定画面の戻り、「変更を保存」ボタンを押すと赤字の「PNG」が緑地の「WEBP」に変わります。それを確認したら完了です。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-webp002.jpg)
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-webp-green.jpg)
ConoHaWingの場合
ConoHaWingの管理画面にログインし、「サイト管理」→「サイト設定」→「応用設定」と進む。
![](https://zakkioh.com/wp-content/uploads/2022/02/conoha001red2.jpg)
「.htaccess設定」を押します。
![](https://zakkioh.com/wp-content/uploads/2022/02/conoha002red.jpg)
EWWWの下画像赤線内のコードをコピーし、ConoHaWingの赤線枠にペーストし、「保存」ボタンを押します。
次にWordPressのEWWWの設定画面に戻り、「設定を保存」ボタンを押します。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-webp002.jpg)
![](https://zakkioh.com/wp-content/uploads/2022/02/conoha003red.jpg)
EWWWの「WEBP」の赤地の「PNG」が緑地の「WEBP」に変わりますので、それを確認したらOK、完了です。
![](https://zakkioh.com/wp-content/uploads/2022/02/ewww-webp-green.jpg)
画像を一括最適化をする
WordPress管理画面のEWWWプラグインに戻ります。
「一括最適化」を押します。
![](https://zakkioh.com/wp-content/uploads/2020/07/ikkatsusaitekika.jpg)
「最適化されていない画像をスキャンする」ボタンを押します。
![](https://zakkioh.com/wp-content/uploads/2020/07/ikkatsu-scan.jpg)
スキャン後、一括最適化を行います。以上で完了です。