【Youtube高速化】Google PageSpeed Insightsのスコアを上げる方法

WPノウハウ

2021.02.09

Youtubeを画像表示にしてクリックしたら読み込みで解決
1. クリックするとYoutube動画が表示
2. a3 Lazy Loadだと不具合が起きやすい
Youtubeを画像に置き換え、クリックしたら再生する方法

Youtubeを画像表示にしてクリックしたら読み込みで解決

YoutubeはかなりGoogle PageSpeed Insightsのスコアを低下させます。

ひどければ、スコア20程度の下げることでしょう。

逆に言えば今回ご紹介する方法でスコアが20程度上がることも可能です。

それはYoutubeを画像表示にしておく方法です。

サイトの読み込み時点で画像として認識させておけばかなり重い動画もストレスフリーで読み込まれます。

クリックするとYoutube動画が表示

最初は画像ですが、クリックすることでYoutubeが表示されるようになります。

全員が全員Youtubeを見るわけではないので見たい人だけクリックしてくれたらOKな仕様になります。

ここはユーザビリティとの相談ですが、Google PageSpeed Insightsのスコアを上げるほうが良いかなとは思います。

SEO的に見ても、読み込み速度が上がることからもユーザにとってもかなり良い効果です。

a3 Lazy Loadだと不具合が起きやすい

Youtubeの遅延読み込みだとa3 Lazy Loadのプラグインが有名ですよね。

確かに良いプラグインなのですが、キャッシュ系プラグインとの兼ね合いもあって不具合を起こしやすいです。

実体験ですが、ページの読み込み自体は早くなりますがスコアアップしないこともしばしばありました。

今回ご紹介する方法だと特にJavascriptなどの不整合も起きにくいですよ。

Youtubeを画像に置き換え、クリックしたら再生する方法

まずはYoutubeの設置

<div class="youtube">
  <iframe data-src="https://www.youtube.com/embed/DD4QtkZWkYw?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

まずはyoutubeを投稿ページに設置して下さい。

黄色の線で書かれた部分にご自身の埋め込みたいyoutubeを差し替えればOKです。

youtubeクラスの中に、iframeが入っている状態なのでサイズ感を柔軟に変えることもできます。

最初の状態ではサンプル画像のように画像のままです。

Javascriptの埋め込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  $('.youtube').each(function() {
    var iframe = $(this).children('iframe');
    var url = iframe.attr('data-src');
    var id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    iframe.before('<img src="https://img.youtube.com/vi/'+id+'/mqdefault.jpg" />').remove();
    $(this).on('click', function() {
      $(this).after('<div class="youtube"><iframe src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>').remove();
    });
  });
});
</script>

画像をクリックして動画を表示の部分はJavascriptで制御しています。

黄色の線の部分はjqueryの部分なのでご自身の環境に合わせて挿入しなくてもOKです。

CSSで中央揃え、サイズ変更

.youtube {
	text-align:center;
}

.youtube iframe{
	text-align:center;
	height:300px !important;
	width:600px !important;
}

.youtube img {
text-align:center;
	height:300px !important;
	width:600px !important;
}

CSSでyoutubeを中央揃えにして、サイズも変更しています。

若干雑な記述なのでスマホやパソコンに合わせて適宜修正して下さい。

私の環境ではこれでスマホとパソコンでキレイに表示されました。

これを実装していくと初回は下記の画像ですが…