YouTube埋め込み時パラメータ追記で最適化とプラグイン
YouTube動画を記事に埋め込むと、ページの見栄えが良くなり、読者の理解も深まります。
しかし、標準のYouTube埋め込みは ページ速度が大きく低下する原因 になります。
特にIT初心者向けの解説サイトでは、ページ速度が遅いと読者が離脱しやすく、Adsense評価にも悪影響が出ます。
この記事では、YouTube埋め込み時パラメータを追記することで回遊率向上を図る方法と、初心者でも使えるYouTubeプラグインをわかりやすく解説します。
この記事では、下記の悩みを解決します。
・YouTube埋め込みでページが重くなる？
・Cocoonで高速化する方法がわからない
・WP YouTube Lyteで高速化対応するための設定。
を分かりやすく解説します。
初心者の方でも、この記事を参考にサイト作成進める手助けになれば幸いです。
また、私自身、YouTubeを貼りつける際、著作権に抵触しなく且つ高速化はする等をバランスよく保つため悩んでいました。
初心者の方や、まだ本プラグインを活用されていない方（あくまで情報共有目的で矯正するものではありません。）の参考に、私が導入した際の注意や設定方法を記載します。
また、そのときに困ったことなども交えて解説します。
ご参考に一読していただければ幸いです。
YouTube埋め込みが重くなる原因（初心者向けのやさしい説明）
以下の原因でYouTube埋め込みでサイトスピードが遅くなる事がわかり、私はプラグインを導入しました。
YouTube動画を埋め込むと、以下のような大量のデータが読み込まれます。
- YouTubeプレイヤーは平均で300〜500KBのJavaScriptを読み込みます。
- サムネイル画像（YouTube動画本体の読み込み前の静止画像）
- トラッキングコード(*)
- 関連動画のデータ
(*)：ユーザーのWebサイト上での行動や、動画の再生状況（再生、一時停止、完了など）を追跡・計測するためのプログラムです。
これらは YouTube動画再生前に読み込まれるため、速度が大幅に低下します。
特にスマホでは、YouTube埋め込みが原因で
- LCP（最大コンテンツ表示時間）が2〜3秒悪化
- CLS（レイアウトのズレ）が発生
- ページが重くなる
などの問題が起きます。
私は、基本的にプラグインは多く導入すると競合や重複でトラブル原因となる為、できる事ならインストールしないで回避できる手段を模索していました。
しかしYouTube埋め込みを行うと上記の問題が発生します。
そこで私の場合、バランスを考慮し「WP YouTube Lyte」プラグインを導入しました。
しかしプラグインを導入する場合は、下記のように考え導入すると良いと思います。
今後ブログ運営される方などプラグインを導入する場合「便利そうだからインストール」するのでなく「Cocoon（例）テーマ等で標準搭載されている」のでインストールしないと考えましょう。
YouTube高速化の基本は
YouTube高速化の最も重要なポイントは 遅延読み込み（lazy-load） です。
lazy-load（遅延読み込み）とは？
動画を「ページ表示後に読み込む」仕組みのこと。
ページ表示時に動画を読み込まないため、ページ速度が大幅に改善します。
ただし、他のキャッシュ系プラグインやCocoonの高速化・レンタルサーバーの高速化等の設定との互換性を確認し安全に進められました。（これは個々の環境で相違がありますのでご自身でご判断ください。）
Cocoon⇒高速化の「Lazy」の設定を有効化していました。その場合は、YouTube埋め込みのiframeに追加しない方が安全でした。
YouTubeを高速化する設定方法（Cocoonの高速化）
ここでは私が「WP YouTube Lyteプラグイン」を使った場合の「Cocoon⇒高速化」設定を下図に紹介します。下図のように赤枠に✓を入れ最後に「変更を保存」をクリックしました。
なぜ必要か
私の場合、プラグイン（WP YouTube Lyte）をインストールしました。Cocoonテーマを使用している為プラグインの設定はせずCocoon側だけの設定にしました。
両方設定すると、キャッシュが競合しトラブルの原因になる為です。
得られる効果
高速化に必要な機能を安全に利用する事が出来る。また上記に伴うトラブルリスクに対応するストレス等がない。
YouTube埋め込みの基本パラメータ
ここでは私がYouTube動画を記事に埋め込んだ時、YouTubeの再生開始や終了時に他のチャンネルを表示させない設定を調べました。
結果、実際のYouTubeの埋め込み時のURL末尾に記入することで解決できましたので下記に記載します。
例）：「https://youtu.be/****si=***dkNhdHA?start=2」
上記太字がパラメータです。
代表的なパラメータ及び効果を下記に記載します。使い方：”src=”URL末尾””に記載します。（下図”YouTubeパラメータ記載”を参照ください。）
例えば、以下のようにパラメータを組み合わせることで、
「関連動画の非表示」「開始位置の指定」「自動ミュート再生」を同時に実現できます。 https://www.youtube.com/embed/xxxx?rel=0&start=30&mute=1
この設定により、動画終了後に他チャンネルの動画が表示されず、
読者が記事から離脱しにくくなるため、回遊率が向上します。
コードの記述ミスをすると動画が正しく再生されませんので注意してください。
上記のコードをつなげる場合：例）?rel=0&?start=2
上記の例を解説すると「YouTube終了時に同じチャンネルを非表示にし、動画開始を2秒後から開始する」制御コードです。
YouTubeのパラメータ（カスタムHTMLの場合）
便利なTouYube動画埋め込み時のパラメータを紹介します。
私も動画を埋め込むときに関連動画や開始時間など設定できないか困っていました。
解決：下記パラメータをURL末尾に記述することで解決しました。
記述場所：”src=”URL末尾””
パラメータ：?rel=0→動画終了時に同じチャンネルの動画のみ表示する。
?start=60→60秒後より動画が開始される。
?contrors=0→ボリューム調整や一時停止等非表示となる。
上記パラメータをつなげる場合は「&」でつなぐ。例）「?start=60&?rel=0」
複数動画を埋め込む場合の注意点
YouTube動画を複数埋め込むと、ページ速度が急激に低下します。
注意点
ここでは、ページ遅延の原因で注意する代表的な項目を下記に記載します。
- 動画は1記事につき1〜2本まで
- 3本以上は別記事に分ける
- 動画の下に吹き出しで補足説明を入れる
- 動画の前後にブログカードで関連記事を誘導する
初心者向けサイトでは、動画の使いすぎは逆効果です。
安全なYouTubeの貼り方
YouTubeの貼り方の種類
私もYouTubeを埋め込む際にサイトスピードを維持する為、YouTubeの画像にYouTubeのリンクを貼っていました。
YouTubeの画像などにも著作権があると知り、著作権に抵触しない正しい貼り付け方でYouTubeを埋め込みました。
YouTubeのサムネイル画像を直接ダウンロードして記事に貼る行為は、
著作権法上「複製」に該当するため、許可なく行うと違法となる可能性があります。
●安全な方法は以下の3つです。
- ブロックエディターのYouTubeブロックに、URLを貼る。
- カスタムHTMLで埋め込みコピーコードを貼る。
- テキストでYouTubeのリンクを付ける。
上の表（①②）は読み込みに時間がかかる可能性が大きい。著作権はOK。
上の表（③）ビジュアル的に「いまいち」です。著作権はOK。
逆に、サムネイル画像の直リンクやスクショ利用はNGです。
そこでYouTube動画を表示させたいが著作権は侵害したくなく、サイトを見に来てくださる方に”ストレス”を感じさせない方法（サイトスピードを維持した状態）で苦慮した結果、私の場合プラグイン導入をしました。
YouTubeパラメータ制御に関してはこちら。
WP YouTube Lyteプラグインの設定（YouTube動画の高速化）
下図は私が「WP YouTube Lyteプラグイン」を導入し設定した箇所（赤枠のみ）を記載しました。
基本YouTubeを埋め込んでいる記事がある場合は、この設定のみでＯＫです。
WordPressを使っている場合、プラグインは必要？
必ずしも必要ではありませんが（セキュリティ系プラグインは必須です。）、動画の遅延読み込みによるサイト高速化や、複数の動画を一元管理したい場合は導入がおすすめです。有名なプラグインには Smash Balloon YouTube Feed や WP YouTube Lyte があります。（利用する場合は、既存のプラグインやWordPress・PHPバージョン等確認してご利用してください。）
【YouTube高速化チェックリスト】
【YouTube高速化チェックリスト】
□ 動画は1記事につき1〜2本までに抑えているか
□ Lazy-loadが有効になっているか（Cocoon高速化）
□ WP YouTube Lyteのキャッシュが正常に動作しているか(*1)
□ ?rel=0 で関連動画を制御しているか
□ ?start=◯秒 で開始位置を最適化しているか
□ 著作権に抵触しない埋め込み方法を使っているか
(*1)：確認手順①「WP YouTube Lyte のキャッシュを空にする」にチェック⇒「変更を保存」⇒YouTube埋め込みがある記事を開く⇒サムネイルが一瞬遅れて読み込まれる（＝キャッシュ再生成）
これで キャッシュが正常に動作している と判断できます。
まとめ：YouTubeパラメータやプラグイン導入は初心者向けサイトほど効果が大きい
最後まで記事を見ていただきありがとうございました。
YouTube埋め込みは便利ですが、ページ速度を大きく低下させます。
初心者向けサイトでは、以下の方法で最適化が推奨されます。
- lazy-load（遅延読み込み）を使う（Cocoon高速化設定・キャッシュ系プラグイン・レンタルサーバーの高速化設定による）
- 動画は1〜2本まで（1記事中）
- 動画の前後にブログカード
- 動画の下に吹き出しで補足説明
これらを組み合わせることで、
ページ速度・UX・SEO・Adsense評価がすべて向上します。
また、この記事では私自身が初期の段階でYouTubeの正しい設置やパラメータと著作権侵害に当たらないか等試行錯誤した結果を記載してます。
参考いただければと思います。
「Cocoonで必ず設定すべき基本機能まとめ｜初心者向けWordPress設定ガイド」の関連記事を下記リンクしてますのでご覧ください。
【BackWPup】WordPressの自動バックアップ設定ガイド（子記事）
CSSでブログの操作性を向上！戻るボタン・横スクロールの書き方（子記事）
【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ（親記事）
【Yoast】記事を一瞬で複製！Duplicate Postの使い方（子記事）
【UX改善】ブログカード最適化と吹き出しを使った読者獲得術（子記事）
Cocoonのコメント欄を非表示にすべきケースと正しい設定手順（子記事）
【SEO効果】Cocoonパンくずリストの正しい設定メリット（子記事）
【UX向上】内部リンクと外部リンク（画像）の開き方使い分け術（子記事）
【Cocoon】読者が迷わないグローバルメニュー＆サイドバー設計（子記事）
【保存版】WordPressメジャーアップデート安全移行ガイド（子記事）
【WPvivid】サイトのバックアップと移行（移転）の操作ガイド（子記事）
全体の流れを詳しく知りたい方は、まず「【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ」からご覧ください。
