WordPressの表示速度を改善したいと思い、「WebP化」を試してみました。
WebPにすると画像の容量が小さくなり、PageSpeed Insightsのスコア改善にもつながります。
ただし注意点として、EWWW Image Optimizerだけでは、既存記事の画像を一括でWebP化することはできません。
新しくアップロードする画像は自動でWebP化できますが、過去の記事の画像はWordPressの「メディア → 一括最適化」の操作が必要になります。
この記事では、
これから作成する画像をWebP化する方法
既存記事の画像を一括でWebP化する方法
を、初心者向けに順番どおり解説します。
WebP化とは
WebP（ウェッピー）とは、Googleが開発した画像フォーマットです。
JPEGやPNGと比べて、画質を保ったままファイルサイズを小さくできるのが特徴です。
WordPressでも、プラグインを使うことで簡単にWebP化できます。
WebP化するメリット
WebP化には次のようなメリットがあります。
画像の容量が軽くなる
ページの表示速度が速くなる
PageSpeed Insightsの評価改善が期待できる
読者の表示待ちストレスが減る
特に、画像が多いブログでは効果を感じやすいです。
手順① EWWW Image Optimizerを使ってWebP化（今後の画像）
まずは、これから作成する記事の画像をWebP化します。
プラグイン「EWWW Image Optimizer」をインストール
WordPress管理画面から
プラグイン → プラグインを追加 →「EWWW Image Optimizer」を検索してインストール・有効化します。
管理画面の左メニューから
設定 → EWWW Image Optimizer を開き、以下を確認します。
初めて使う場合、選択する画面が表示されるので、以下にチェックをいれます。
✅サイトを高速化にチェック
✅今は無料モードのままにするにチェック
次をクリック
✅メタデータを削除にチェックを入れる（推奨）
✅WebP変換にチェックを入れる
幅と高さの上限を設定する
画像の自動リサイズ設定です。画像サイズに迷う場合は、幅・高さともに「1920px」がおすすめです。設定画面のスクリーンショットでも文字が読みやすく、初心者の方でも扱いやすいサイズです。
また、幅・高さを「0」に設定すると無効化され、アップロードした画像は元のサイズのまま保存されます。画像サイズをCanvaなどで事前に調整している場合は、0にしておくことで意図しないリサイズを防げます。
ご自分のブログにあったサイズで設定してください。
遅延読み込みはチェックしない
（WordPress本体やテーマ設定で高速化設定している場合、被るため）
そのほかの項目は、そのままでOKです。
設定を保存をクリック
最後に完了をクリック
プラグインはいれていたもののWebP化の設定が済んでいない場合の設定方法
私はもともと、EWWW Image Optimizerをいれていたので以下のような画面が表示されました。プラグインはいれていたもののWebP化の設定が済んでいない方は以下のように進みます。
✅メタデータを削除にチェックを入れる（推奨）
✅WebP変換にチェックをいれる
EWWW Image Optimizerのメタデータ削除のところに書いてある、「EXIF・コメント・カラープロファイル」などは、写真管理や印刷用途で使われる情報です。
ブログやWeb表示では不要なため、削除しても画像の表示や色味が崩れることはありません。
WebPはもともと軽量な画像形式ですが、さらにメタデータを削除することで、画像サイズをより小さくでき、表示速度の改善につながります。
※写真データを作品として保存したい場合や、撮影情報を残したい用途では、メタデータ削除は不向きです。ただし、ブログ用画像であれば問題ありません。
JS WebPリライト：チェック不要
picture WebPリライト：チェック不要
「リライトルールを挿入する」をクリック
「変更を保存」をクリック
これで、今後アップロードする画像は自動でWebP化されます。
※「挿入には成功しましたが、セルフテストに失敗しました」と表示されても、緑色のWEBPになっていれば、OKです。
既存記事をWebP化する前に（バックアップ推奨）
既存画像を一括で最適化する前に、万が一に備えてバックアップを取っておくことをおすすめします。
私は、BackWPupを使ってバックアップしています。
バックアップ頻度：毎日（午前０時に更新されているようです。）
これにより、WebP化がうまくいかなかった場合も元に戻せます
※特に画像枚数が多いサイトでは、事前バックアップは必須です。
私は最初、念のためバックアップとしてエックスサーバーからブログのデータをすべてダウンロードしました。
ところがデータが大きすぎて1回ではできず、いくつものフォルダに分けることになり、思った以上に大変でした。
エックスサーバーには自動バックアップ機能があるため、通常の運用であれば手動でデータをすべてダウンロードする必要はありません。
私の場合は「念のため」と思いフルバックアップを行いましたが、結果的にかなり大変な作業になってしまいました。
エックスサーバーでは、自動で毎日1回バックアップが行われ、最大14日分のデータが保存されます。
エックスサーバーなどのレンタルサーバーの自動バックアップはとても便利ですが、WebP化前にBackWPupでバックアップを取っておくことで、「失敗してもすぐ戻せる」という安心感を持って作業できます。
手順② WordPressで既存記事をWebP一括変換
次に、過去記事の画像をWebP化します。
圧縮もおこなう場合、画質は多少落ちますが、画像を軽くすることができます。WebP化のみにチェックをいれることで、圧縮はおこなわずWebP化のみをすることもできます。
私は、少しでも軽くして表示速度を上げたかったので、圧縮もおこなうことにしました。
管理画面左メニューから
メディア → 一括最適化 を開きます。
画像をスキャン
「最適化されていない画像をスキャンする」をクリック
「○点の画像を最適化」をクリック
WebP化されない場合の対処
メディアライブラリを確認したところ、WebP化されていない画像がありました。
変更を保存をクリックし忘れたかもしれません。
その場合は、
EWWW Image Optimizerの設定を再確認
すでに圧縮は完了しているため
「WebP化のみ」にチェック
再度
「最適化されていない画像をスキャンする」をクリック
「○点の画像を最適化」をクリック
※画像点数が多く表示される理由
私の場合、3889点と表示されました。
これは、
サムネイル画像
WordPressが自動生成する複数サイズの画像
も含まれているためです。
異常ではないので、そのまま進めて問題ありません。
完了後の確認
処理が完了したら、メディアライブラリを開いて確認します。
管理画面左メニューから
メディア → ライブラリ
上から１つずつ表示されるように、左上のところで表示方法を切り替えると、右の方にWebPと表示されているのがわかります。
WebP画像が生成されていれば成功です。
表示や不具合がないかもチェックします。
無事、既存記事もWebP化できました。
問題がなければ、ブログ記事の表示速度を確認できる、Google PageSpeed Insightsで再チェックするのがおすすめです。
まとめ
EWWW Image Optimizerで
→ 今後アップロードする画像をWebP化
WordPress「メディア → 一括最適化」で
→ 既存記事の画像をWebP一括変換
一括最適化前には
→ バックアップを取っておくと安心
WebP化は少し手順が多く感じますが、一度設定すればあとは自動です。
表示速度改善を目指している方は、ぜひ試してみてください。
