特定のWordPressページでEWWW Image OptimizerのWebP・Lazy Loadを無効化する方法

Posted on by

WordPressで人気の画像最適化プラグイン EWWW Image Optimizer。
画像のWebP変換やLazy Load（遅延読み込み）機能でサイトの表示速度を改善できる便利なツールですが、場合によっては「このページだけは無効化したい」というケースがあります。

例えば

  • LP（ランディングページ）で画像が正しく表示されない
  • JavaScript処理との相性でレイアウト崩れが発生する
  • スライダーやギャラリー機能が動かない

そんなときは、ページ単位でEWWWの機能をオフにすることが可能です。
この記事では、その具体的な方法を解説します。

なぜエラーのように見えるのか？

EWWWのLazy Load機能を有効化すると、通常の画像タグが次のように書き換えられます。

<img src="data:image/png;base64,iVBOR..." 
     alt="サンプル画像"
     data-src="sample.jpg"
     class="lazyload"
     data-eio-rwidth="1920"
     data-eio-rheight="1080">
<noscript><img src="sample.jpg" alt="サンプル画像"></noscript>

src が透明PNGのプレースホルダーになり、実際の画像は data-src に格納されます。
通常はJavaScript（lazysizes.min.js）が動作して本来の画像に置き換わりますが、
JSが動かない環境や特定の処理と干渉する場合、
プレースホルダーのまま残ってしまい「画像が表示されない」状態に見えるのです。

方法1：特定ページでWebP変換を停止する

EWWWにはフィルターフック ewww_image_optimizer_skip_webp_rewrite が用意されています。
これを使えばページ単位でWebP書き換えをスキップできます。

// functions.php
add_filter('ewww_image_optimizer_skip_webp_rewrite', function ($skip, $img_url) {
    if (is_page('sample-page')) { // ← 対象ページのスラッグに変更
        return true; // WebP変換をスキップ
    }
    return $skip;
}, 10, 2);

方法2：Lazy Loadスクリプトを読み込まない

EWWWは lazysizes.min.js を読み込んで画像タグを書き換えます。
対象ページだけこれを無効化することで、通常の <img> 出力に戻せます。

// functions.php
add_action('wp_enqueue_scripts', function () {
    if (is_page('sample-page')) {
        wp_dequeue_script('lazysizes');       // ハンドル名は環境により異なる
        wp_dequeue_script('eio-lazy-load');   // EWWW独自のケースもあり
    }
}, 100);

ハンドル名の確認方法
Query Monitor プラグインや view-source で <script> タグを確認し、
実際に使われているハンドルを調べてください。

方法3：画像単位でLazy Loadを除外する

一部の画像だけLazy Loadを止めたい場合は、skip-lazy クラスや data-skip-lazy 属性を追加します。

<img src="/path/to/image.jpg" alt="通常読み込み" class="skip-lazy">

これでその画像はプレースホルダー化されません。

方法4：CDN（Easy IO）利用時はパス単位で除外

EWWWの有料CDN「Easy IO（ExactDN）」を利用している場合は、wp-config.php に定義を追加することで特定のパスをCDN変換から除外できます。

// wp-config.php
define('EXACTDN_EXCLUDE', [
  'themes/your-theme/landing/', // このパス配下は変換しない
]);

まとめ

  • WebP変換を止めたい → 方法1（フィルター）
  • Lazy Loadを止めたい → 方法2（スクリプト解除） or 方法3（属性追加）
  • CDN変換を止めたい → 方法4（wp-config設定）

これらを組み合わせれば、問題が出ている特定ページだけEWWWの影響を外すことができます。
サイト全体の高速化メリットは残しつつ、重要なページの表示崩れも防げますので、ぜひ活用してみてください。