メニュー

YouTube埋め込みで遅くなる問題を解決【遅延読み込みとプラグイン】

YouTube埋め込みを遅延読み込みで高速化プラグインもあるよ
Image by upklyak on Freepik

テキストエディターでブログを書くのにYouTubeの埋め込みをすると読み込みが遅くなって困る人

Youtubeの読み込みを高速化するコード(遅延読み込み)が知りたいです。

YouTube埋め込みコードの編集方法も一緒に。

SWELLテーマなら動画も遅延読み込みできますか?

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきますね。

ブログを書いていると、YouTubeの読み込みを高速化するコード(遅延読み込み)が気になってきますよね。

ぼくもYouTube埋め込みコードの編集をしたらいいかなと思いつつも、具体的な方法が分からず困惑の日々…

SWELLテーマなら動画も遅延読み込みできるのかなと、テーマ側の性能の良し悪しに原因を向けてみたりもしました。

本記事の結論
  • YouTubeの読み込みを高速化するコード(遅延読み込み)
  • YouTube埋め込みコードの編集方法
  • SWELLテーマなら動画も遅延読み込み可能

本記事では詳細や手順を解説します(テキストエディター使用を想定)。

ブログにYouTubeを埋め込むと、<iframe>という「インラインフレーム」タグを読み込むので、全ての情報を取得するのに容量が大きくなってしまうデメリットがあります。

読み込みを高速化するコードの提案として、テキストエディターの最上部にJavaScriptコードを置いておくのがおすすめ。

manablogさんの【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】を参考にしました。

YouTube埋め込みコードの編集方法は、「埋め込みコード」を少し改変するだけで完了。

遅延読み込みという機能ゆえに「読み込む順番を遅らせる」ので、体感上早くなります。

2022年11月時点の情報で大人気のSWELLテーマは、動画も遅延読み込み可能(ブロックエディター使用を想定向け施策を先に読む)。

高速化機能をテーマに内蔵SWELL
引用:SWELL公式サイト

ワンタッチで作業できるので、遅延読み込みへの悩みは解消されますね。

ぼくも実際に「テキストエディター」の最上部にJavaScriptコードを貼り付け、「YouTubeの埋め込みコード」を少し改変して記事内にコピペを実施。

体感上でも、ページスピードインサイトでも、早い点数が出たので効果は実証済みです。

本記事を読むことで下記の2点が理解可能。

  • YouTubeの読み込みを高速化するコード(遅延読み込み)と埋め込みコードの編集方法
  • テーマ自体に動画などの遅延読み込み機能が実装されたSWELLのメリット
あいうえおLIFE

読者のページ読み込みが早くなると離脱率も改善されるので、SEO評価がアップすること間違いなし!

今日はどうぞ最後まで、お読みくださいね。

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQ・ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月
タップできるもくじ

Youtubeの読み込みを高速化するコード(遅延読み込み)

Youtubeの読み込みを高速化するコード(遅延読み込み)
Background vector created by pikisuperstar - www.freepik.com

下記のJavaScriptコードを記事のテキストエディターの最上部にコピペします。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

DeferというJavaScriptは、YouTubeのiframeを遅延読み込みする機能があります。

「体感速度」やページスピードインサイトの個別測定でも高速化の効果を発揮。

読み込み速度が与えるSEOへの影響

完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる

引用:海外SEO情報ブログ

2022年11月時点の情報で、当サイトはアナリティクスの計測で平均2秒の読み込み。

サイトにはYouTube埋め込みや、画像も多く使っている中で改善を重ね高評価を頂いています。

【完全版】SWELL爆速化【WebP・画像圧縮・第3者コード対策が必須】に、サイトスピード改善記事を書いていますので、あわせてどうぞ。

YouTube埋め込みコードの編集方法

YouTube埋め込みコードの編集方法
People vector created by rawpixel.com - www.freepik.com

テキストエディター上で記事の1番上に「JavaScript」コードを貼りつけた後の、作業内容になります。

手順は下記のとおり。

STEP
YouTube動画の画面の「共有」から「ソースをコピー」

<iframe width="560" height="315" src="https://www.youtube.com/●●●>〜</iframe>のコードをコピー。

