GutenbergでYoutube動画の埋め込みをした際、Google PageSpeed Insightsのスコアが低下するのを防ぐプラグイン「Lazy Load for Videos」

公開日：2021年1月27日

WordPressのGutenberg(ブロックエディタ)に標準で備わっているYoutube動画などの埋め込みブロック。

Youtubeの場合、従来のYoutubeの埋め込みコードをHTMLで挿入することなく、Youtube埋め込みブロックを追加して、動画の共有ボタンをクリックした時に出てくるURLをコピペすると、いい感じにプレーヤーが表示されます（こんなこと解説しなくてもご存じですよね？）。

でも、このブロックを使って動画を挿入すると、大変な問題が！！それは、Google PageSpeed Insightsのスコアがとても残念な結果になってしまうことです。

実際にこちらの【OnePress】テーマを勝手にデモしているサイトのページで動画を挿入してスコアを調べたところ、動画挿入なしの状態では

モバイル：７８　パソコン：９１

という結果。まあまあといったところでしょうか。ところが、動画を挿入すると、

モバイル：４５　パソコン：８０

とても残念な結果になりました。特にモバイルの数字が惨憺たる結果になってしまいました。

いろいろと試行錯誤するも、技術不足から結局自己カスタマイズでは改善できずあきらめかけたときに見つけたのが、今回紹介する「Lazy Load for Videos」です。

論より証拠！ということで、このプラグインを有効化して再計測したところ、

モバイル：６２　パソコン：８７

に改善！！多少影響は出ますが、未使用の状態からすればかなりの改善でした。

恐らく動画コンテンツの多いサイトを運営している方は同じような問題を抱えていらっしゃると思いますので、「なんだ、プラグイン使うのか・・・」なんて言わずに試してみていただきたい、おすすめプラグインです。

また、「Lazy Load for Videos」の良いところは、特別なブロックを使う必要がなく、標準のYoutubeおよびVimeoの埋め込みブロックで挿入されたコンテンツに対して機能してくれるところです。他の対策プラグインと比べて動画を挿入し直したりする必要もありません。

ページ上部へ戻る▲

【Lazy Load for Videos】プラグインの用途や機能

「Lazy Load for Videos」は、YoutubeとVimeoの埋め込みブロックに対して以下のように動作します

動画ではなく、動画のサムネイルと再生ボタンを表示する
動画のサムネイルをクリックすると、動画プレーヤーを起動して再生する

なるほど、標準では動画プレーヤーがそのまま埋め込まれるので時間がかかるところを、サムネイルと再生ボタン（疑似）をとりあえず表示させることで、再生時までは読み込まれないようにしているという仕組みになっているようです。

プラグインのプログラムを詳しく調べたわけではありませんので、Youtube動画で設定されているサムネイルがきちんと呼び出されて表示されるのかは不明ですが、いくつかの動画をテストした結果ではそれぞれの動画に設定されているサムネイルが表示されました。

私が管理している【OnePress】という公式配布テーマの紹介（デモ）をしているサイト上で「Lazy Load for Videos」を使った動画のサンプル表示をさせていますので、どんな表示になるのか気になる方はご覧ください。
Youtube動画をGutenbergのYoutube埋め込みブロックを使って挿入したサンプル

ページ上部へ戻る▲

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用（試用）したテスト環境

テストサーバー：カラフルボックス
WordPressのバージョン：5.6
PHPのバージョン：7.4.6
テーマ：HABONE(オリジナルテーマ)
プラグインのバージョン：本記事で紹介しているバージョン2.13.0／最新バージョン 2.17.0
公式サイト（wordpress.org上）：https://wordpress.org/plugins/lazy-load-for-videos/
公式サイト（作者サイト）：

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

ページ上部へ戻る▲

【Lazy Load for Videos】プラグインの設定画面や表示画面の日本語化と翻訳

当サイトで私が翻訳した【Lazy Load for Videos】プラグインの日本語化ファイルを配布しています。翻訳ファイルについての詳しい説明は

【Lazy Load for Videos】プラグインを日本語で使用するための翻訳ファイルダウンロードページ

をご覧ください。

※翻訳することで設定が容易になりますが、フロントエンド側で翻訳が必要なのは画像マウスオーバー時の「〇〇を再生する」という文言だけですので、設定画面の英語が理解できれば不要かも知れません。

ページ上部へ戻る▲

【Lazy Load for Videos】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法と使用方法

基本的には、プラグインをインストールして有効化すれば機能します。

途中で設定変更した場合、それ以前の投稿や固定ページに挿入したYoutubeおよびVimeoの埋め込みブロックには変更内容が反映されませんので、設定画面最下部の「Update Posts」ボタンをクリックして反映させる必要があります（一括で変更が適用されますので、過去の投稿１つ１つを更新する必要はありません）

ページ上部へ戻る▲