Youtube SpeedLoadのプラグインがConoHa WINGのWAFと相性が悪いのか、テーマ側の問題かでエラーが起きるので別のオススメプラグインは？

「WP YouTube Lyte」がオススメです。Youtube SpeedLoadと異なり、2023年3月時点の情報でも更新されているので信頼可能。詳細はWordPress公式の WP YouTube Lyte をお読みください。 WordPress.org 日本語 WP YouTube Lyte

YouTube遅延読み込み【SWELLなら設定とプラグイン併用】

2023-04-20

約4分

YouTube埋め込みを遅延読み込みで高速化プラグインもあるよ — Image by upklyak on Freepik

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

YouTubeの読み込みを高速化するコード（遅延読み込み）が知りたいです
YouTube埋め込みコードの編集方法も一緒に
SWELLテーマなら動画も遅延読み込みできますか？

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。

あいうえおLIFE

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

ブログを書いていると、YouTubeの読み込みを高速化するコード（遅延読み込み）が気になってきますよね。ぼくもYouTube埋め込みコードの編集をしたらいいかなと思いつつも、具体的な方法が分からず困惑の日々…

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

結論（本記事の内容）

YouTubeの読み込みを高速化するコード（遅延読み込み）
YouTube埋め込みコードの編集方法
SWELLテーマなら動画も遅延読み込み可能

目次以降では詳細な理由や具体例を、画像も用いて解説します（テキストエディター使用を想定）。

ブログにYouTubeを埋め込むデメリット

＜iframe＞という「インラインフレーム」タグを読み込むので、全ての情報を取得するのに容量が大きくなってしまう。

読み込みを高速化するコードの提案として、テキストエディターの最上部にJavaScriptコードを置いておくのがおすすめ。manablogさんの【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】を参考にしました。

あわせて読みたい

【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

YouTube埋め込みコードの編集方法は、「埋め込みコード」を少し改変するだけで完了。遅延読み込みという機能ゆえに「読み込む順番を遅らせる」ので、体感上早くなります。

2022年11月時点の情報で大人気のSWELLテーマは、動画も遅延読み込み可能ワンタッチで作業できるので、遅延読み込みへの悩みは解消されますね（下記画像参照）。

ぼくも実際に「テキストエディター使用中」は最上部にJavaScriptコードをコピペし、「YouTubeの埋め込みコード」を改変して記事内に貼り付け。体感上やページスピードインサイトも早い点数が出たので、効果は実証済みです。（ブロックエディター使用を想定向け施策を先に読む）。

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

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

あいうえおLIFE

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

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

タップできるもくじ

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

下記の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者コード対策が必須】に、サイトスピード改善記事を書いていますので、あわせてどうぞ。

あわせて読みたい

SWELLサイトで画像圧縮するコツやWebP化するプラグイン紹介

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

テキストエディター上で記事の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

体感上ですが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;
}

Youtube SpeedLoadのプラグインがConoHa WINGのWAFと相性が悪いのか、テーマ側の問題かでエラーが起きるので別のオススメプラグインは？: 「WP YouTube Lyte」がオススメです。Youtube SpeedLoadと異なり、2023年3月時点の情報でも更新されているので信頼可能。詳細はWordPress公式のWP YouTube Lyteをお読みください。

WordPress.org 日本語

WP YouTube Lyte