• 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保守管理サービス

Filed Under: 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.

I agree to these terms.

この記事と関連する記事

WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース
2022年3月9日
タグ: Webサイト高速化, プラグイン
カテゴリー: WordPress
KUSANAGIの技術を取り入れた最新Xserverに移行後のパフォーマンス比較結果
2022年2月25日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress
Xserver 新サーバー移行時は注意。発生したエラーと対応方法
2022年2月17日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

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

タグ

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

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2023 high five create All rights reserved.