• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / Smushを導入していてYoutube動画が表示されない場合はLazy Loadを疑う

Smushを導入していてYoutube動画が表示されない場合はLazy Loadを疑う

池田祐太郎 | 2021年9月28日 公開 コメントを書く

WordPressの記事ページで、画像は問題ないのになぜかYoutubeの埋め込み動画が表示されない。そんな時はSmushプラグイン(無料有料どちらも)を導入している場合はLazy Loadが原因の可能性があります。

SmushプラグインにはLazy Loadというパフォーマンス向上のための遅延読み込み機能がついていますが、キャッシュ機能と衝突してうまく動作しないことがありました。

この場合はLazy Loadのiframeを除外し、問題なくYoutube動画が表示されるようになりましたので、かなりニッチですがご紹介します。

目次

  • 1 画像等を遅延読み込みするLazy Load機能
  • 2 Youtube埋め込み動画だけLazy Loadを除外
  • 3 キャッシュの影響に注意
  • 4 不具合が発生したら問題を切り分けて解決へ

画像等を遅延読み込みする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だけチェックを外し除外する

基本は全てチェックされているはずですが、この部分でiframeだけチェックを外します。これによりYoutube埋め込み動画使われているiframeタグに対して、Lazy Loadが無効となり、正しく動作しました。

キャッシュの影響に注意

今回は上記の設定をしただけではページに反映されていませんでした。

原因はキャッシュです。キャッシュクリア後に一定の時間が経過してから反映されるようで、すぐに反映されなかったためどこが原因なのか迷いました。利用中のキャッシュプラグインや、サーバー側のキャッシュをクリアし、場合によってはキャッシュが完全にクリアされるまで数秒〜1分程度かかる場合もあります。キャッシュクリア後はシークレットモード等非ログインかつキャッシュが残っていない状態で画面確認をしましょう。

WP Rocketの場合のキャッシュクリアの場所

不具合が発生したら問題を切り分けて解決へ

今回はSmushプラグインのLazy Loadが影響しているのがわかりましたが、実際はここに行き着くまでに色々な検証を経ています。

  • シークレットモードで再現するか
  • ログインと非ログインで挙動は変わるか
  • キャッシュをクリアしてどうか
  • 影響しそうなプラグインを一旦停止してみてどうか
  • テーマファイル側の影響が強そうであれば該当のテーマファイルを部分的に見ていく

影響があるため、本番環境上のサイトでの実施ではなくテスト環境上で検証するのが望ましいです。プラグインを停止すると不具合が発生することもありますし、依存が高いプラグインの場合は最悪サイトが閲覧できなくなるといったリスクもあるためです。

WordPressのテストサイト・検証用環境の作り方

以上、参考になれば幸いです。

メールコンサルティング
WordPress保守管理サービス

カテゴリWordPress 関連タグ:Webサイト高速化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

この記事と関連する記事

遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
2024年7月16日
タグ: Webサイト高速化
カテゴリー: TIPS
WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
2024年7月9日
タグ: Webサイト高速化
カテゴリー: TIPS
WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証
2024年7月3日
タグ: Webサイト高速化
カテゴリー: WordPress

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.