【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】
WordPressサイトにYoutubeを埋め込む際の高速化テクニックです。
Youtubeの多いページを高速化するプラグインもありますが、、、プラグインはバグの元ですし、アップデートとかもメンドイですね。なので、プラグインなしで高速化を目指しましょう。
完成イメージ
【絶対に聴いたことのある】定番クラブミュージック30曲まとめ
定番のクラブミュージックを30曲まとめました。2011年〜2013年に流行った定番クラブミュージックです。
このページはYoutubeが10本ありますが、体感で軽くないですかね?[クラブミュージック]
でググると5位ですが、速度が早いからユーザーに愛されてるかもですね!
どうしたら高速化できるのか? その秘密は、Deferにあります。
DeferとはHTMLを読み込む際の遅延処理でして、これを使うことで体感速度を早めることができます。詳しく知りたい方はググってください。しかし、別に詳しく知らなくても実装可能です。
Youtubeを高速読み込みする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>
これだけ。これを投稿ページの一番上に貼り付けましょう。
こんな感じです。
基本的にはページ単位で埋め込んでいます。
全ページで読み込んでもいいですが(その場合はheader.php
とかに貼りましょう)、ぶっちゃけYoutubeが1つのページでスクリプト読み込みする必要なしです。なので、ページ単位で十分かと。
Youtubeコードを1箇所だけ改変する
あとは、Youtubeコードを少しいじります。
src
とdata-src
に注目してください。
// これが変更前
<iframe width="420" height="315" src="//www.youtube.com/embed/yd8jh9QYfEs" frameborder="0" allowfullscreen></iframe>
// これが変更後
<iframe width="420" height="315" src="" data-src="//www.youtube.com/embed/yd8jh9QYfEs" frameborder="0" allowfullscreen></iframe>
こんな感じ。
src
を空っぽにして、data-src
にURLを埋め込みます。
以上で完了!\(^o^)/
簡単すぎ\(^o^)/\(^o^)/\(^o^)/
余談:Youtubeを横幅100%にするCSS
僕がテンプレ利用するコードです。
.youtubeWrapper{
position: relative ;
margin-top: 1.2em ;
margin-bottom: 1.2em ;
padding-top: 69px ;
padding-bottom: 50% ;
overflow: hidden ;
}
.youtubeWrapper iframe {
position: absolute ;
top: 0 ;
left: 0 ;
height: 100% ;
width: 100% ;
}
そのあとに、下記のようにコーディングします
<div class="youtubeWrapper"><iframe width="420" height="315" src="" data-src="//www.youtube.com/embed/yd8jh9QYfEs" frameborder="0" allowfullscreen></iframe></div>
見た目はこんな感じになります\(^o^)/
おわり。