『ブログ運営』WordPress YouTubeの埋め込みによる遅延を改善する方法

そらかぜ

YouTubeを埋め込んだらスピードがめちゃくちゃ遅くなった

WordPressのテーマ「SWELL」を使っています。

サイトスピードをアップさせるための方法によって、劇的に改善しましたが、また問題が発生しました。

トップページに自作のYouTube動画を埋め込んだところ、サイトスピードがめちゃくちゃ遅くなってしまいました。モバイルで32%とか、ありえないほどスピードダウンしてしまったのです。

YouTube埋め込み以外にも、音楽配信サイト「BandCamp」の埋め込みもしています。

調べてみると、iframeタグを使った読み込みのために遅くなっていることがわかりました。Youtubeに読み込みにいくため、どうしても表示スピードが遅くなってしまいます。この問題を解決する手法として、遅延読み込みという方法があるのですが、トップページには使えません。

紹介したいものはトップページに持ってきたいので、これは大問題です。

これについては、発想を転換することによって、簡単に解決することができました。

Youtube埋め込みをしても、結局は画面をクリックしないと動画がされない。であるならば、動画だとわかる画像をアップして、動画をクリックしたらYouTubeに飛ぶようにリンクを貼れば、同じ結果になる。

このようにすれば、単なる画像の読み込みになりますので、iframeタグを使う必要がなくなり、サイトスピードの問題は解決します。

「BandCamp」も同じように、アルバム画像をアップして、「BandCamp」に飛ぶようにリンクを貼りました。

こちらが製作したオルゴール曲を紹介するYouTubeサイトです。

YouTubeでは曲の一部分しか紹介していませんので、フル視聴したい方は、「BandCamp」へどうぞ。

目次