Web上での動画埋め込みといえばYoutube。
色々なサイトに埋め込まれて利用されてると思います。
ただ、こちら実はGoogleの提供している速度測定ツールよるとページ表示速度の評価を下げるという事実があります。
▼Youtube動画を２つと見出し・画像を埋め込んだページの測定結果。
▼Youtube動画無し、見出し複数と・画像を埋め込んだページの測定結果。
▼Google公式のページ速度評価測定ツール
結果は一目瞭然で、動画を2つ埋め込んだだけでPageSpeedInsightsのスコアは激減します。
そもそも当ブログは読み込み速度をさほど気にせず運営していますし、あくまでページの表示速度の問題なので、どこまでSEOに影響するかは微妙なところではあります。
とはいえ、ページの表示が遅いせいでのユーザーの離脱など、少なからず影響は考えられるので、本来はSEO対策として気にした方がいい部分でしょう。
そこで今回Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説したいと思います。
ページの速度改善に取り組まれてる方のお役に立てれば幸いです。
ではやっていきましょう。
通常時、Youtube動画iframe埋め込み例
まずは通常の埋め込みを掲載しておきます。
こちらはページの表示の際にiframeタグでYoutubeの動画プレーヤーを既に読み込んでいます。
通常はコードは上から順番に読み込まれていくので、動画を読み込むという重い処理があると、そこでページの読み込み速度に悪影響を与えます。
読み込みを遅延させ最後にYoutube動画を読み込む方式
次に、こちらのページ読み込み後の遅延Youtbe読み込み方法をご紹介。
まず、iframeのsrcをdata-srcに変えることで、ページ読み込み時には動画は読み込みません。
<iframe data-src="https://www.youtube.com/embed/EweclzksFxo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
そして全てページを読み込んだ後に
window.addEventListener('load', youtube_defer);
window.addEventListenerにて処理を実行し、iframeにsrcをセットし直して動画を読み込ませています。
これによって動画読み込みを後回しにして、Page Speed Insightの評価が改善されるというわけです。
ただ、結局動画を読み込む処理は入るので、今回検証したところ、評価スコアはそこまで上がりませんでした。
サムネイルのみ表示、クリックでYoutubeを読み込む方法
そこで、もうひとつ紹介する方法はこちら。
先ほどの同様の手法でページ表示の際には動画を読み込まず、Youtubeから取得したサムネイル画像のみ表示させます。
そして、サムネイル画像クリックによってyoutubeの動画プレーヤーを読み込む仕様となっています。
こちらはサムネイルのみしか読み込まないので、確実にPage Speed Insightの評価は上がるかと思います。
デメリットはぱっと見がただの画像に見えることと、再生に２回クリックのアクションが必要なこと。
1回のクリックによる自動再生に対応させることも出来なくはありません。
以下のように、script内のsrc属性の末尾に「autoplay=1&mute=1」をつければ自動再生されます。
src="https://www.youtube.com/embed/'+id+'?autoplay=1&mute=1"
ただし、この場合には音声がミュートされてしまいます。
Chromeなどのモダンブラウザでは、ミュートしなければ動画は自動再生もされないという仕様になっているためです。
ページ読み込み速度を取るか、利便性・簡易性をとるか、、、
というところでしょうか。
Page Speed Insightsで検証してみた
実際にYoutube動画と見出しと画像配置をしたのみのサンプルで読み込み速度評価を検証してみました。
▼通常時、Youtube動画iframe埋め込み例
▼読み込みを遅延させ最後にYoutube動画を読み込む方式
▼サムネイルのみ表示、クリックでYoutubeを読み込む方法
いかがでしょう。
3つ目のサムネイルに置き換える方式がモバイル/PCともに評価がほぼ満点。
1つ目、2つ目に関してはどっこいどっこいでした。
一応、これはサーバーなど他の条件などにもよるので、一概にこの結果が正しいということではありませんのでご了承ください。
まとめ
Youtube動画を埋め込む方法として圧倒的に通常の方法が簡単ではあります。
ただ、今回のスクリプトはページフッターに貼り付けることやCSSの調整さえ事前にしておけば、あとは動画iframeのsrc属性をdata-srcに変換するだけなので、非常に悩ましいですね。
ユーザー視点で考えるならば二回クリックさせるという方法は少し手間かもしれないので、後回しで遅延読み込みさせる方法が適切かもしれません。
サイト全体でどの程度Youtubeを埋め込むことがあるのかも踏まえて考える余地がありそうです。
▼今回のようなJavaScriptも慣れれば読めるようになります。プログラミング言語は言語のひとつなので慣れが必須です。
▼慣れるより実践的なコードを求められる方はコードレシピがおすすめ。豊富な実例集です。
サムネイルだけを表示させる方法ではHTML/CSSを組み合わせてYoutubeプレーヤーに似せることも出来ます。
▼CSSのカスタマイズにはこちらのレシピブック。
一見単純そうに見える処理でも色々な知識や技術が使われているものです。
当サイトではHTML/CSS/JavaScript他色々な事例を挙げて解説していますので、是非これを機に学んでいただければと思います。
最後までお読みいただきありがとうございました！
埋め込みyoutubeが想像以上に戦犯級だった件 | ma-ya's CREATE / WEB DESIGN
