YouTube動画の表示速度を改善するWordPressプラグイン「WP YouTube Lyte」

WordPressにYouTube動画を貼り付けた際、「ページの表示が遅くなった」と感じたことはありませんか？

「WP YouTube Lyte」は、YouTube動画を埋め込んでもページの表示速度に影響を与えにくくするWordPressプラグインです。

本稿では、WP YouTube Lyteの特徴や設定方法、使い方を徹底的に解説します。

WP YouTube Lyteとは？

WordPressバージョン5.7.1以降、iframeに「loading="lazy"」が自動追記されます（widthとheightが指定されていることが条件）。よって、YouTube動画挿入によってWordPressサイトが重たくなるといった声はほとんど聞かれなくなりました。

そのため、当該プラグインを入れることで劇的に改善するかというと、一部事例でのみ機能するものではないかと思います。

WP YouTube Lyteの機能概要：

• レスポンシブサイズで埋め込み
• YouTubeリンク（iframe）を自動軽量化
• 再生するまで読み込まない
• サムネイルをサーバーにキャッシュ

ただし、複数のYouTube動画を同じページに埋め込んでいると重たくなることはあります。WP YouTube Lyteの遅延読込のタイミングは、ページスクロール時ではなく、ユーザーが再生ボタンを押したときに読み込む様式なため、一定の効果が体感できます。

YouTube動画を入れているページだけ重くなっている人だけ、プラグイン導入を検討してみてください。

WP YouTube Lyte

主な特徴

• 軽量化されたLyte形式：YouTubeリンクやiframe（ウェブページに外部コンテンツを埋め込むための技術）を自動で軽量化し、ページの負荷を軽減します。
• 遅延読み込み：ページ読み込み時ではなく、ユーザーが再生ボタンを押した際にYouTubeプレーヤーを表示します。
• レスポンシブ対応：スマートフォンやPCなど、さまざまな画面サイズに合わせて動画が調整されます。
• YouTube API対応：タイトル、再生時間などの動画情報をAPIを通じて取得可能です。

メリット

• ページ表示速度の向上：遅延読み込み機能により、動画がページの読み込み速度に与える影響を最小限に抑えます。
• 負荷の軽減：動画が再生されるまでプレーヤーを読み込まないため、ブラウザや端末への負担を軽減します。
• ユーザーフレンドリーな設計：レスポンシブ対応により、デバイスに応じた最適な動画表示を実現します。
• GDPRへの対応：再生しない限りYouTube側へユーザー情報が送信されない仕組みは、欧州のGDPR（一般データ保護規則）への準拠をサポートします。
• APIの柔軟性：必要に応じてYouTube APIを使用し、動画情報を詳細にカスタマイズできます。

デメリット

• 操作性の課題（モバイル端末）：モバイルでは、動画再生に2回タップが必要になる場合があります。
• デザインの制約：幅200ピクセル以下のコンテンツエリアでは、動画表示が崩れる可能性があります。
• API設定の手間：YouTube APIを使用する場合、APIキーの取得や設定が必要です。
• ブラウザの互換性：Internet Explorer 11には対応していません。（※IE11は2022年6月に公式サポートが終了）

WP YouTube Lyteの使い方と設定

WP YouTube Lyteは使い方がとても簡単です。設定がよくわからない場合でも、プラグインをインストールし、動画のURLを一部変更し貼り付けるだけで利用できます。

以下、より詳細な設定や使い方を解説します。

プラグインのインストール

WP YouTube Lyteのプラグインをインストールするには、WordPressにログインします。

1. 外観 > プラグイン > 新規プラグインを追加を押す。
2. プラグインの検索窓に「WP YouTube Lyte」と入力。
3. 「今すぐインストール」を押す。

YouTube APIキーの入力（任意）

YouTube APIを利用すると、動画のタイトルや再生時間などの情報を取得できます。設定は必須ではありませんが、必要な場合のみ以下の手順で行います。

1. 「設定」の上にカーソルを合わせるか、文字を押すとメニューが表示。
2. 「WP YouTube Lyte」を押す。

「サイトを新しいアプリケーションとして登録して」と記載されているリンクを押と、Google Cloudにアクセスします。

> Google Cloud

