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変換にチェックを入れる
幅と高さの上限を設定する
遅延読み込みはチェックしない
（WordPress本体やテーマ設定で高速化設定している場合、被るため）
そのほかの項目は、そのままでOKです。
設定を保存をクリック
最後に完了をクリック
プラグインはいれていたもののWebP化の設定が済んでいない場合の設定方法
私はもともと、EWWW Image Optimizerをいれていたので以下のような画面が表示されました。プラグインはいれていたもののWebP化の設定が済んでいない方は以下のように進みます。
✅メタデータを削除にチェックを入れる（推奨）
✅WebP変換にチェックをいれる
JS WebPリライト：チェック不要
picture WebPリライト：チェック不要
「リライトルールを挿入する」をクリック
「変更を保存」をクリック
これで、今後アップロードする画像は自動でWebP化されます。
※「挿入には成功しましたが、セルフテストに失敗しました」と表示されても、緑色のWEBPになっていれば、OKです。
既存記事をWebP化する前に（バックアップ推奨）
既存画像を一括で最適化する前に、万が一に備えてバックアップを取っておくことをおすすめします。
私は、BackWPupを使ってバックアップしています。
バックアップ頻度：毎日（午前０時に更新されているようです。）
これにより、WebP化がうまくいかなかった場合も元に戻せます
※特に画像枚数が多いサイトでは、事前バックアップは必須です。
手順② WordPressで既存記事をWebP一括変換
次に、過去記事の画像をWebP化します。
管理画面左メニューから
メディア → 一括最適化 を開きます。
画像をスキャン
「最適化されていない画像をスキャンする」をクリック
「○点の画像を最適化」をクリック
WebP化されない場合の対処
メディアライブラリを確認したところ、WebP化されていない画像がありました。
変更を保存をクリックし忘れたかもしれません。
その場合は、
EWWW Image Optimizerの設定を再確認
すでに圧縮は完了しているため
「WebP化のみ」にチェック
再度
「最適化されていない画像をスキャンする」をクリック
「○点の画像を最適化」をクリック
※画像点数が多く表示される理由
私の場合、3889点と表示されました。
これは、
サムネイル画像
WordPressが自動生成する複数サイズの画像
も含まれているためです。
異常ではないので、そのまま進めて問題ありません。
完了後の確認
処理が完了したら、メディアライブラリを開いて確認します。
管理画面左メニューから
メディア → ライブラリ
上から１つずつ表示されるように、左上のところで表示方法を切り替えると、右の方にWebPと表示されているのがわかります。
WebP画像が生成されていれば成功です。
表示や不具合がないかもチェックします。
無事、既存記事もWebP化できました。
問題がなければ、ブログ記事の表示速度を確認できる、Google PageSpeed Insightsで再チェックするのがおすすめです。
まとめ
EWWW Image Optimizerで
→ 今後アップロードする画像をWebP化
WordPress「メディア → 一括最適化」で
→ 既存記事の画像をWebP一括変換
一括最適化前には
→ バックアップを取っておくと安心
WebP化は少し手順が多く感じますが、一度設定すればあとは自動です。
表示速度改善を目指している方は、ぜひ試してみてください。
