WordPressのYouTube読み込みが遅い：高速化する3つの方法

WordPressでYouTubeを埋め込んだ際に、ページの読み込み速度が遅くなってしまうケースがあります。例えば「おすすめの懐メロ30選」などで、YouTubeを30本ほど埋め込むとかなり重いページになってしまうでしょう。

本記事では、WordPressのYouTube読み込みが重い時の対処法を解説します。

各対処法の手順も紹介しているので、ぜひ参考にしてみてください。

WordPressでYouTubeの読み込みが重い理由

WordPress YouTube
YouTube動画をWordPressに埋め込む際は、上画像にある「iframe」をコピーして記事に貼り付けます。手順自体はYouTube動画の「共有」→「埋め込む」→「コードをコピー」するだけなのでかんたんです。

しかし、iframeには「全ての情報を読む込む」という特徴があります。動画は画像と違い情報量が多いため、必然的にページの読み込みが重くなってしまうのです。

特に複数のYouTube動画をWordPressに貼り付けてしまうと、かなり重いページになってしまいます。

読み込み速度が遅いとSEOで不利になる

WordPressのページ読み込み速度が遅くなると、SEOに悪影響を与えてしまいます。

Googleもページ速度がSEOへ影響を及ぼす旨を正式にアナウンスしました。

読み込み速度はこれまでもランキングシグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。そこで2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

参考：Googleウェブマスター向け公式ブログ

Googleは常にユーザーの利便性を追求しています。表示速度が遅いページは、ユーザーにとってストレスの原因になるものです。

サイトAの表示速度：2秒
サイトBの表示速度：5秒

例えば、上記2サイトで同じ内容のページがあった場合、サイトBへ訪れたユーザーはサイトAとよりも離脱率が上がります。たった3秒の差であっても、ユーザーは「遅い」と感じてしまうはずです。

サイトの離脱率を下げてSEOで有利になるためにも、ページの表示速度は重要と言えるでしょう。

WordPress5.7.1以降から遅延読み込みが標準化

幸いなことにWordPressのバージョン5.7.1からYouTube動画の遅延読み込みが標準化されました。

遅延読み込み（Lazy-load）とは、ユーザーのディスプレイに表示された画像や動画の情報のみを取得する仕組みです。

通常、サイトにアクセスすると全ての画像や動画を読み込みます。その結果、画像や動画が多いページほど重くなり、読み込み速度が遅くなるのです。今表示されている必要な分だけ読み込めば、その分表示速度は早くなります。

遅延読み込み（Lazy-load）を利用するには、YouTubeの埋め込みコードをテキストページに貼り付けるだけです。

＜例＞

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/PP9L0N3Sxwk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

遅延読み込みが正常に機能すると「loading=”lazy”」が追記されます。

余計な動画の読み込みが遅延されるため、ページの表示速度が早くなるのです。

現時点では欠点もある

遅延読み込み（Lazy-load）には、以下のデメリットがあります。

埋め込みコードのwidthとheightを指定してないと動作しない
テーマやプラグインが影響して機能しないケースも
ページトップにある動画に対しては機能しない

最も致命的なデメリットは、ページトップの動画や画像は改善されない点です。

WordPressでサイト運営をしている方の中には、ファーストビューにYouTubeを貼りたい方もいるでしょう。この場合、遅延読み込みをすると却ってユーザーに不親切なページになってしまいます。

遅延読み込みが機能するのは、あくまでもファーストビューから離れた画像や動画のみという点を覚えておいてください。

YouTubeの読み込みが重い時の対処法3つ

YouTubeの埋込動画で重くなる時の対処方法は3つあります。

遅延読み込み（Lazy-load）を利用する
動画ではなくサムネイル画像を取得する
WordPressのプラグインで対応する

順に見ていきましょう。

1. 遅延読み込み（Lazy-load）を利用する

1つ目は、冒頭でお伝えした遅延読み込み（Lazy-load）を利用する方法です。

手順は以下の通り。

YouTubeの「共有」をクリック
「埋め込む」をクリック
コードをコピー
WordPressにペースト

WordPressに埋め込みたいYouTubeを選んで「共有」をクリックします。

wordpress-youtube

共有メニューが開くので「埋め込む」を選択しましょう。

wordpress-youtube

右下にある「コピー」をクリックして、iframeのコードを全てコピーしてください。

wordpress-youtube

WordPressの投稿画面を開いたら、コピーしたコードをペーストするだけです。クラシックエディターを利用している方は「テキストモード」に切り替えてから、コードを貼り付けてください。

wordpress-youtube

遅延読み込みが正常に追記されたか確認するには「右クリック」→「ページのソースを表示」をクリックします。

別タブでコードが表示されるので「loading=”lazy”」と検索してみましょう。YouTube動画のiframeタグの中に「loading=”lazy”」が追記されていれば問題ありません。

前述した通り、現時点では欠点があるものの、コードをコピペするだけなのでプログラミング知識がない方でも取り組みやすいです。

大量のYouTubeを貼り付ける記事などを作る際は、遅延読み込みを利用すると良いでしょう。

2. 動画ではなくサムネイル画像を取得する

2つ目は、YouTubeのサムネイル画像を取得する方法です。動画ではなく画像になるため、読み込み速度はかなり速くなります。

手順は以下の通りです。

コードを投稿ページにペースト
YouTube動画のIDをコードに追記

上記2ステップで完了します。

はじめに以下のコードをコピーして投稿画面に貼り付けてください。

<p class="youtubesm">
 <a href="//www.youtube.com/watch?v=こちらにIDを挿入" class="youtube_pn">
<img src="//i.ytimg.com/vi/こちらにIDを挿入/mqdefault.jpg" alt="" width="100%">
 </a>
</p>

次にYouTube動画のIDを「こちらにIDを挿入」にペーストします。

ブラウザバー

※「こちらにIDを挿入」は削除して、YouTubeのIDをペーストしてください。

OK例	<p class="youtubesm"> <a href="//www.youtube.com/watch?v=DnCasc9b_KM" class="youtube_pn"> <img src="//i.ytimg.com/vi/DnCasc9b_KM/mqdefault.jpg" alt="" width="100%"> </a> </p>
NG例	<p class="youtubesm"> <a href="//www.youtube.com/watch?v=こちらにIDを挿入DnCasc9b_KM" class="youtube_pn"> <img src="//i.ytimg.com/vi/こちらにIDを挿入DnCasc9b_KM/mqdefault.jpg" alt="" width="100%"> </a> </p>