Googleアカウントでログインし、以下の手順で進めます。

1. 利用規約にチェック。
2. 「同意して続行」を押す。

上部の「プロジェクトを作成」を押す。

1. プロジェクト名を変更（任意）。
2. 「編集」を押すとプロジェクトIDも文字列も編集可能（任意）。
3. 「作成」を押す。

1. 検索窓に「youtube」と入力。
2. 「YouTube Data API v3」を選択。

「有効にする」を押す。

「認証情報の作成」を押す。

1. 「一般公開データ」にチェックを入れる。
2. 「次へ」を押す。

1. APIキーをコピー。
2. 「完了」を押す。

WP YouTube Lyteの設定画面に戻りキーを貼り付けし、「Test Key」を押す。

APIキーをテストして問題がなければ、YouTube動画の情報を取得して表示できます。

初期設定

同様に設定画面から以下のようなYouTube動画の設定ができます。

• プレーヤーのサイズ：420×236（16:9）〜960×720（4:3）までの各サイズ
• 埋め込み動画の下にYouTubeのリンクを追加：リンクのあり・なし
• プレーヤーの位置：左、中央、右

• 強制的なHD再生：強制的に高画質（HD: High Definition）で動画を再生。
• マイクロデータの追加：動画のタイトル、再生時間などの表示。
• 通常のYouTubeリンクやiframの記述も変換するか：「いいえ」の場合は従来の貼り付け方法。
• サムネイルをサーバーにキャッシュ：「はい」にすると表示速度は向上するが、動画運営者がサムネイルを変更した場合にすぐに反映されない。

WP YouTube Lyteのキャッシュを空にする

URLの変換と貼り付け

記事内にYouTube動画を埋め込む際、URLの「https」の「s」を「v」または「a」に変更します。

• 動画埋め込み：httpv://www.youtube.com/watch?v=（動画のID）
• 動画埋め込み（短縮URL）：httpv://youtu.be/（動画のID）
• 音声のみ：httpa://www.youtube.com/watch?v=（動画のID）
• 再生リスト：httpv://www.youtube.com/playlist?list=（再生リストのID）
• 一回り小さい動画：httpv://www.youtube.com/watch?v=（動画のID）#stepSize=-1
• 20秒から開始し、タイトル非表示：httpv://www.youtube.com/watch?v=（動画のID）?start=10&showinfo=0

URLの変換後、記事内に貼り付けるだけで動画が表示されます。

音声のみの「httpa」形式では、再生時にバーの部分に動画の一部が表示されます。デザイン重視の場合、他の方法も検討してください。

ウィジェットでの設定

WP YouTube Lyteはウィジェットにも対応しています。WordPressのウィジェットとは、サイドバーやフッターなどに様々なパーツを設置できる便利な機能です。

サイドバーなどに動画を表示する手順は以下の通りです。

1. 外観 > ウィジェット
2. 「WP YouTube Lyte」を押し、設置したいウィジェットを選択
3. 「WP YouTube Lyte」をドラッグ＆ドロップして指定のウィジェットに設置も可能

WP YouTube Lyteのウィジェットの設定画面です。

• タイトル：ウィジェットのタイトル
• サイズ：200×200〜1066×600
• 種類：動画または音声
• YouTube URL：ウィジェットの場合は、そのまま動画のURLを入力（URLの「s」を「v」に変換不要）。
• テキスト：動画の下に表示できるテキスト

記事内と同様に、サイドバーでも動画プレーヤーが表示され、再生することができます。

まとめ

今回ご紹介したWordPressプラグイン「WP YouTube Lyte」の機能をまとめるとこうなります。

• レスポンシブサイズで埋め込み
• YouTubeリンク（iframe）を自動軽量化
• 再生するまで読み込まない
• サムネイルをサーバーにキャッシュ

「WP YouTube Lyte」は、WordPressでYouTube動画をよく埋め込むという方にはおすすめのプラグインですたまにしか挿入しない人は以下の記事と天秤にかけて、導入するか検討すると良いでしょう。

「WP YouTube Lyte」は基本的な設定からある程度高度なカスタマイズまで対応しています。動画埋め込み時のパフォーマンス改善に役立つため、ぜひ活用してみてください。