通常、画像は平均的なWebページの50％を占めます、画像を最適化することは表示速度改善には非常に重要です。
多くの方は、JPEGやPNGといった画像を使っているんじゃないでしょうか？
もちろん僕もそうでした。
WordPressテーマを変えたことで、何の気なしにPageSpeed Insightsでサイトの測定をしたときに、
「次世代フォーマットでの画像の配信」というのが書いてありこんな感じでした。
その中に見慣れない「WebP」というフォーマットが！
調べてみるとGoogleが開発したWebP（ウェッピー）という形式の画像でJPEG画像やPNG画像と比べて容量が20～30%ほど削減するらしい！！
ということでさっそく入れてみました！
調べたところ「WebP Express」というプラグインがよさそうだったので、この記事で設定方法を載せておきます。
WebP Expressのインストール
管理画面から「プラグイン」≫「新規追加」≫「WebP Express」でインストール「有効化」してください！
インストール方法がわからない方は下記記事を参考にしてください。
プラグインインストール前にバックアップを取っておきましょう。
設定自体は簡単ですが、ブログに現在画像がたくさんある方は、変換にかなり時間がかかります！
WebP Expressの設定方法
有効化したら管理画面左メニューの「設定」→「WebP Express」をクリックしましょう。
クリックすると以下の画面になります。
- Operation mode
- General
- Redirection rules
- Conversion
- Alter HTML
- Web service
この画面を設定していきます。
大きな設定項目は6つありますが、僕が設定したのは２カ所だけです。
- Operation mode
-
初期設定のまま
- General
-
初期設定のまま
- Redirection rules
-
初期設定のまま（3カ所にチェックが入った状態）
- Conversion
-
設定変更有（後ほど解説）
- Alter HTML
-
設定変更有（後ほど解説）
- Web service
-
初期設定のまま
という感じです。
「Conversion」は現在ブログ内にあるすべての画像をWebPに変換する作業で時間がかかるので後でしましょう。
先に「Alter HTML」の設定
あとは触らずデフォルトで使っています。
「Replace image URLs」にチェックを入れるとページキャッシュ機能が使えないようなので、
僕は「Replace <img> tags with <picture> tags, adding the webp to srcset」のままにしています。
「lazy load」などを使っている方も注意が必要です。
Conversion設定
ちょっと順番が前後してややこしく感じますがご了承ください。
Conversionの項目では一番下にある。
- Convert on uploadをチェックを入れます。
- Bulk convert のボタンをクリックします。
すると下の画像のポップアップが出てきます！
Start Conversionをクリックすると画像の変換が始まります。
こんな感じです。このショボショボの当ブログでも40分くらいかかったので、画像の多い方はかなり掛かると思います。
まぁ、風呂入ったり飯食ったり、寝る前とかがいいかもしれません。
あっ、でも終わった後に Save Setting をクリックりてセーブするのをお忘れなく！
以上が僕が今回調べて『WebP Express』に行った設定です。
もっと、詳しい項目の解説が知りたい方は下記記事がとても分かりやすく参考になります。
最後に：実際の使用感
最後にここ数日使ってみた感想ですが、画像をWordPressにアップロードする時のスピードは、変換しているためか遅いです。画像が大きいほど遅く感じます。
今のところ不具合などは無いですが、念のため使用環境を記載しておきます。
- プラグインバージョン0.17.3
- WordPress 5.4.2–ja
使用WordPressテーマ「SWELL」
です。