GoogleアドセンスなどのJavaScriptを使用するコンテンツに加えて、ウェブサイトの表示速度を低下させる大きな要因となっているのがYouTubeの埋め込みプレーヤーです。そこで、YouTube動画のサムネイルをサーバーにキャッシュし、プレーヤーの読み込みを遅延させることでウェブサイトを高速化できるWordPressプラグイン「WP YouTube Lyte」を導入しました。
ウェブサイトの表示速度が重要な理由とは？
ウェブサイトの読み込み速度が遅すぎると、単に表示が重いだけなのか、それとも何らかの障害が発生しているのか分からず、読み込み途中でブラウザバックをしたり、ページの表示を待たずに離脱してしまったりするユーザーも少なくありません。
2017年にGoogleが公表した調査データによると、モバイルサイトの読み込み時間が1秒から3秒になると直帰する確率が32%、1秒から5秒では90%、1秒から6秒では106%、1秒から10秒では123%上昇するとされており、ウェブサイトの読み込み速度はユーザーの離脱率だけでなく、PV数にも影響を与える重要な要素となっています。
また、Googleは2018年に、モバイル検索のランキング要素としてページの読み込み速度を評価するアルゴリズム「スピードアップデート（Speed Update）」を導入しました。これは主に読み込み速度が極端に遅いページを対象としたもので、表示速度だけで検索順位が決まるわけではありませんが、ユーザーの利便性に加えてSEOの面でも、ウェブサイトの高速化が重要であることを示しています。
かつてGoogle検索のトップニュースなどで優遇されていたAMP対応ページについては、2021年にAMPを必須とする条件が廃止されました。AMPへの対応そのものが検索順位を直接引き上げるわけではありませんが、現在もウェブサイトの表示速度やユーザーエクスペリエンスは検索順位を左右する要素の一つとなっています。
ウェブサイトの表示速度が低下する原因
ウェブサイトの読み込み速度が低下する原因として、Googleアドセンス広告やYouTubeの埋め込み動画プレーヤー、Googleマップなどの外部コンテンツが挙げられますが、他にもFacebookやX（旧Twitter）のポスト埋め込みなど、JavaScriptを使用して外部サーバーから情報を読み込む機能が表示速度に影響する場合があります。
WordPressに直接アップロードした写真や動画のファイルサイズが大きい場合も、表示速度が低下する原因となりますが、あらかじめ適切な画像サイズに調整したり、WebP形式に対応させたりしている場合は、画像の最適化によって改善できる余地も小さくなります。
画像については手動で改善できるとして、外部から情報を読み込む埋め込みコンテンツの負荷を軽減することで、AMPに対応していない通常のWordPressサイトでも、PageSpeed Insightsで95点以上の高スコアを記録することができました。
正確にはそれ以外にもさまざまな高速化対策を行っているのですが、95点以上を記録するまでに実施した対策やインストールしたプラグインの中で、YouTube埋め込みプレーヤーのサムネイルをキャッシュし、プレーヤー本体の読み込みを遅延させるために導入したのが「WP YouTube Lyte」です。
YouTube動画を多数掲載しているWordPressサイトでは、埋め込みプレーヤーを読み込むタイミングを変更することで、ページの表示速度や操作時の快適さを改善できる可能性があります。
WP YouTube Lyteのインストール
WordPress（ワードプレス）の管理画面から「プラグイン」＞「新規プラグインを追加」を開いて「WP YouTube Lyte」と検索するか、WP YouTube Lyteのプラグイン公式ウェブサイトからダウンロードしたファイルをWordPressにアップロードしてインストールします。
プラグインの有効化が完了したら、WP YouTube Lyteの設定を行いましょう！
YouTube APIキーの取得
WP YouTube LyteでYouTube動画のタイトルや説明文などの情報を取得し、VideoObjectのマイクロデータを生成するには、YouTube Data APIキーが必要になります。
なお、APIキーを設定しなくてもYouTubeの簡易プレーヤーを表示することはできますが、動画情報を取得する機能などに制限があるため、すべての機能を利用する場合はAPIキーを取得しておきましょう。
Google Cloud Platformで新規プロジェクトを作成し、「APIとサービス」＞「ダッシュボード」を開いて「APIとサービスの有効化」をクリックし、APIライブラリから「YouTube Data API v3」を選択して有効化します。
続いて、左側のメニューから「認証情報」を選択し、「認証情報を作成」＞「APIキー」の順にクリックするとAPIキーを取得できますので、表示されたキーをコピーします。
その後、APIキーの制限を設定できるようになるので、キーの名前を変更したうえで、APIの制限から「キーを制限」を選択し、「YouTube Data API v3」を指定して保存します。
APIキーの不正利用を防ぐためにも、必要なAPIだけに制限しておくことをおすすめします。ただし、アプリケーションの制限については、WP YouTube Lyteがどのような方法でAPIにアクセスするかによって適切な設定が異なるため、制限を加えた後は正常に動作するか確認しておきましょう。
何となく設定を進めていたら取得できたので、詳しい手順については他の方のウェブサイトを参考にした方が分かりやすいかもしれません。
WP YouTube Lyteの設定
YouTube Data APIキーの設定
先ほど取得したYouTube Data APIキーを、WP YouTube Lyteの設定項目にある「YouTube APIキー」の入力欄に貼り付けて「Test Key」をクリックします。
Test Keyをクリックして「API にはおそらく問題はないので、ページ下部から変更を保存できます。」と表示されたら、Google Cloud Platformで取得したAPIキーが正常に認識されているということになります。
ただし、APIキーのテストに成功しても、実際に動画情報を取得できることまで保証されるわけではないため、設定を保存した後はYouTube動画のタイトルなどが正しく表示されているか確認しておきましょう。
プレーヤーのサイズの設定
プレーヤーのサイズはデフォルトで640×360になっていますが、YouTube埋め込みプレーヤーを掲載する記事の幅に合わせて設定することで、レスポンシブ対応のプレーヤーとして表示できます。
当ウェブサイトでは、記事の横幅に合わせてプレーヤーが自動的に調整されるため、パソコンやスマートフォンなど、画面サイズの異なる端末でも見やすく表示されています。
埋め込み動画の下部にリンクを追加
当ウェブサイトでは、もともとYouTube動画プレーヤーの下部にYouTubeへのリンクを追加していたため、「埋め込み動画の下部にリンクを追加」は「追加なし」に設定しました。
プレーヤーの位置
プレーヤーの位置は、記事のレイアウトに合わせて中央に設定するのが無難です。
なお、CLS（Cumulative Layout Shift）はページの読み込み中に発生するレイアウトのずれを示す指標なので、中央に配置するだけで改善するわけではなく、プレーヤーの表示領域があらかじめ確保されていることも重要になります。
強制的な HD 再生
強制的にHD再生を指定すると、通信速度が遅い回線を使用しているユーザーの場合、動画の読み込みが追いつかなくなってしまうこともあるので、既定の「HDにしない」に設定しておきましょう。
YouTubeの動画再生時には、ユーザーの通信環境や端末に応じて画質が自動調整されるため、無理に高画質再生を指定する必要はありません。
マイクロデータの追加
マイクロデータの追加は既定で「はい」になっていますが、これはYouTube動画のタイトルや説明文などを使用して、VideoObjectの構造化データを自動的に追加するための設定項目です。
Google検索に動画の情報を伝えるうえでも役立つ機能なので、WP YouTube LyteでVideoObjectを生成する場合は、そのまま有効にしておくと良いでしょう。
ただし、他のプラグインでもVideoObjectを出力している場合は、同じ動画の構造化データが重複して生成されていないか確認が必要です。
また、YouTube Data APIには利用量に応じたクォータが設定されているため、複数のプラグインから同じ動画情報を取得すると、APIの呼び出し回数が増えてしまう可能性があります。マイクロデータを有効にするだけでAPIの消費量を抑えられるわけではありませんが、動画情報を取得する仕組みを整理しておくことで、不要なAPIリクエストを減らすことにつながります。
通常の YouTube リンクや iframe の記述も変換するか ?
WP YouTube Lyteの機能を通常のYouTubeリンクやiframeによる埋め込みにも適用する場合は、この項目を有効にしておいた方が良いでしょう。
「不要」を選択した場合は通常のYouTube埋め込みプレーヤーが表示されていたため、サムネイルのキャッシュを有効にしていても、対象となる埋め込みコードが変換されなければ、プレーヤーの遅延読み込みによる高速化効果は得られないようです。
通常のYouTube動画URLは2行以内に収まりますが、当ウェブサイトではWordPressテーマを販売しているTCD専用のYouTube動画プレーヤー埋め込み用コードが追加されているため、標準の埋め込みコードとは少し異なっています。
通常のYouTubeリンクやiframeの記述を変換すると、次のようになります。
サーバーにキャッシュしたサムネイルを読み込み、YouTube Data APIから取得した動画情報をVideoObjectのマイクロデータとして追加するため、通常のYouTube埋め込みプレーヤーとは異なるHTMLコードが生成されています。
サムネイルをサーバーにキャッシュ
YouTube動画のサムネイルをサーバーにキャッシュして、読み込み速度を向上させる設定項目です。
既定では「いいえ」になっていますが、この設定を変更するだけでもパフォーマンスがかなり改善されているようなので、「はい」に設定します。
サムネイルをサーバー内にキャッシュしておけば、訪問者がページを開いた際にYouTubeの画像配信サーバーへ直接アクセスする必要がなくなり、外部リクエストを減らせるため、表示速度の改善が期待できます。
なお、YouTube Data APIを利用する場合は、取得した動画情報の保存期間にも注意が必要です。YouTubeのAPI利用規約では、APIから取得したデータを原則として30日以内に削除または更新することが求められているため、サムネイルや動画情報を無期限に保存してよいわけではありません。
WP YouTube Lyteにはサムネイルのキャッシュを更新する仕組みもありますが、使用するプラグインのバージョンによって処理が異なる可能性があるため、API経由で取得したデータが適切に更新されることを確認しておく必要があります。
実際にプラグインを無効化してもPageSpeed Insightsのスコアが低下しなかったことがありましたが、ブラウザやサーバー側のキャッシュ、他の高速化設定なども影響するため、一度サムネイルをキャッシュすれば半永久的に高速化の効果が続くというわけではなさそうです。
これでWP YouTube Lyteの設定は完了です。
WP YouTube Lyte導入後のスコア
標準の埋め込みYouTube動画プレーヤーはこちらになります。
TCDのレスポンシブ対応の埋め込みコードが入っているため、どの端末から閲覧しても記事の横幅いっぱいに表示されています。
WP YouTube Lyteを使用して表示したYouTube動画埋め込みプレーヤーは、以下のようになります。
全く同じ表示にも見えますが、こちらはサーバーにキャッシュしたサムネイルを読み込み、動画の再生操作が行われるまでYouTubeプレーヤー本体の読み込みを遅延させた表示になっています。
チャンネルのアイコンと左下の「見る」というリンクはなくなっていますが、一目でYouTubeの動画プレーヤーであることが分かる状態を維持しながら、通常の埋め込みプレーヤーよりも軽量な表示に変わっています。
動画の再生が開始されるとYouTubeの正規プレーヤーが読み込まれる仕組みなので、再生前のページ表示に必要な通信量や処理負荷を抑えられることが大きな特徴です。
AutoptimizeとFlying Scriptsを同時に設定していた際のスコアは、非AMPのモバイルページとしてはかなり高い99点を記録し、デスクトップに関しては100点を取ることができました。
YouTube動画の埋め込みプレーヤーを掲載しているページで、これほどの高スコアを記録できたのは、WP YouTube Lyteによる遅延読み込みを含めた高速化対策の効果が大きかったと考えられます。
もちろん、PageSpeed Insightsのスコアは測定時の環境や他のプラグインの設定によって変動するため、WP YouTube Lyteを導入するだけで同じスコアになるわけではありませんが、埋め込みYouTube動画の読み込みを高速化する方法としては、かなり便利なプラグインだと感じました。
WP YouTube Lyteを無効化して元のスコアに戻し、適用前後の数値を比較しようと思ったのですが、PageSpeed Insightsの「第三者コードの影響を抑えてください」という項目にYouTubeが表示されなくなっていました。
サムネイルやページ自体のキャッシュが残っていた可能性もありますが、他の高速化プラグインの設定が影響していることも考えられるため、この結果だけでWP YouTube Lyteのキャッシュが継続して使用されているとは断定できません。
YouTubeクリエイターが運営するウェブサイトや、4Kなどの高画質動画を紹介する記事を主なコンテンツとしているWordPressサイトでは、YouTubeの埋め込みプレーヤーが表示速度に与える影響も大きくなりがちです。
WP YouTube Lyteは、動画を紹介するページの見た目や使い勝手を大きく変えることなく、YouTubeの埋め込みコンテンツを軽量化できる便利なプラグインなので、ウェブサイトの表示速度に悩んでいる方は導入を検討してみると良いでしょう。
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。