【腹筋を鍛える・ダイエット】体幹トレーニング【ストレッチポール】
// 変更前(コピーされたコード)
<iframe width="560" height="315" src="https://www.youtube.com/embed/K1jEz4zgbuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
STEP
src="URL"の部分を空にしてdata-src="URL"と書き換える

<iframe width="560" height="315" src="" data-src="//www.youtube.com/●●●>〜</iframe>と書き換えます。

// 変更後のコード
<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/K1jEz4zgbuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
STEP
YouTube動画を貼りつけたい記事箇所に貼る

テキストエディター上で任意の箇所に編集した埋め込みコードをコピペします。

3つの手順でYouTubeのインラインフレームタグコードを少し編集して、記事内に貼り付け。

追加CSSやプラグインなしで、YouTube埋め込みの遅延読み込みを実現できました。

埋め込みYouTubeを画像として表示するプラグインもおすすめ

テキストエディターでも、ブロックエディターでも活用できるプラグインを紹介します。

Youtube SpeedLoadスクショ
Youtube SpeedLoadスクショ

「Youtube SpeedLoad」は再生ボタンをクリックするまで動画を読み込みませず、サムネイル画像と再生ボタンを表示してくれるプラグイン。

実際に表示されたYouTube

画像で読み込まれたYouTube
画像で読み込まれたYouTube

体感上ですがYouTube埋め込みの部分や、「アドセンス広告」もカクつかずに表示されます。

Youtube SpeedLoad適用すると動画上部に余白できる問題

Youtube SpeedLoadプラグイン適用後は、ぼくの環境下(SWELLテーマ)で埋め込みYouTubeの上部に大きな余白ができてしまいました。

追加CSSを入れて解決。

2つのアスペクト比に対応させる

/*プラグインYouTube SpeedLoad導入でYouTubeサムネイル上に16:9padding-topついてしまうのを0にする*/
.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    padding-top: 0em;
}
/*プラグインYouTube SpeedLoad導入でYouTubeサムネイル上に4:3padding-topついてしまうのを0にする*/
.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0em;
}

SWELLテーマなら動画も遅延読み込み可能

Marketing vector created by stories - www.freepik.com

当サイトも2021年7月〜SWELLで運営していますが、動画遅延読み込みによるSEO対策は、ばっちり。

SWELL設定

SWELLでiframeタグを遅延読み込み
SWELLでiframeタグを遅延読み込み

管理画面のSWELL設定から「遅延読み込み機能・画像等のLazyload」を設定可能。

SWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】に、高速化機能の標準化などにより下記4つのプラグインが不要になった内容を書きました。

  • 目次プラグイン
  • 高速化プラグイン
  • 遅延読み込みプラグイン
  • 人気記事プラグイン

投稿内の画像や動画の他にも、「記事下のコンテンツ・フッター」も遅延読み込み可能。

SWELLで不要になったプラグイン

  • RTOC
  • Autoptimize
  • native lazy load
  • WordPress Popular Posts

プラグインを削減するだけでも、サイトスピード改善に効果はありSEOにも良い影響。

SWELLへテーマ変更して削除したプラグインや、追加したプラグインは【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方に書きました。

まとめ | 埋め込みのひと手間で高速化とユーザーファースト

YouTube埋め込み高速化
埋め込みのひと手間で高速化とユーザーファースト

今日はテキストエディターでブログを書くのにYouTubeの埋め込みをすると読み込みが遅くなって困る人に向けて、下記を解説しました。

  • YouTubeの読み込みを高速化するコード(遅延読み込み)
  • YouTube埋め込みコードの編集方法
  • SWELLテーマなら動画も遅延読み込み可能
あいうえおLIFE

本記事を読むことで「YouTubeの読み込みを高速化するコード(遅延読み込み)と埋め込みコードの編集方法」と「テーマ自体に高速化機能が実装されたSWELLのメリット」が理解できました。

読者のページ読み込みが早くなると離脱率も改善されるので、SEO評価がアップすること間違いなしですね!

ブロックエディター検討で、高速化や記事執筆にお悩みをもつ人には、本記事でも紹介したSWELLはおすすめのテーマ。

プラグインが削減できてテーマ側で高速化施策も解決できて、アップデートも早いSWELLについてはSWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】をあわせてお読みください。

今日は最後までお読みいただき、ありがとうございました!

スポンサーリンク

タップできるもくじ