YouTube動画を直接埋め込まないでJavaScriptで再生する方法

PageSpeed Insights（ページスピードインサイト）の2018年11月仕様変更によりスコア付が厳しくなりました。その中でも画像の解像度や読込方法、外部ファイルの埋め込み（YouTube動画やSNSプラグインなど）に対して厳しくなりスコアが容赦なく減点されます。特にモバイルではページ内の表示箇所以外でのこういった読み込みによる表示速度の低下は閲覧ユーザーによっては不要な場合もあるので意図はわかります。本来であればブラウザ側で処理してほしいとも思いますが、現状はサイトの作り方・更新方法で対処するしかありません。

弊社は主にホームページ制作を生業としているので、こういったGoogleの動向には対処した制作をしています。今回記事にするのはYouTube動画に関するPageSpeed Insights対策です。YouTube動画をサイトに埋め込む場合、通常はこのようにiframeタグでの埋め込みになります。

この場合、外部ファイル読み込みに対する遅延に加えて、ページ内のDOMのノード数が増加します。要は表示速度のパフォーマンス低下に繋がります。そもそも動画は大概クリックで再生をします。だったらクリックしてから読み込みをすれば良いでしょう。ということでテストで用意したのがこちらです。画像をクリックしてください。動画が再生します。

サイトにYouTubeの動画を埋め込む場合、このように一手間加えることで動画を見ないユーザーへ不要な通信を発生させずに済みます。またPageSpeed Insights対策にもなりますのでご活用ください。

なお、今回のスクリプトはこちらのページを参考に使わせていただきました。ありがとうございます。
jsでyoutube動画をlightbox再生