サイトスピード改善でもっともネックになるのが画像。画像データは基本的に重いので、圧縮するなどできる限り軽量化することが望ましいです。
そこでぜひ試してみたかったのが、画像のWebP（ウェッピー）対応をすること。WebPはGoogleが開発・推奨している最新の画像形式で、画像の軽量化を期待できます。
WordPressサイトの場合ですと、プラグインを使えば比較的簡単にWebPに対応することができます。今回はWordPressサイトにおける画像のWebP化の設定方法や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。
WebP（ウェッピー）ってどんな規格？
WebP（ウェッピー）はGoogleが開発し導入を推奨している静止画像フォーマット。拡張子はそのまま「◯◯◯.webp」となります。
JPEGなど従来の画像フォーマットと比較すると、2〜3割近く画像を軽量化することができます。
A new image format for the Web
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.（Web用の新しい画像形式
WebPでロスレス圧縮（可逆圧縮）された画像は、PNGと比較してファイルサイズが26％小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34％サイズが小さくなります。）
by：https://developers.google.com/speed/webp
Googleが提供しているサイトスピード計測ツール「PageSpeed Insights」では、JPEG XR、JPEG 2000などと同様に利用することを推奨されています。
Google神が勧めるのであれば、できる限り導入を検討した方が良いでしょう！
WebPの対応ブラウザは？
WebPは新規の画像形式ということもあり、対応していないブラウザやバージョンがあるのが現状です。
Google ChromeやFirefox、Operaなどでは対応していますが、利用ユーザーの多いSafariや、IEではまだ未対応です（2019年9月現在）。
Photo by：WebP image format
未対応のブラウザではWebPの画像は表示されませんので、「WebPの選択的レスポンス」つまり画像の出し分け設定をする必要があります。例えばWebPに対応しているChromeではWebPを、対応していないSafariでは従来の画像形式であるJPGやPNGを表示するなど。
一見難しそうですが、WordPressサイトの場合はプラグインの導入と「.htaccess」のファイルを少し追記するたけで設定できます。
WebPの設定方法
WebPの設定方法は、WordPressの場合そこまで難しくありません。一つ一つ確認していきましょう！
1. EWWW Image Optimizerの導入
photo by：wordpress公式サイト
まず画像圧縮・最適化のプラグイン「EWWW Image Optimizer」をインストール・有効化します。導入方法は基本的に他のWordPressプラグインと同じです。
このプラグインを活用すると、画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、画像のWebP対応をする設定も可能です。とっても便利ですね。
EWWW Image Optimizerの詳細な使い方については、以下の記事を参考にしてみてください。
2. EWWW Image Optimizerで設定
EWWW Image Optimizerを有効化したら、「WebP」タブを開きます。
にチェックし、「変更を保存」をクリック。
するとコードが表示されるので、これを「.htaccess」ファイルに追記します。
この時点では画像のWebP対応が完了していないので、画面右下に赤枠で「PNG」を表示されています。WebP対応が完了すると、これが緑の枠で「WebP」表記に変更される感じです。
3. 「.htaccess」ファイルへ追記
サーバー内の「.htaccess」ファイルを、FTPソフトなどを使い開きます。
対象となるWordPressサイトの下記ディレクトリまで移動します。
.htaccessファイルを見つけたら、ダウンロードします。
先頭に「.（ピリオド）」がつくのはUNIX系OSで不可視ファイルを意味するので、場合によってはダウンロードしてもファイルを確認できない場合があります。その場合は下記のキーを打つと、隠しファイルを表示することができます。
ちなみにWikipediaでは.htaccessファイルを下記で定義しています。
.htaccess（ドットエイチティーアクセス）とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。
wikipedia
BASIC認証やリダイレクトの設定など、簡単に言えばWebサーバの動作を制御する設定ファイルって感じですかね。記述をミスるとサイトが表示されなくなったりするので、あまり触れたくないファイルではあります……。
<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
ファイルの先頭などに先程のコードを記載し、完了したらFTPでサーバー上にアップし上書きします。
こちらのコードの改良版については色々サンプルがあるので、「WebPの選択的レスポンス」について色々調べてみると良いかもです。上記のコードでも問題なく動作はしますので、今回はこのまま進めます。
4. EWWW Image OptimizerでWebP化
EWWW Image Optimizerを有効化し、「.htaccess」ファイルへの追記が完了すれば、これからアップロードされる画像については全て自動的にWebPへ最適化されます。
しかし注意点としては、設定前にアップロードした画像については自動的にはWebPへ最適化されません。ですので手動で最適化する必要があります。といってもほぼワンクリックで完了です！
WordPressの管理画面から、メディア ＞ 一括最適化へ進めます。
「再最適化を強制」を選択し、「最適化されていない画像をスキャンする」をクリック。
続いて「最適化を開始」をクリック。
最適化が開始されていきます。これでこれまでアップロードされた画像を含めてWebp化してくれます！
最適化完了後、先程確認したEWWW Image Optimizerの設定画面の「WebP」タブを確認すると、画面右下に「WEBP」の表示を確認できます。
写真一覧でもWebP対応がされていることを確認できます。
これで無事画像のWebP化は完了です！！
WebPの反映を確認する方法
WebP対応が実際に動作しているのか実際に確認してみましょう。Google Chromeの検証ツールで確認可能です。
WebP対応したWordPressサイトを開き、デベロッパーツールを開きます。
を選択します。
Typeの項目を確認し、「webp」の表示が確認できればWebP化できています。
PageSpeed Insightsでも、「次世代フォーマットでの画像配信」の項目が合格できています！！
また実際にsafariやIEなどWebP対応していないブラウザでは、JPGやPNGなどのフォーマットで画像が表示されているのか（画像形式の出し分けができているのか）必ず実機で確認しておきましょう！
画像データはWebPで軽量化すべし！
ここまでWordPressサイトにおける、画像のWebP対応方法ついて紹介してきました。
サイトスピードを下げる主要因である画像データは、今回紹介したWebP対応するなどできる限り軽量化していきましょう。プラグインを活用すれば導入ハードルは低いですよ。
今回紹介したプラグイン「EWWW Image Optimizer」の使い方については、以下の記事も参考にしてみてくださいね。
またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。
下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓
