YouTube動画の読み込みを高速化してサイトスピードを上げる検証

wordpress編

こんにちは

GoogleのPageSpeed Insightsの数値があまりにも悪いので、何とか改善しよ
うと、いろいろ試行錯誤しています。

今回は、このブログでも多用している、YouTubeの埋め込み動画の読み込みを
速くする方法について検証してみました。

検証すると言ってはみたけど、CSSやJavaScriptなどに詳しくない
おじさんには大変な作業となりました。記事完成まで1っ週間以上
かかってしまった。

2021年8月現在のサイトスピード(テストページは動画を11ほど埋め込んだ
こちらの記事です。)

GoogleのPageSpeed Insightsでは、

GTmetrixでは、

け~さん
け~さん

ため息が出るくらい、厳しい数値だが、ここから
どれくらい改善できるか?

スポンサーリンク

YouTube動画埋め込みページ高速化

高速化の前に、通常使っているYouTube動画の埋め込み方法について紹介して
おきます。

YouTube動画の埋め込み方法2つ

①動画の共有から埋め込む

普通にYouTube動画をwordpressに埋め込むには、YouTube画面下の共有
⇒埋め込む⇒埋め込みコードのコピーを行い、

このコードを、ブロックエディタの場合はカスタムhtmlブロック(クラシック
エディタの場合はテキストエディタ)に貼り付けます。

②YouTube埋め込みブロックを使う

ブロックエディタにはYouTube埋め込みブロックが用意されていますので
そちらを利用してもOK。

YouTube埋め込みブロックの場合は、Youtube動画のアドレスをコピペする
ようになってます。

け~さん
け~さん

YouTube動画のアドレスをコピペするだけだから、こちらの
方が簡単かなぁ。

どちらの方法でも埋め込みはできますが、コードエディタで見ると、
使用しているhtmlタグに違いがあります。①は<iframe>
②は<embed>が使われています。

け~さん
け~さん

iframeとembedの違いは、小難しいので各自
ググって調べてください。

はるこ
はるこ

どちらを使っても、サイトスピードに変わりは無かったので
好みで選んでOKかな。

高速化の方法

wordpressのバージョン5.7から、動画の読み込み時に、自動で遅延読み込み
(Loading=”Lazy”)が実行されるようになりました。

ただし、このwordpressの機能にも少し条件があります。

ポイント

先ほども説明しましたが、動画を記事の埋め込む方法に、ブロックエディタ
でYouTube埋め込みブロックを使うと遅延読み込みは機能しません。
カスタムhtmlブロック埋め込むと機能します。

け~さん
け~さん

動画のhtmlタグ<iframe>にだけしか、この遅延読み込みは適用
されないと言う事かなぁ?

詳しくは、下記を参照してください。↓

け~さん
け~さん

このwordpressの機能でver5.7以前よりは、表示が少し早くは
なったかなぁ?と思いますけどあまり実感がない。

はるこ
はるこ

以前の速さと比較できないからわからないけど、
ここでは、さらに高速化を目指します。

YouTube埋め込み動画を高速化する方法は、検索するといろいろありますが、
代表的なものを試してみます。

プラグイン「WP YouTube Lyte」を使う

wordpressには埋め込み動画の表示を早くするプラグインがあります。

け~さん
け~さん

プラグインは、使いすぎるとサイトスピードを落としたり、
不具合の温床になったりするので、あまりおすすめでは
ありませんが。

はるこ
はるこ

インストールしてしまえば、面倒なCSSやJavaScriptをいじらなくて
もいいし、設定も簡単でそれなりの効果は期待できる。

中でも代表的な「WP YouTube Lyte」を紹介します。

け~さん
け~さん

このプラグインも、遅延読み込みをしてくれるプログラムですが
あえて検証してみます。

「WP YouTube Lyte」のインストール

まずは、プラグインのインストールです。
ダッシュボード⇒プラグイン⇒新規追加から

キーワードボックスに「WP YouTube Lyte」と入力し、インストール&有効化を
クリックします。

有効化すると、ダッシュボード⇒設定のところに「WP Youtube Lyte」が追加
されていますので初期設定を行います。

「WP YouTube Lyte」の設定

設定は、YouTubeプレイヤーのサイズを好みで変更する以外は、デフォルト
のままでいいと思います。

ただ、YouTube画面にいろんな情報を表示させるには、APIキーを取得する
必要があります。これはかなり面倒な作業なので、別記事で詳しく紹介します。

WP Youtube Lyteの使い方

WP YouTube Lyteの使い方は2つあります。

例としてメタリカの「Enter sandman」の動画を貼り付けてみます。URLは、「https://www.youtube.com/watch?v=TrkJ0adLofE」です。

①一つ目は、カスタムhtmlブロックにURLをコピペする方法ですが、その際
「https」を「httpv」に書き換えます。

httpv://www.youtube.com/watch?v=TrkJ0adLofE

②二つ目は、ショートコードブロックに以下のコードを書き込みます。

[lyte id=”YouTubeのID”/] 上記の例だと[lyte id=”TrkJ0adLofE”/]

どちらを使っても、動画の埋め込みができます。

どれだけ速くなったのか?

それではどれ位速くなったのか、計測してみます。
*サブドメインのLuxeritasテーマで計測しました。

プラグインを使わないと、

プラグイン利用時、

パソコンの表示スピードは、+37で100になりました。

け~さん
け~さん

プラグインの効果は歴然です。ただ、モバイルがー6に
なっているのが気になります。

サムネイル画像を貼り付けてリンクさせる方法

続いては、プラグインを使用しない方法です。

手順としては、

Youtubeのサムネイル画像を取得して、その画像に
目的の動画のリンクを貼るようにhtmlで記述し、記事に挿入し
style cssでサムネイルの表示方法を指定する。

というやり方です。

こちらはKT LIFEさんの記事を参照させてもらいました。

け~さん
け~さん

他にも、JavascriptやjQueryを使った方法など有りましたが
プログラム音痴のおじさんには敷居が高かったです。

はるこ
はるこ

JavaScriptやjQueryを使う方法は、結局プラグインと同じ
アプローチなので、効果の方も大差ないかとも思います。

け~さん
け~さん

だったら、WP YouTube Lyte使った方はるかにが簡単だ。
プラグイン使いたくない人JavaScriptやjQueryに
挑戦してみて下さい。

JavaScriptやjQueryを使った高速化については、以下の記事が参考になる
と思います。

け~さん
け~さん

おじさんは、JavaScriptを記事内に挿入するだけでも
四苦八苦しました。

記事内にサムネイル画像を貼る

まずはYoutube動画を表示したい記事内に、次のhtmlを記述します。

  <p class="youtubesm">
 <a href="//www.youtube.com/watch?v=ここにIDが入る" class="youtube_pn">
<img src="//i.ytimg.com/vi/ここにIDが入る/mqdefault.jpg" alt="" width="100%">
 </a>
  </p>

上記の「ここにIDが入る」のところに、埋め込みたいYoutube動画のIDを
書き入れて下さい。

これで、Youtube動画のサムネイルが取得され、同時にサムネイルとのリンクも
貼られます。

CSSで表示設定

次に、サムネイル画像の表示設定をCSSで行います。

<style>
.youtubesm{
background:#fff
}
.youtubesm a{
border:2px
solid #fff;
display:block;
position:relative
}
.youtubesm a:hover{
opacity:.6
}
.youtubesm a::before{
background:url(ここにアイコンのURLを入れる) center center / 100px 64px no-repeat;content:"";
display:block;
width:100%; /*アイコンの幅調整*/
height:60px; /*アイコンの高さ調整*/
margin:-32px auto 0;
position:absolute;
top:50%;
left:0;
right:0;
z-index:1
}
.youtubesm a img{
width:100%
}
</style>

このCSSを子テーマのstyle.cssに貼り付けて下さい。

私は、テーマにcocoonを使ってますので、ダッシュボード⇒外観⇒テーマエディタ
からCocoon Childを選択してコピペしました。

はるこ
はるこ

ダッシュボード⇒外観⇒追加CSSにコピペしてもOK.

YouTubeのアイコンを入手、貼り付け

サムネイルにYouTubeアイコンを貼り付けます。

はるこ
はるこ

アイコンは有っても無くてもいいかな?でも閲覧している人には
YouTube動画だと分かりやすいので、あった方が親切ですね。

YouTubeアイコンは、こちらからダウンロードしメディアライブラリーに追加
しておいてください。

赤枠をクリックして好みのアイコンをダウンロード

ダウンロードしたアイコンは、「あなたのドメイン/public_html/wp-content/
uploads/の中」にありますので、そのURLを先ほどのCSSの15行目に挿入してください。

以上でYouTube動画のサムネイル表示は完了です。

実は、おじさんこのYouTubeアイコンがどうしても表示できません
でした。原因はいまだに分かりません。なので代わりにFont
Awesomeを代用する予定です。

どれだけ速くなったのか?

こちらはテーマにcocoonを使ったサブドメインでテストしました。

高速化前、

高速化設定後、

パソコンで+38、モバイルで+49になりました。

はるこ
はるこ

こちらはパソコンもモバイルもかなりスピードアップ
しました。

け~さん
け~さん

テスト環境に違いはありますが、どちらのテーマもほぼノーマル
状態での検証なので、目安にはなると思います。

まとめ

今回はYouTube動画をブログに貼り付けた時の高速化について、
プラグインを使った場合とサムネイルリンクを設定した場合の
サイトスピードを検証してみました。

結論は?

YouTube動画のサムネイルを張り付ける方法が劇的にスピードアップを
期待できる

と言う事でした。

ただ、CSSやHTMLの編集が面倒なので、インストールするだけで
効果のあるWP YouTube Lyteの使用も選択肢の一つかとは思います。

今回は以上です。

埋め込み動画のサイトスピードアップについては、別の方法でも検証して
見たいので次回また記事にしたいと思います。

それでは

コメント

タイトルとURLをコピーしました