そらかぜ
YouTubeを埋め込んだらスピードがめちゃくちゃ遅くなった
WordPressのテーマ「SWELL」を使っています。
サイトスピードをアップさせるための方法によって、劇的に改善しましたが、また問題が発生しました。
『ブログ運営』SWELLの表示が遅い → 簡単な設定で劇的にスピードアップ
SWELLを使い始めて、ブログの記事が増えたけど、「Google Site Kit」で表示スピードを見てみたら、「遅い」と表示が出ていて、困った。 SWELLは、スピードも速く、SEOに…
トップページに自作のYouTube動画を埋め込んだところ、サイトスピードがめちゃくちゃ遅くなってしまいました。モバイルで32%とか、ありえないほどスピードダウンしてしまったのです。
YouTube埋め込み以外にも、音楽配信サイト「BandCamp」の埋め込みもしています。
調べてみると、iframeタグを使った読み込みのために遅くなっていることがわかりました。Youtubeに読み込みにいくため、どうしても表示スピードが遅くなってしまいます。この問題を解決する手法として、遅延読み込みという方法があるのですが、トップページには使えません。
紹介したいものはトップページに持ってきたいので、これは大問題です。
これについては、発想を転換することによって、簡単に解決することができました。
Youtube埋め込みをしても、結局は画面をクリックしないと動画がされない。であるならば、動画だとわかる画像をアップして、動画をクリックしたらYouTubeに飛ぶようにリンクを貼れば、同じ結果になる。
このようにすれば、単なる画像の読み込みになりますので、iframeタグを使う必要がなくなり、サイトスピードの問題は解決します。
「BandCamp」も同じように、アルバム画像をアップして、「BandCamp」に飛ぶようにリンクを貼りました。
こちらが製作したオルゴール曲を紹介するYouTubeサイトです。
YouTubeでは曲の一部分しか紹介していませんので、フル視聴したい方は、「BandCamp」へどうぞ。