YouTubeのサムネイルをキャッシュするWordPress高速化プラグインWP YouTube Lyte

GoogleアドセンスなどのJavaScriptを使用して表示をするコンテンツに次いで、ウェブサイトの表示を遅くなってしまう要因となっているYouTubeの埋め込みプレーヤーのサムネイルをキャッシュして高速化してしまうプラグインWP YouTube Lyteを導入しました。

ウェブサイトの表示速度が重要な理由とは？

ウェブサイトの読み込み速度が遅すぎると、ただ重いだけのサイトなのか障害が発生しているのか分からずに、読み込み途中でブラウザバックをしたり、読み込みを止めてしまうユーザーが意外と多いそうです。
2018年のGoogleによれば、読み込み時間が1～3秒の場合は32%、1〜5秒の場合は90%、1〜6秒の場合は106%、1〜10秒の場合は123%上昇するというデータを公表しており、読み込み速度はSEOの面でも重要なPV数に影響してしまうのです。

また、Googleは、表示速度の遅いホームページに低い評価を与えるアルゴリズム「スピードアップデート」を2018年に実施して、ユーザーの離脱率に影響するだけではなく、Google検索の検索順位にも影響を与えてしまうようになりました。

読み込み速度が速かったAMPに対応したウェブサイトを優先的に検索ランキングの上位に上げるアルゴリズムは廃止されていますが、依然としてウェブサイトの読み込み速度は検索順位に影響はしているのです。

ウェブサイトの表示速度が低下する原因

ウェブサイトの読み込み速度が低下する主な原因は、Googleアドセンス広告やYouTubeの動画プレーヤー、Googleマップである場合が多いのですが、他にもFacebookやX(旧Twitter)のポスト埋め込みなど、JavaScriptを使用した機能がほとんどを占めています。
Word Pressに直接写真や動画をアップロードした場合は、それも重くなってしまう原因にもなってしまいますが、元々ファイルサイズを小さくしてから表示していたり、WebPに対応をしていた状態であれば、そこから改善される表示速度は微々たるものです。
画像は手動で改善できるとして、主に外部から情報を読み込む埋め込みコンテンツに手を加えれば、AMPに対応をしていなくてもPageSpeed Insightsで95点以上の高スコアを取る事ができるのです。

正確にはそれ以外にも色々とやっているのですが、95点以上を取るまでにやった事とインストールをしたプラグインの中で、埋め込みYouTube動画プレーヤーのサムネイルをキャッシュしてプレーヤーを後読みするプラグインがWP YouTube Lyteです。

WP YouTube Lyteのインストール

WordPress(ワードプレス)のプラグインの追加WP YouTube Lyteと検索するか、WP YouTube Lyteのプラグイン公式ウェブサイトからダウンロードした、ファイルをWordPressにアップロードしてインストールします。
有効化が完了したら、WP YouTube Lyteの設定を行いましょう！

YouTube APIキーの取得

WP YouTube Lyteを使用するにはYouTube DATA API キーを取得する必要があります。

Google Cloud Platformで新規プロジェクトを作成し、APIとサービス＞ダッシュボードをクリック、APIとサービスの有効化をして、APIライブラリからYouTube DATA API V3を選択します。
左側のメニューから 認証情報を選択して、 認証情報を作成＞API キーの順にクリックするとAPIキーを取得できますので、コピペします。
その後、キーの制限が設定できるようになるので、APIキーの制限と名前変更でAPIの制限でキーを制限にチェックを入れ、YouTube Data API v3を指定して最後に保存をクリックします。

何となくやったら出来たので、ここは他の方のウェブサイトの方が分かりやすいかもしれません。

WP YouTube Lyteの設定

YouTube Data APIキーの設定

ここで取得したYouTube Data APIキーを、WP YouTube Lyteの設定項目にあるYouTube APIキーの枠内に入力してTest Keyをクリックします。
Test Keyをクリックして「API にはおそらく問題はないので、ページ下部から変更を保存できます。」と表示されたら、Google Cloud Platformで取得したAPIキーが正しく機能しているという事になります。

プレーヤーのサイズの設定

