【JavaScript】埋め込みYoutubeを遅延ロードさせる方法

2023年8月12日

先日、会社のサイトスピードを上げるためにYoutubeを遅延ロードさせました。
それが思ったより効果があったので、皆さんにもご紹介しようと思います！

埋め込みYoutubeの影響性

対策なしでYoutubeをサイトに貼ってしまうと、

サイトのスピードをものすごく下げてしまいます

どのくらい下がるのか検証してみました。

Youtubeをつけた時のサイトスピード：86
Youtubeなしの時のサイトスピード：96

僕の環境では、10ポイントも差がついています。
Youtubeがスピードを下げていることがわかりますね💦

遅延ロードで対策をしよう

iframeタグを書き換える

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

Youtubeの埋め込み用リンクを書き換えます。

・iframeタグに任意のクラスをつけましょう。（ここでは”youtube”というクラスをつけています）
・srcからdata-srcに書き換えましょう。（src属性にしていると動画を読み込んでしまう為）

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>

このコードをサイトに読み込ませることで遅延ロードする事ができます。

このコードの解説は下記のようになっています。

①　任意のクラス名(ここでは”.youtube”)を取得
②　取得した要素に”data-src”属性があるかチェック
③　”data-src”属性の値を”src”属性にセット
④　全体の読み込み後に実行するよう設定

といった感じで、割と簡単に遅延させる事ができます。

僕はこのやり方で、サイトスピードを86から93まで改善させることが出来ました。

重たい処理を後回しにすることで、サイトの評価も上がってくるので
Youtubeをサイトに貼っている方におすすめしたいです！