2017/07/19

【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

WordPressサイトにYoutubeを埋め込む際の高速化テクニックです。

Youtubeの多いページを高速化するプラグインもありますが、、、プラグインはバグの元ですし、アップデートとかもメンドイですね。なので、プラグインなしで高速化を目指しましょう。

完成イメージ

このページは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>