【WordPress】Youtubeの多い記事をプラグインなしで高速化する方法
WordPressにYoutube埋め込みをする際に高速化する方法です。
WordPressに必要なプラグインは8つだけにも書きましたが、ちょっとした機能追加ならプラグイン使わないほうがベターです。
Youtube表示高速化にあたり、やることはたったの2つだけです。
1.Youtubeのiframeを遅延読み込みするJavaScriptを記載する
Defer(遅延読み込み)を使っています。
<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>
2.Youtubeのiframeリンクを1点書き換える
src="hogehoge.com"
を空欄にして、data-src="hogehoge.com"
という形にします。その際に、元々あったsrc=""
は消さないでください。
# 変更前(オリジナルのYoutubeリンク)
<iframe width="560" height="315" src="https://www.youtube.com/embed/a7SouU3ECpU" frameborder="0" allowfullscreen></iframe>
# 変更後(srcの部分が変わっています)
<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/a7SouU3ECpU" frameborder="0" allowfullscreen></iframe>
これで完了です。お疲れさまです。
【絶対に聴いたことのある】定番クラブミュージック30曲まとめというページにこの記事のコードを使っています。
※参考
» How to defer videos from Youtube, Vimeo, etc.
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。