Youtube をブログに表示して重い時の3つの対策【プラグインを使わずに高速化】

Youtube をブログに表示させることは簡単ですけど、なんだかページが「重い」と感じたことはないですか?

1つのページに面白い動画をいくつか紹介したんだけど、表示に 10 秒以上かかっているんだけど…

くま五郎

オトマミ

Youtube を貼り付けただけでは、すごく重くなっちゃうんだよー。

ということで、Youtube をブログに表示して重くなってしまった時の3つの対策を解説します

Youtube を表示させると重い理由

Youtube をブログに貼り付ける時って、こんな感じのコードをコピペしますよね。

Youtube

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/×××××××××××” frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この <iframe> がクセモノで、タグ内の情報を全部読み込む習性があります。

つまり、いくら自分のページが軽かったとしても、 <iframe> の情報が重いと読み込みに時間がかかってしまうことになります。

そうなると、ページ自体の評価にも左右されるわけですね。

それじゃあ、ページの評価が下がってしまうってこと?

くま五郎

オトマミ

評価要素の1つに「表示速度」もあるから、悪い影響を与える可能性はあるよね。

そうなると、どうにかして Youtube の表示を変えるしかないですよね。

そんな時の対策としては、3つほどあります。

Youtube をブログに表示して重い時の3つの対策

これから3つほど対策を紹介しますが、自分のブログにどれだけ Youtube 動画を埋め込むことがあるのかで変わってくると思います。

【対策1】思いきって諦める

1つ目から諦めるの? って思われるかもしれませんが、その Youtube 動画のリンクを貼るだけというのも1つの方法です。

実際に、ニュースサイトでも

【動画】衝撃の事実!片栗粉はただの澱粉粉だった!

みたいに表示されていたら、見たい人はクリックして見ますからね。

上の例は単に下線を付けて青色にしただけですけど、一般的にこのような表記ではリンクに飛べることも認知されているので、それなりにアクセスはしてくれます。

【対策2】Youtube 画像とリンクを貼る

「対策1」に少し似ていますが、Youtube 画像にリンクを貼る状態であれば、見た目は少し確保できますよね。

例えばこんな感じにすると、

Youtube

クリックすれば Youtube 動画が再生されそうですもんね。

上の画像はこのブログトップへ飛ぶようにしていますが、この手法を使っているブロガーさんもそこそこ見かけます。

【対策3】JavaScript で高速化

微妙な対策ばかり紹介されてイラッとしていた人もいるかもしれませんが、ここからが本番です。

<iframe> の読み込みをちょっと変えて、Youtube 動画の読み込み速度を劇的に変える方法があります。

では、下記の JS コードを <head> 内か記事の冒頭にコピペしてください。

JS
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

あまり Youtube 動画を貼り付けない人は、記事単位で文章の冒頭に貼り付けるだけでも OK です。

オトマミ

ただ、記事の冒頭に JS コードを入れる場合には、クラシックエディターではないと勝手に <p> が挿入されて上のコードが働いてくれなくなるよ。もしくは、PHP で自動改行を無効にするかです。

そして、JS コードを埋め込んだら、もう1つ作業があります

Youtube を貼り付けるコードの中に、src= となっている場所がありますよね。

その後ろにある URL の部分を空欄にして src=”” のようにします。

そして、その後ろに data-src=”” を追加して URL を設定します。

どうなるのかというと、

HTML
<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/×××××××××××" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

すると、Youtube 動画を貼り付けているにも関わらず、ページが高速化されます。

さいごに

最近は、気軽に動画を見てくれる人が増えたので、リンクを表示させるだけでも十分な気もしますけどね。

でも、面白い動画やミュージックビデオなどをページでたくさん紹介する時には、JS コードを使った対策が効果的です。