簡単!次世代フォーマットに対応して高速化-WordPress

WordPress・プラグイン

はじめに

サイトの速度解析ツールであるGoogle提供の「Page Speed」で、分析ツールが「Lignhthouse」に変わった為、スコアが下がってしまった為、次世代フォーマットを検討・・・。

当サイトはPCでは100点(または90点台)、モバイルでは悪くても80点台だったのが、最近は40点台になっていました。

次世代フォーマットでの画像配信

 

対応後は効果てきめん!

対応前

対応後

 

次世代フォーマットとは

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

詳細は以下をご覧ください。

 

対応方法

これまでの画像をWebPに変換したり、対応ブラウザによって違う形式の画像を用意したり、その為のコードを挿入したり、、、はすべて不要!

 

プラグインを使って簡単に可能です。

プラグイン名:WebP Express

jpeg / png の代わりに自動生成された WebP 画像を、WebP 対応ブラウザーに提供します。どこでも動作します (メディアライブラリ画像、ギャラリー、テーマ画像など)。

WebP Express

インストールして有効化

 

設定は1か所チェックのみ

WebP Express

 

設定画面が開いたら、スクロールして下の方にある「After HTML」の項目にチェックを入れて保存するだけです。

「After HTML」のチェックは、プラグインでの推奨設定のようですが、チェックを入れなくても動作します。HTMLTコードが自動で変更・挿入される事で、サイトのデザインに影響がある可能性があるというデメリットがあるので、運用次第、サイト単位に考慮。

WebP Express

 

保存すると以下の3つの 「.htaccess」が生成されます。

Rewrite rules were saved to the following files:

/home/XXXXX.net/public_html/wp-content/themes/.htaccess (themes)
/home/XXXXX.net/public_html/wp-content/uploads/.htaccess (uploads)
/home/XXXXX.net/public_html/wp-content/webp-express/webp-images/.htaccess (cache)

以上で完了です。

 

Alter HTMLのオプションについて

WebP Express

オプションLazyRoadキャッシュ
①<img>タグを<picture>タグに変換
②画像URLを変更×(?)×(?)

1つ目のオプションが初期値です。2つ目のオプションはHTMLタグを変更しないので、WebP非対応ブラウザでは画像が表示されない、キャッシュが効かないなどのデメリットがある為、1つ目推奨(初期値)。

 

その他の項目は、基本デフォルトのままでOKですが、詳細設定方法が気になる方はプラグイン名で検索すれば解説されているサイトが見つかります。

項目内容
Operation mode動作モード
General動作フォルダ
.htaccess rules for webp generation画像応答が効果的に有効に
Conversion画像変換の処理内容
Alter HTMLHTMLを変更する

 

プラグインで何が出来ているのか

Webpファイルが生成される

自動的にアップロード画像に拡張子(.webp)を付けたファイルが以下のディレクトリに保存されます。

public_html/wp-content/webp-express/webp-images/uploads/

WebP Express

WebP Express

 

ブラウザ表示用コードが挿入される

ブラウザでは、対応ブラウザではWebpを、非対応ブラウザでは元のアップロード画像を表示するようにコード(IMGタグの代わりにPICTUREタグ)が挿入されます。

「Alter HTML」チェックを入れ、デフォルトのオプション「Replace <img> tags with <picture> tags, adding the webp to srcset.」のまま保存した場合。

WebP Express

 

挿入コードサンプル

<picture><source srcset="https://XXXX/wp-content/webp-express/webp-images/uploads/XXXX.jpg.webp 600w" sizes="(max-width: 600px) 100vw, 600px" type="image/webp"><img loading="lazy" class="alignnone size-full wp-image-21114 webpexpress-processed webp_extension webp_lossy" src="https://ayaito.net/wp-content/uploads/XXXX.jpg" alt="XXX" width="XXX" height="XXX" srcset="https://XXXX/wp-content/uploads/XXXX.jpg 600w" sizes="(max-width: 600px) 100vw, 600px" title="
WebP lossy, quality ~70, https://ayaito.net/wp-content/webp-express/webp-images/uploads/XXXX.jpg.webp“></picture>

 

確認方法

プラグインを有効化し、一か所にチェックを入れて保存するだけで、上記の事が実現できますが、自身のサイトで本当に対応できたのか確認する方法ですが、

表示された画像を右クリックで保存して拡張子を確認すれば可能です。

すべての画像を一気に見るには、Google Chromeの拡張機能を使えば一目瞭然です。

 

以下から「拡張機能に追加」するだけ。

WebP Highlighter

WebP Highlighter

 

表示結果

ブラウザで見ると、画像に蛍光色の破線枠が出ます。

WebP Highlighter

WebP Highlighter

枠色の違いは以下の通り。

緑 = シンプルなロッシー(非可逆)圧縮。
桃 = シンプルなロスレス(可逆)圧縮。
赤 = 拡張

経験上、JPGファイルはグリーンに、PNGファイルはピンクになっているようです。

 

ずっと蛍光色の枠が出るのはうっとうしいので、ブラウザの以下のマークを押し、チェックを外せば消せます。

WebP Highlighter

 

オフの状態

WebP Highlighter

 

対応後の画像アップロード

WordPressのバージョンを5.8以上にし、画像はWebPファイルで用意してアップロードする事も可能ですが、

まだ「WebP非対応」のブラウザがある為、

これまで通り、JPGやPNGなどをアップロードし、あとはプラグインに任せるのが楽。

 

以上です!

関連記事