私が現在利用させて頂いている、Nishiki Pro の開発者様が中心となって実施されている定例のオンライン勉強会で「WebP」の話題が出ていたらしく、私も挑戦してみました。
WebP化の効果
結果から先に報告します。
「Google PageSpeed Insights」にて「モバイルスコアが10-20」、「PCスコアが5」程アップしました。
特にモバイルスコアの伸び率がものすごくでております。
Chromeでの読み込み調査で確認したところ、しっかり「Type」が「WebP」になっています。
ただ、1点気になっているのが、昨日辺りからスコアの振れ幅が安定してないんですよね。
契約サーバーとの経路問題かと思ったいましたが、そうではないようで･･･もうちょっと様子を見る必要はあるかも？
WebP化にあたっての利用環境
利用サーバー
現在本サイトで利用しているサーバーは「ネットオウル社」の「スターサーバー (ライトプラン)」になります。
- SSD環境
- nginx
- PHP7.4 + PHPアクセラレーター
といった高速化に関しての特徴があります。
利用テーマ
本サイトでは、「Nishiki Pro」を利用しています。
軽量かつ、柔軟なデザインがコード等の知識無く利用できる素晴らしいテーマです。
WebP導入にあたっての導入プラグイン
今回WebP化にあたり、利用したプラグインは以下の二つです。
- WebP Express (WebP 変換＆制御プラグイン)
- compress jpeg & png images (画像圧縮プラグイン)
通常であれば、このようなケースの場合、「EWWW Image Optimizer」を採用しているケースが多いと思います。
あえて、今回本サイトでこのプラグインを採用した理由は以下の通りです。
- 既に「compress jpeg & png images」を利用していた
- PNG&JPEG圧縮に関しては「compress jpeg & png images」の方が効果が高い
- 「EWWW Image Optimizer」はサーバーサイドの処理負荷が高い
詳細は後述致しますが、上記2プラグインでも無事に共存が出来ることを確認できたため、現状では問題ないと判断しております。
その他利用中の関連性のあるプラグイン
WebP化に関して間接的に影響しているプラグインは以下の通りです。
- Autoptimize (主にCSS、JSの最適化で利用)
- WP-Optimize – Clean, Compress, Cache (主にDB関連の最適化に利用)
- FooGallery (標準でギャラリー内の画像に対してHTMLキャッシュが有効)
- WP Lazy Loading (画像の遅延読み込みで利用)
ページキャッシュについては、サイト自体の構築中のため、現在利用しておりません。
ブラウザキャッシュを直接記述するか、プラグインを利用するか、「WP-Optimize」の機能を利用するかは検討中です。
プラグインの設定
compress jpeg & png images
原則、以前に紹介した記事の内容で問題はありませんが、1点だけ設定変更が必要です。
「New Image uploads」の項目を「Compress new images during upload」にします。
この設定は「画像がアップロードされている最中に圧縮処理を行う」というものです。
標準設定では「画像のアップロード後にバックグラウンドで処理」を行いますので、殆ど画像圧縮処理を意識しません。
本設定では「アップロードと同時圧縮」をする為、若干利用可能になるまでのタイムラグ及びサーバーの負荷影響があるみたいですが、本サイトでは意識せず画像の利用が可能です。
この設定により、「WebP Express」の「Convert on upload」と共存出来るようです。
WebP Express
本プラグインについては、Twitter やウェブ検索で見ていると、環境によっては上手く利用できない場合があるので、注意が必要と思われます。
「wp-content のパーミッションを変えてください」とのエラーが解決できないケースがありますが、本サイトの場合、「WebPの保存先を画像フォルダー」にして、「変換対象をアップロードした画像のみ」にすることにより、回避しています。
最後に「Save setting and force new .htaccess rules」をクリックします。
本サイトでの設定は上記画像の通りとなります。簡単に説明すると
- 変換対象はアップロードメディアのみ
- JPEG・PNGのみ変換
- 保存先はイメージフォルダー
- 画像がアップロードされた時に自動変換
- アクセス対象により、URLを置き換え
といった設定を施しています。
補足事項
上述の設定にして頂くことにより、「compress jpeg & png images」で「圧縮処理をしたイメージ」に対して「WebP Express」で「WebP」変換がかかります。
また、この設定であれば、「画像遅延処理」も対応すると思います。
アップロード＆変換済の画像と同じ画像を新規にアップしたところ、自動変換されたWebPファイルサイズがほぼ一緒だったので、共存可能と判断しました
留意点
「WebP」に関しては、現時点 (2020年6月5日) では Apple Safari 及び Internet Explorer が対応しておりません。
Internet Explorer については、実質終了しているブラウザーですので、あまり問題は無いかと思います。
但し、Apple Safari (特にiPhone) は日本ではシェアが多く、無視は出来ない存在です。
その為、現時点では、アクセス元を判別して「WebP or JPEG&PNG」の表示切り替えをする必要が発生しています。
(世界的なシェアで見ると、Appleも再度追従してきそうなきはしますが。)
また、WordpressにおけるWebPの取り扱いは方法は多数存在しますが、取り扱い方法によっては契約サーバ等の確認が必要になります。