プレーヤーのサイズはデフォルトで640×360になっていますが、YouTube埋め込みプレーヤーを貼る予定の記事の幅よりも広いプレーヤーのサイズにしておくと、幅100％が自動でコードに入れられて、レスポンシブ対応のプレーヤーとして表示されます。

埋め込み動画の下部にリンクを追加

元々YouTube動画プレーヤーの下部にYouTubeへのリンクを追加していたため、埋め込み動画の下部にリンクを追加は「追加なし」に設定しました。

プレーヤーの位置

プレーヤーの位置はCLS(Cumulative Layout Shift)に影響してしまわないように、中央に設定をするのが無難です。

強制的な HD 再生

強制的にHD再生にしてしまうと、通信速度が遅い回線を使用しているユーザー側の読み込みが追いつかなくなってしまう事もあるので、規定の「HDにしない」に設定しておきましょう。

マイクロデータの追加

マイクロデータの追加は規定で「はい」になっていますが、videoObject のマイクロデータを自動で挿入する項目になっているので設定は変更しない方が良さそうです。
他のVideo object作成プラグインでは、YouTube Data APIキーのクォーターを大量に消費してしまうものもあるので、こちらでマイクロデータを取得しておいた方がクォーター割り当て量を超過しなくて済みそうです。

通常の YouTube リンクや iframe の記述も変換するか ?

WP YouTube Lyteの全ての機能を有効化するならば、YouTubeリンクやiframeの記述を変更しておいた方が良いでしょう。
不要を選択した場合は通常のYouTube埋め込みプレーヤーが表示されていたので、多分サムネイルをキャッシュしているのみの機能になっているのかもしれません。

通常のURLは2行以内に収まりますが、当ウェブサイトではWordPressテーマを販売しているTCD専用のYouTube動画プレーヤー埋め込み用コードが追加された状態のコードが記されているので、標準の埋め込みコードとは少し違います。
通常のYouTubeリンクやiframeの記述を変換するとこうなります。

サーバーにキャッシュしたサムネイルを読み込み、Video ofjectに必要なマイクロデータも動画から取得している状態なので、埋め込みYouTube動画プレーヤー以外のコードが追加されている状態になります。

サムネイルをサーバーにキャッシュ

YouTube動画のサムネイルをサーバーにキャッシュして、読み込み速度を向上させる設定項目です。
既定では「いいえ」になっていますが、これを設定するだけでもパフォーマンスがかなり改善されているようなので、「はい」に設定をします。
プラグインを無効にしても、読み込み速度が落ちていなかったようなので、一度キャッシュを済ませてしまうと、半永久的にサーバーにキャッシュしたデータを先に読み込んでくれるようになるのかもしれません。

これでWP YouTube Lyteの設定は完了です。

WP YouTube Lyte導入後のスコア

標準の埋め込みYouTube動画プレーヤーはこちらになります。

TCDのレスポンシブ対応の埋め込みコードが入っているため、どの端末から閲覧をしても記事幅いっぱいで表示されています。
WP Youtube Lyteを使用して表示したYouTube動画埋め込みプレーヤーは以下のようになります。

全く同じ表示にも見えますが、サーバーにサムネイルをキャッシュしてそれを読み込んだプレーヤー表示になっています。
チャンネルのアイコンと左下の「見る」というリンクは無くなっていますが、一目でYouTubeのプレーヤーである事が分かる状態を維持したままの表示に変わっています。

AutoptimizeとFlying Scriptsを同時に設定している時のスコアは、非AMPのモバイルページとしてはかなりハイスコアな99点を記録し、デスクトップのスコアに関しては100点を取る事ができました。
YouTube動画の埋め込みプレーヤーを表示しているページで、このスコアが出せるプラグインは、見ている限りは他に無いでしょう。
WP YouTube Lyteを無効化して元のスコアを表示して適用前後のスコアを比較しようと思ったのですが、PageSpeed Insightsの「第三者コードの影響を抑えてください」にYouTubeが表示されなくなっていたので、キャッシュを削除しない限りは半永久的にキャッシュしたYouTube動画のサムネイルを表示してくれているのかもしれません。

YouTubeクリエイターが運営するウェブサイトや動画の紹介記事を主なコンテンツとしているウェブサイトは、是非導入をしておいた方が良いプラグインです。