Youtube の動画を複数埋め込みしたページの高速化

Page Speed Insights 対策の一環．他の対策は以下を見てください．

• オフスクリーン画像の遅延読み込み
• 次世代フォーマットでの画像の配信
• ウェブフォント読み込み中の全テキストの表示
• 第三者コードの影響を抑えてください

Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法．

原因は iframe で各動画を読み込みに行くため．

「youtube 複数 埋め込み 高速化」「youtube 複数 埋め込み 軽量化」で検索すると説明してくれているページが多数見つかる．

高速化の方法は二つ

やり方としては大きく二つあって，

• 最初から iframe を使わないように記述し，クリックで iframe にする方法
• ソースはいじらず，一旦，動画(iframe)をサムネイル(img)に変更しておいて，クリックされたときにまた，iframe に戻す方法

参考にしたページは前者の方法だと，
【デモあり】YouTubeの読み込みを軽くする！複数動画埋め込みページを高速化

後者の方法だと
YouTube動画の埋め込みを軽くする

どちらも分かりやすいので，どちらも試してみたところ，当然ながら体感ではどちらも速くなる．

PageSpeed Insights で計測するとパソコンの方で後者が遅くなる．
chrome の開発者ツールの Network で見てみると，後者の方法は iframe の部分が pending となっている．どうやら途中までは読み込んでいるようだ．

つまり，出来るだけ高速を目指すなら，前者の方法で最初から iframe は書き替えておく方がよいようだ．

ただし，それだと既存のサイトに多数の youtube を埋め込んでいる場合に面倒．
よって，出来るだけ変更作業の負担を軽くする方法はないかを考えると，src やめればいいんじゃないかと気が付いた．
しかし，既に気づいていた先人のサイトを見つけた．

埋め込みyoutubeが想像以上に戦犯級だった件
src を data-src に代えていた．これがいい．

これらの良いところを使わせてもらって作ってみた．

できるだけ Youtube に似せる

先ほどのサイトでは fontawesome を使っているので，再生ボタンが明らかにYoutube のそれと違う．

そこで，YouTube動画の埋め込みを軽くするのページで見つけたYouTube ブランドの 使用についてからアイコンをダウンロードしてきて，出来るだけ本物に近づけることにした．

ソース

上記リンクサイトからいろいろ頂いて作っています．
javascript はこんな感じ．
(2020/04/05 スマホ時に横がはみ出る場合に対応．)
(2020/05/12 縦の長さも横幅を縮小した割合で縮小するように修正．)
(2020/05/21 最大化ボタンを有効化．)

chrome では iframe に allow=”autoplay” をつけないと現状では自動再生になりませんでした．

ソースはfastyt.js
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．
普通に左クリックすればソースを見ることが出来ます．

$(function (){
  var srcs = [];
  var images = [];
  var heights = [];
  var widths = [];

  // 全てのiframeタグに対して処理を実行
  $('iframe.fastyt').each(function(index, element) {
    // 属性を配列に格納
    srcs[index] = $(this).attr('data-src');
    heights[index] = $(this).attr('height');
    widths[index] = $(this).attr('width');
    maxWidth = getAncestorWidth($(this));

    // 採り得る最大幅を超えている場合はそこまでにする．
    if (maxWidth < widths[index]) {
      heights[index] = Math.floor(heights[index] * maxWidth / widths[index]);
      widths[index] = Math.floor(maxWidth);
    }

    // URL から動画 id のみを取得して文字連結をしてサムネイルを取得
    var id = srcs[index].match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    images[index] = '//img.youtube.com/vi/' + id + '/mqdefault.jpg';

    // iframeをサムネイル画像に置換
    $(this).after('<div class="yt"><div class="yt_play"><img src="' + images[index] + '" class="movie" width="' + widths[index] + '" height="' + heights[index] + '"></div></div>').remove();
    $('.yt').eq([index]).css("width", widths[index]);
    $('.yt').eq([index]).css("height", heights[index]);
  });
  
  $('.yt_play').each(function(index, element) {
    // サムネイルがクリックされた時の処理
    $(this).click(function (){
      // iframeに置換
      var autoplay;
      if (0 < srcs[index].indexOf("?")) {
        autoplay = '&';
      } else {
        autoplay = '?';
      }
      autoplay += "autoplay=1";

      $(this).replaceWith('<iframe src="' + srcs[index] + autoplay + '" allow="autoplay" frameborder="0" width="' + widths[index] + '" height="' + heights[index] + '"></iframe>');
    });
  });
});
function getAncestorWidth(element) {
  if (element.parent() === undefined) {
    return element.outerWidth(true);
  }
  width = element.parent().outerWidth(true);
  if (width == 0) {
    width = getAncestorWidth(element.parent());
  } else {
    width = element.parent().outerWidth(true);
  }
  return width;
}

CSS はこんな感じ．

ソースはfastyt.css
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．
(2020/05/11 ご指摘を受けて修正．IE で表示が崩れるところがありました．)

@charset "utf-8";

.yt {
  position:relative;
}
.yt_play {
  position: absolute;
}
.yt_play:hover {
  cursor:pointer;
}
.yt_play::before { /* YouTubeアイコン */
  position: absolute;
  background: url(/images/yt_icon_mono_light.png);
  content: "";
  background-size: 100%;
  width: 70px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  opacity: .90;
  transition:.5s;
}
.yt_play:hover::before { /* YouTubeアイコン */
  cursor: pointer;
  background-image:url(/images/yt_icon_rgb.png);
}

再生ボタンのアイコンは youtube からダウンロードしてきた

/images/yt_icon_rgb.png

/images/yt_icon_mono_light.png

を使っています．

javascript と css は自分の環境に合わせて変えて下さい．
あと，jQuery(google) 必須です．

iframe で width と height を入れ，class で fastyt を指定してください．

埋め込み方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/fastyt.js" type="text/javascript"></script>
<link href="/css/fastyt.css" rel="stylesheet" type="text/css">
<iframe class="fastyt" data-src="//www.youtube.com/embed/動画ID" width="300" height="169"></iframe>

埋め込みの一例

埋め込み例(youtube最初の動画)

速度(スピード)測定サイト

GTMetrix
PageSpeed Insights