Written by Manabu Bannai

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

PROGRAMMING WordPress

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

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

完成イメージ


このページは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コードを少しいじります。
srcdata-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^)/

おわり。

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社