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

WP YouTube Lyteの設定方法サムネイル画像

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

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

Google発表のスピードアップデート 秒数ごとの離脱率
ウェブサイトの読み込み速度が遅すぎると、ただ重いだけのサイトなのか障害が発生しているのか分からずに、読み込み途中でブラウザバックをしたり、読み込みを止めてしまうユーザーが意外と多いそうです。
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のインストール

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

YouTube APIキーの取得

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

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

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


WP YouTube Lyteの設定

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埋め込みプレーヤーが表示されていたので、多分サムネイルをキャッシュしているのみの機能になっているのかもしれません。

通常のYouTubeへのリンクと埋め込みコードの表示
通常のURLは2行以内に収まりますが、当ウェブサイトではWordPressテーマを販売しているTCD専用のYouTube動画プレーヤー埋め込み用コードが追加された状態のコードが記されているので、標準の埋め込みコードとは少し違います。
通常のYouTubeリンクやiframeの記述を変換するとこうなります。
WP YouTube Lyte YouTubeへのリンクと埋め込みコードの表示
サーバーにキャッシュしたサムネイルを読み込み、Video ofjectに必要なマイクロデータも動画から取得している状態なので、埋め込みYouTube動画プレーヤー以外のコードが追加されている状態になります。

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

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

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


WP YouTube Lyte導入後のスコア

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

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

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

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

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


YouTubeチャンネルバナー

Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中!
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます!
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです!

最新の更新情報を受け取れる各種SNSを運営中!フォローや登録はこちら!


X Postをタップして、@jvcameratravelを付けたまま記事をX(旧・Twitter)でシェアをすると、弊社運営のXアカウントにてあなたのポストをリポストするアカウント拡散キャンペーンを行っています。
不要な時は@jvcameratravelは外してね!

関連記事

  1. WordPressを高速化するプラグイン3選 サムネイル画像

    WordPressを高速化!95点から100点を取れる軽量爆速の無料プラグイン3選

  2. WordPressサイトの写真や画像が色褪せたり色が変わる原因の対策や対処法

    WordPressサイトの写真や画像が色褪せたり色が変わる原因の対策や対処法

  3. 閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法 サムネイル画像

    閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法

  4. TCD ワードプレステーマGENSEN 検索フォーム

    TCD GENSENでSEO対策!検索機能が高性能でオススメの有料WordPressテーマのレビュー

  5. WordPress6.5とXアクセラレータの不具合

    WordPress 6.5 Redinaアップデート!XアクセラレータVer.2で504の不具合

  6. ウェブサイト管理者向け!汚い美容系広告だけをブロックして収益を減らさず離脱率を下げる方法

    ウェブサイト管理者向け!汚い美容広告をブロックして離脱率を下げて収益も向上

  7. WordPressサイトのレイアウト崩れ修復方法

    WordPress管理画面のレイアウト崩れ修正方法!原因はレンタルサーバーの高速化機能

  8. ワードプレスプラグイン Autoptimizeの導入サムネイル画像

    WordPress高速化プラグインAutoptimizeの設定方法!CSS JavaScript 画像を最適化!

  9. 自動読み込みがリスクになっているWordPressサイト

    WordPressプラグインの入れすぎがダメな理由を解説!アンインストール後も注意!

  10. WordPress 常時SSL化とサブディレクトリからサブドメインへの301転送設定

    WordPressのサブドメインサイト、常時SSL化とサブディレクトリからリダイレクトする301転送設定

  11. AMP for WP Accelerated Mobile Pages plugin

    WordPress 超高機能AMPプラグイン AMP for WP– Accelerated Mobile Pages

  12. 記事の最後に定型文を自動表示するWord Pressプラグイン!Add Widget After Content

    記事最後に定型文を自動表示するWordPressプラグイン!Add Widget After Content

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. 大崎市三本木ひまわりの丘 菜の花まつり-菜の花200万本の絶景が見頃!|宮城県大崎市

    200万本の花が咲く 大崎市三本木菜の花まつりを2025…

  2. あしかがフラワーパーク 大藤まつり ふじのはな物語 奇蹟の大藤ライトアップ

    花の名所 あしかがフラワーパーク 大藤まつりを2025…

  3. 宮城県大崎市 川渡温泉の菜の花と桜

    おおさき鳴子温泉菜の花ガーデンは2025年4月12日から…

  4. 宮城県角田市 蔵王連峰を背景に咲くかくだの菜の花畑

    菜の花が生育不良の「かくだ菜の花まつり」は2025年4…

  5. 九州地方佐賀県武雄市の観光名所 御船山楽園の花まつり

    ツツジの花が美しい御船山楽園 花まつり第2弾は2025…

  6. 福島県福島市 飯坂温泉 花ももの里の風景と菜の花

    飯坂温泉の桃源郷 花ももの里の開園期間は2025年4月1…

  7. 宮城県仙台市 榴岡公園の枝垂桜-夜桜ライトアップ

    榴岡公園 桜まつり 2025年3月27日から開催! ステージ…

  8. 仙台西公園で咲く満開の桜 とお花見を楽しむ人々

    桜名所 仙台西公園でお花見とステージイベントは2025…

  9. 山形県大蔵村 肘折温泉 いでゆ館

    山形肘折温泉の日帰り入浴施設 肘折いでゆ館が2025年…

  10. 茨城県石岡市の枝垂れ桜の名所 常陸風土記の丘

    枝垂桜が美しい常陸風土記の丘さくらまつりを2025年3…

楽天トラベルのバナー画像

よく読まれている人気記事ランキング




Amazonトップページバナー
楽天モバイルアフィリエイト