WordPressの記事ページで、画像は問題ないのになぜかYoutubeの埋め込み動画が表示されない。そんな時はSmushプラグイン（無料有料どちらも）を導入している場合はLazy Loadが原因の可能性があります。
SmushプラグインにはLazy Loadというパフォーマンス向上のための遅延読み込み機能がついていますが、キャッシュ機能と衝突してうまく動作しないことがありました。
この場合はLazy Loadのiframeを除外し、問題なくYoutube動画が表示されるようになりましたので、かなりニッチですがご紹介します。
画像等を遅延読み込みするLazy Load機能
無料プラグインのSmushと、プレミアム版のSmush Proがあります。無料有料どちらもLazy Load機能がついており、以下のように書いてあります。
この機能は、訪問者がスクロールするまでオフスクリーン画像の読み込みを停止します。ページの読み込みが速くなり、帯域幅の使用量が減り、Google PageSpeedテストで推奨されている「オフスクリーン画像の遅延」が修正されます。
SmushプラグインのLazy Load画面より翻訳
画像や動画などのメディアを多く配信しているサイトではLazy Loadを導入するだけで体感でもパフォーマンス向上が感じられます。
とても嬉しいこの機能ですが、キャッシュが影響しているのかYoutube埋め込み動画だけ正しく表示されません。記事ページのプレビューでは問題なく見えているものの、公開をすると見えなくなるという困った状態です。
Youtube埋め込み動画だけLazy Loadを除外
その場合は、Youtube埋め込み動画だけLazy Loadを除外する設定を行います。WordPress管理画面からSmush、Lazy Loadと進むと「Media Types」とどのメディアに対してLazy Loadを有効とするか設定する箇所があります。
基本は全てチェックされているはずですが、この部分でiframeだけチェックを外します。これによりYoutube埋め込み動画使われているiframeタグに対して、Lazy Loadが無効となり、正しく動作しました。
キャッシュの影響に注意
今回は上記の設定をしただけではページに反映されていませんでした。
原因はキャッシュです。キャッシュクリア後に一定の時間が経過してから反映されるようで、すぐに反映されなかったためどこが原因なのか迷いました。利用中のキャッシュプラグインや、サーバー側のキャッシュをクリアし、場合によってはキャッシュが完全にクリアされるまで数秒〜1分程度かかる場合もあります。キャッシュクリア後はシークレットモード等非ログインかつキャッシュが残っていない状態で画面確認をしましょう。
不具合が発生したら問題を切り分けて解決へ
今回はSmushプラグインのLazy Loadが影響しているのがわかりましたが、実際はここに行き着くまでに色々な検証を経ています。
- シークレットモードで再現するか
- ログインと非ログインで挙動は変わるか
- キャッシュをクリアしてどうか
- 影響しそうなプラグインを一旦停止してみてどうか
- テーマファイル側の影響が強そうであれば該当のテーマファイルを部分的に見ていく
影響があるため、本番環境上のサイトでの実施ではなくテスト環境上で検証するのが望ましいです。プラグインを停止すると不具合が発生することもありますし、依存が高いプラグインの場合は最悪サイトが閲覧できなくなるといったリスクもあるためです。
以上、参考になれば幸いです。
コメントを残す