と悩んでいる人もいるでしょう。
そこで、この記事では下記の内容を解説します。
この記事で分かること
- Youtube 動画を表示させると重くなる理由
- ブログの表示速度を改善する方法 3 つ
- iframe の遅延読み込みが標準に【追記：2021 年 4 月】
Youtube 動画などをブログに貼り付けたりすると、表示速度がものすごく遅くなることがあります。
SEO 的にも表示速度が遅いのは致命的になってしまうので、しっかりと改善しておくましょう。
それでは、解説をスタートします。
Youtube 動画が重くなってしまう理由
Youtube をブログに貼り付ける時って、こんな感じのコードをコピペしますよね。
<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> の情報が重いと読み込みに時間がかかってしまうことになります。
そうなると、ページ自体の評価にも左右されるわけですね。
そうなると、どうにかして Youtube の表示を変えるしかないですよね。
そんな時の対策としては、4 つあります。
追記：WordPress 5.7.1 以降からは標準に
WordPress 5.7.1 以降から、iframe 要素を使用すると自動的に遅延するように loading="lazy" 属性が追加されるようになりました。ただ追加されるには条件があるので、詳しい内容は後述します。
Youtube 動画が重い時に効果的な 4 つの対策
これから 4 つほど対策を紹介しますが、自分のブログにどれだけ Youtube 動画を埋め込むことがあるのかで変わってくると思います。
【対策 1】思いきって諦める
1 つ目から諦めるの？ って思われるかもしれませんが、その Youtube 動画のリンクを貼るだけというのも１つの方法です。
実際に、ニュースサイトでも
【動画】衝撃の事実！片栗粉はただの澱粉粉だった！
みたいに表示されていたら、見たい人はクリックして見ますからね。
上の例は単に下線を付けて青色にしただけですけど、一般的にこのような表記ではリンクに飛べることも認知されているので、それなりにアクセスはしてくれます。
【対策 2】Youtube 画像とリンクを貼る
「対策１」に少し似ていますが、Youtube 画像にリンクを貼る状態であれば、見た目は少し確保できますよね。
例えばこんな感じにすると、
クリックすれば Youtube 動画が再生されそうですもんね。
上の画像はこのブログトップへ飛ぶようにしていますが、この手法を使っているブロガーさんもそこそこ見かけます。
【対策 3】loading="lazy" を自分で追記する
ifrrame 要素は全てを読み込む修正があるので、読み込みを遅延させる方法もあります。
その場合は、コード内に「loading="lazy"」を追記してあげます。
追記した例をあげると、
<iframe loading="lazy" width=”560″ height=”315″ src=”https://www.youtube.com/embed/×××××××××××” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
といった感じになります。
ただ全てのブラウザで機能するわけではないので、場合によっては表示が遅いままになる可能性もあります。
とはいえ、Chrome（PC & Android）、Firefox （PC）、Edge は標準化されているので、全てのブラウザで標準化されるのも時間の問題だと思います。
【対策 4】JavaScript で高速化
最後に紹介するのは、<iframe> の読み込みをちょっと変えて、Youtube 動画の読み込み速度を劇的に変える方法があります。
では、下記の JS コードを <head> 内か記事の冒頭にコピペしてください。
あまり Youtube 動画を貼り付けない人は、記事単位で文章の冒頭に貼り付けるだけでも OK です。
そして、JS コードを埋め込んだら、もう１つ作業があります。
Youtube を貼り付けるコードの中に、src= となっている場所がありますよね。
その後ろにある URL の部分を空欄にして src="" のようにします。
そして、その後ろに data-src="" を追加して URL を設定します。
どうなるのかというと、
<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 動画を貼り付けているにも関わらず、ページが高速化されます。
WordPress 5.7.1 以降からは遅延読み込みが標準に
「対策 3」で紹介した方法ではあるんですが、WordPress 5.7.1 以降からは Youtube 動画を貼り付けると自動で loading="lazy" 属性が追記されるようになりました。
なので、シンプルに Youtube からコードをコピーしてきて、そのまま貼り付ければ Youtube 動画をブログに表示させても実質的には重くならないようになりました。
ただ、1 点だけ利用には注意があります。
幅と高さは指定することが必須
「シンプルに Youtube からコードをコピー」とわざわざ書いたのには理由があって、幅「width」と高さ「height」を記述していないと自動で追記されないようになっています。
もしテーマのショートコードだったりプラグイン経由で表示させる場合、動画のリンクだけ入力して、幅や高さの記述が抜けてしまうこともあるからです。
そうなると、自動追記されなくてページが重いままになってしまいますからね。
なので、もし幅や高さを調整したいという場合は、自分で width や height の部分を調整して貼り付けてください。
対策をして Youtube 動画の表示を高速化しよう
以上で、Youtube 動画でブログが重い時の対策を紹介しました。
以前は効果的な方法は JS を使うくらいしかなかったのですが、遅延読み込みができるようになったのでだいぶラクになりました。
なので、WordPress を使っている人は幅と高さだけ気をつけて、それ以外の人は loading="lazy" を追記してあげるのが最も効果的な方法と言えます。
Youtube 動画などを紹介した場面は多いと思うんで、ぜひ活用してブログを高速化させましょう！
