ブログ・お知らせ
# WEB制作技術やツール
WebP_Expressプラグインで
ホームページの表示速度を改善
記事公開日：
最終更新日：
マザーシップウェブ制作事務所のなるゆうです、こんにちは。
当方制作のホームページでは、画像の表示を早くする方法の１つとしてWebP Expresというプラグインを利用しています。
画像ファイル（jpgやpng）を、表示が早い「webp」というファイルに自動変換してくれるツールです。
PageSpeedインサイトの結果（スマホ）
当サイトの結果です。
WebP Expressを有効化していないとき
WebP Expressの設定をしているとき
、、お、、おおうというレベルのスピードなのですが、要素をかなり詰め込んだサイトのスマホ版でこの改善はありがたいです。
すこしでも早くしたいとご検討の方、他のwebPプラグインで数字の改善がないよ、という方におすすめのプラグインです。
WebP Expressの利用方法
１）まずはインストール
２）設定
管理画面サイドバーの[設定]-[WebP Express]より設定
最後のAlter HTMLについて、私は「Replace image URLs」（画像のURLを置き換える）を選択しています。
デフォルトでは、<picture>タグを使用する方法が選択されていますが、この設定の場合はサイトでLazy load等（遅延読み込み）を利用しているときにjpegやpngなどオリジナル画像のまま配信されている場合があるためです。
遅延読み込みしていてもトラブルが無いサイトでは「Replace <img> tags with <picture> tags, adding the webp to srcset」にチェックで問題ありません。こちらの方がページキャッシュの面で有利だそうです。
（どちらにしても数値上・体感上の速度にほとんど変化が無いように思います）
３）数時間待つ。急ぎの場合はメディアライブラリからも変換可能です。
サイトの規模によるかもしれないのですが、私の感覚では一晩おいた頃に変換が完了しています。
４）最後にスピードテストをしてみましょう
https://developers.google.com/speed/pagespeed/insights/?hl=ja
早くなりましたか？
2025年11月11日追記！
以下の場合（レアケースですが）xmlサイトマップにエラーが出る場合があります。
➀WebP Expressプラグインを利用している
➁WordPress Yoast SEOプラグインでxmlサイトマップを出力している
➂大量に投稿しているorカテゴリー・タグ等を作成している
This page contains the following errors:
error on line 2 at column 6: XML declaration allowed only at the start of the document
Below is a rendering of the page up to the first error.
エラーが出た場合や大量に投稿が予想されるサイトについては、
WebP Express Settings設定画面を以下のように変更しましょう！
[Alter HTML]-[Use content filtering hooks (the_content, the_excerpt, etc)]にチェック
エラーが出るxmlのソースを見ると、余計な１文が追加されていました。
そちらを出力しないために上記のような設定が必要になるのです。
参考サイト：
