WordPress | WebP Expressを使ってWebPに対応する設定方法
WordPressのプラグイン「WebP Express」を利用してWebPに対応してみました。
WordPressをWebPに対応する方法やプラグインはいくつかあるのだと思いますが、検討した結果、簡単そうなWebP Expressを利用。
過去に利用したことのあるプラグイン「EWWW Image Optimizer」でもWebP化はできるようでしたが、こちらは説明等をみる限り元ファイルを書き換える感じでした。
WebPは、元ファイルであるjpgやpngファイルも未対応ブラウザ用に設定しないといけないので、書き換えた場合は未対応ブラウザで表示できなくなります。
普通に考えるとそんなことはないだろうという可能性の話ですが、もしそうだった場合、戻すのが大変そうですので試しに実行するのは止めておきました。
「WebP Express」は別途WebPファイルに変換したファイルを作成、未対応ブラウザ用に元ファイルを表示する仕組みが明記されていたので、割と安心して実行してみました。
「WebP Express」のダウンロードは以下リンクより。
WebP Express – WordPress プラグイン | WordPress.org 日本語
「WebP Express」でWordPressブログをWebPに対応させた設定項目
プラグインの設定画面はブラウザの翻訳機能を使っても理解するのにはちょっとややこしそうですが、デフォルトの設定から少しの変更だけでとりあえずWebPへの対応化が完了しました。
Operation mode（動作モード）
Operation mode（動作モード）はVaried image responses（様々な画像）を選択しました。
General（一般）
Destination folder（移動先フォルダ）をMingled（混合）にしました。
これは、必要ない設定変更かもしれませんので、問題なさそうならIn separate folder（別フォルダ）のままで良いかもしれません。
WebP Expressのインストール・有効化時に、ディレクトリ関係で許可関係のエラー文が表示されていたので、どこかパーミッションとか触らないとなのかな（面倒だな）と思ってとりあえずこの項目で別フォルダを選択しました。
Alter HTML（HTML変更）
Alter HTML?（HTMLを変更しますか？）にチェックをいれました。
チェックを入れるとReplace tags with tags, adding the webp to srcset.（タグをタグに置き換え、srcsetにwebpを追加）はデフォルトでチェックが入っている状態でしたのでそのまま。
また、Dynamically load picturefill.js on older browsers（古いブラウザでpicturefill.jsを動的にロードする）は、おそらくpicture等が未対応のブラウザシェアは僅かしかなく、その為に読み込むjsが増えるのを避けたいのでチェックを外しました。
後で書いていますが、HTMLの変換をJavaScriptでやっていることを確認、好みではなかったので最終的にはAlter HTMLの機能自体を解除しました。
この時点ではイマイチ納得いく挙動にあらず
上記設定で設定保存した時点で、LighthouseでのSEO診断やPageSpeed Insightsの次世代フォーマット関連をクリアしたりWebP対応が概ね完了しているようなのです。
しかし、あまりにも処理時間が短く、え？画像の変換処理してないよね？ってなります。
ドラッグドロップのダウンロードでは.webpがダウンロードされるので半日気づきませんでしたが、気になってソースコードをみてみると.webpはどこにもなく、当然<picture>タグや<source>タグも使われていませんでした。
右クリックのコンテキストメニューから画像ファイルのURLを取得して、ブラウザに表示（ブラウザに表示される拡張子は.png）、でもそれをドラッグドロップでダウンロードすると.webp。
私にとっては「こんなことができるんだー」って勉強になったわけですが、少なくとも上記の設定だけでは画像ファイルに対して.htaccessでWebPにリダイレクトしている模様で思ってた挙動と違います。
<picture>タグと<source>タグで振り分けてほしいのです。
いや、それよりもファイル自体はそのままで拡張子だけ書き換えて、騙し表示していないか？という懸念も生まれました。
それなら画像変換処理時間がどこにもなかったのも納得できますし、jpgやpngは拡張子だけ書き換えても概ね表示できるのでwebpも同じようにできるのかも、と。
試しに適当なpngファイルの拡張子を.webpに書き換えてみたところ、同じ用にデスクトップやブラウザ、ペイント（Windows10）で利用できました。
Bulk Convert（一括変換）を実行したあとなのでなんとも言えませんが、改めて同じ画像のpngファイルとwebpファイルのファイルサイズを確認したところ、ファイルサイズはwebpファイルの方が小さかったので、おそらくは表示時などにwebpファイルが存在しなければ都度、元ファイルから変換、作成しているものと思われます。
Bulk Convert（一括変換）を実行する
確認の為、一度一括変換を実行しました。
一括変換後も設定を色々見直してみましたが、<picture>と<source>を使った振り分けタグに置き換える機能を利用する設定方法は見つかりませんでした。
挙動を確認
現状の挙動を確認してみました。
表示される画像をドラッグでダウンロード
Google ChromeにてWordPressブログに表示される画像をドラッグしてダウンロードという方法で確認してみたところ、WebP画像がダウンロードされる。
右クリックメニューで画像ファイルを表示
右クリックメニュー’（コンテキストメニュー）で「新しいタブで画像を開く」にて表示した場合のファイルアドレスは.jpgや.pngとなっている。
それをドラッグドロップでダウンロードした場合のファイルは.webp。
名前をつけてダウンロードするとjpg、pngファイルがデフォルト選択肢になるが、保存したファイルのサイズをみる限り多分中身はwebp。
LighthouseでのSEO診断やPageSpeed Insightsにて確認
LighthouseでのSEO診断やPageSpeed Insightsにおいて「次世代フォーマットの画像（という名のWebP）を使えや、コラ」という項目も解決していることを確認しました。
HTMLソースコードで差異を確認、JavaScript使ってた
HTMLソースコードにプラグインWebP Expressの有無による違いを確認してみたところ、以下のjsコードがみつかりました。
<script>
document.createElement("picture");
if (!window.HTMLPictureElement && document.addEventListener) {
window.addEventListener("DOMContentLoaded", function () {
var s = document.createElement("script");
s.src = "https://1-notes.com/wp-content/plugins/webp- express/js/picturefill.min.js"; document.body.appendChild(s);
});
}
</script>なるほど、<picture>と<source>タグにソースコード上で置き換えられていないとおもってたらJavaScriptで書き換えているのか？
更に、picturefill.min.jsというJavaScriptファイルを読み込んでいるし、Webpに対応するためのコストとしては高い気がする。
とりあえず、これならAlter HTML（HTML変更）の機能は要らないと判断して解除、.htaccessのリダイレクトのみでもLighthouseでのSEO診断やPageSpeed Insightsは問題なさそうなのでひとまずこの状態で休憩することにします。
いまいち、納得はいっていないので他の方法も検討する予定です。