埋め込んだYouTubeの読み込みを遅延させる

YouTubeの埋め込みはコードをコピー＆ペーストするだけなので超お手軽にできますが、ページの読み込みスピードを損ねる原因になります。
PageSpeedテストでの結果も、埋め込みのありと無しはモバイル版だと20点近くも差がありました。
別サーバー上とはいえ、動画を読み込んでいるのだからそれはそうですよね…
SEO対策の面からも、この問題はクリアしておきたいところです。
簡単なコードで操作性やデザインに影響なく読み込みの遅延ができるのでやってみましょう！

HTML

<iframe class="youtube" data-src="https://www.youtube.com/embed/～" ～></iframe>

Javascript

<script>
  function youtube_defer() {
    var iframes = document.querySelectorAll('.youtube');
    iframes.forEach(function(iframe){
      if(iframe.getAttribute('data-src')) {
        iframe.setAttribute('src',iframe.getAttribute('data-src'));
      }
    });
  }
  window.addEventListener('load', youtube_defer);
</script>

① srcの代わりにHTML5の独自データ属性のdata-srcを使うことで、HTMLのレンダリング中に動画の読み込みがスキップ

② window.addEventListener('load', ～ によってWebページ上の画像もすべて含まれるリソースが読み込まれた後でsrcにURLがセットされて読み込み

といった仕組みになっています。

Web上のソースを見て<iframe class="youtube" data-src="https://www.youtube.com/embed/～" src="https://www.youtube.com/embed/～"></iframe>といった具合になっていれば無事に実行されています。