【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】
WordPressサイトにYoutubeを埋め込む際の高速化テクニックです。
Youtubeの多いページを高速化するプラグインもありますが、、、プラグインはバグの元ですし、アップデートとかもメンドイですね。なので、プラグインなしで高速化を目指しましょう。
完成イメージ
【絶対に聴いたことのある】定番クラブミュージック30曲まとめ
定番のクラブミュージックを30曲まとめました。2011年〜2013年に流行った定番クラブミュージックです。
このページはYoutubeが10本ありますが、体感で軽くないですかね？[クラブミュージック]でググると５位ですが、速度が早いからユーザーに愛されてるかもですね！
どうしたら高速化できるのか？ その秘密は、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が１つのページでスクリプト読み込みする必要なしです。なので、ページ単位で十分かと。
Youtubeコードを１箇所だけ改変する
あとは、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^)／
おわり。
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。