2019.4.5 - CHUBRIDGE様のWEBサイトを公開しました

【WordPress】画像遅延読込もできる!WebP Expressの最適な設定方法

WebP Expressの最適な設定方法WordPress

前回の記事ではPageSpeed Insightsの「次世代フォーマットでの画像の配信」問題をサクッと解決する方法をご紹介しました。

その記事の最後でWebP Expressプラグインの設定方法をご紹介しましたが、当時はまだ検証が足りなかったため最適な設定方法が分からない状態でした。

その後いろいろと検証し、僕にとって恐らく一番最適な設定方法が分かったのでご紹介します。

スポンサーリンク

前回のおさらい:次世代フォーマットでの画像の配信とは

次世代フォーマットでの画像の配信とはページ読み込み速度を計測するGoogleのサービス、PageSpeed Insightsでページを計測すると改善できる項目として表示されるものの一つです。

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

これを改善できるとページ読み込み速度を上げることができるということです。

WebP Expressプラグインを使う

プラグインはWebP Expressを使います。

新規プラグインの検索フォームに「WebP」と入れ、インストールが終わったら有効化してください。

前回のWebP Expressの設定で何がダメだったのか?

前回の設定方法でAlter HTMLの部分のWhat to replaceを以下のようにしました。

前回の設定

この設定方法では確かに画像はWebPに変換されますが、画像遅延読込機能(Lazy loadなど)が機能しなくなるという欠点がありました。

画像遅延読込が機能していない
青い枠線で囲まれた部分が読み込んだファイルの一覧

上の画像を見ると、ページを読み込んだ際に全ての画像ファイルを読み込んでおり、画像遅延読込が機能していないことが分かります。

Cocoonテーマやキャッシュ系プラグインのLiteSpeed Cacheなどをお使いの方は設定されている方が多いと思いますが、画像遅延読込はページ読込速度に顕著に影響を与えるので、できれば回避したい問題でした。

WebP Expressの最適な設定方法

前提条件の確認

前提条件としてCocoonテーマを使い、LiteSpeed Cacheプラグインを有効化してる状態で行います。検証していませんが画像読込遅延機能のあるその他のプラグインをお使いの場合でも有効だと思います。

LiteSpeed Cacheのキャッシュ機能を使う場合はCocoonテーマのキャッシュ機能はオフにします。

ブラウザキャッシュはオフ

LiteSpeed Cacheの画像遅延読込機能も使う場合はCocoonテーマのLazy loadはオフにします。

Lazy loadはオフ
スポンサーリンク

WebP Expressの設定

本題のWebP Expressの設定方法です。以下のようにします。

WebP Expressの最適設定

保存したらLiteSpeed Cacheのキャッシュをパージして確認します。

WebP Expressの効果を確認(スクロール前)
スクロール前の状態 表示範囲内の画像が読み込まれる
WebP Expressの効果を確認(スクロール後)
下にスクロールしていき、表示範囲に入ると画像が読み込まれていく

画像ファイルがWebPであり、画像遅延読込がきちんと行われているのが確認できます。

まとめ

今回はWebP Expressプラグインの最適な設定方法を紹介しました。

Cocoonテーマを使い、LiteSpeed Cacheを有効化している方には一番最適な方法だと思いますので、「次世代フォーマットでの画像配信」問題でお困りの方は是非お試しください。

その他のテーマやプラグインをお使いの場合は設定方法がまた違ってくると思いますが、基本的にはキャッシュ機能は一つに絞ることと、WebP Expressの設定を見直せば問題は解決すると思います。

コメント

  1. しーちゃん より:

    お世話になります。
    Cocoonのテンプレートで運用しておりますが、今回この記事を参考に

    WebP expressを導入してみたところ、アイキャッチなど含め画像がまったく
    表示されませんでした。
    何か他に設定要素があるのでしょうか?

    • YuichiroYuichiro より:

      コメントありがとうございます。

      プラグインの導入に関してはPageSpeed Insightsの「次世代フォーマットでの画像の配信」問題をサクッと解決する方法という記事も合わせて読んでもらえると一連の流れが掴めると思います。

      記事を読んでそのとおりにやってもできないということであれば、設定方法やプラグインが競合している可能性があります。
      設定方法がどのようになっているのか分からないと詳しいアドバイスができませんので、まずはしーちゃんさんの環境を教えて下さい。

      Cocoonテンプレートをお使いということなので、確認したい事項としましては

      ・Cocoon設定の高速化ページの「ブラウザキャッシュ」などの各種設定
      ・他にEWWWなどの画像を圧縮したり変換しているプラグインを有効化しているかどうか
      ・他にLite Speed Cacheなどのキャッシュ系プラグインを有効化しているかどうか

      それらの情報はCocoon設定内の「テーマ情報」タブにすべて記載されてるので、その情報をこちらにコピペしてもらえると簡単だと思います。

タイトルとURLをコピーしました