はじめに
SEO対策としてCoreWebVitalの改善をするためにPageSpeedInsightやlighthouseで調査していると、JavaScriptの削減を提案されることがある。
サードパーティ製のスクリプトを使用しており、削減できなかったので遅延読み込みで対応してみた。
Youtubeを遅延読み込み
今回は lazysizes を使用して、Youtube Iframe API のリクエストを遅延読み込みする。
具体的には、lazysizesがlazybeforeunveilイベントを発火するので、これを受け取ったらYoutubeIframeAPIにリクエストを送り、指定したidのdivタグをyoutubeの埋め込みiframeタグに変換する。
<html>
<head>
...
<script src="lazysizes.min.js" async></script>
...
</head>
<body>
...
<div class="lazyload">
<div id="player1"></div>
</div>
<div class="lazyload">
<div id="player2"></div>
</div>
...
<footer>
...
<script>
var ytData = [
{div_id:"player1", video_id:"hogehoge"},
{div_id:"player2", video_id:"fugafuga"}
];
var ytPlayer = [];
var player;
var ytEvent = {
"onReady": function (event) {
ytPlayer[ytPlayer.length] = event.target
}
};
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReadyLazyLoad(div_id) {
var data = ytData.filter(function(value) {
return value.div_id == div_id;
});
player = new YT.Player(data[0]['div_id'], {
height: 360,
width: 100%,
videoId: data[0]['video_id'],
events: ytEvent,
playerVars: {
loop: 10,
rel: 0,
playsinline: 1,
controls: 0,
showinfo: 0,
playlist: data[0]['video_id'],
origin: location.protocol + '//' + location.hostname + "/"
}
});
}
document.addEventListener("lazybeforeunveil", function(e) {
var childElementId = e.target.firstElementChild.id;
onYouTubeIframeAPIReadyLazyLoad(childElementId)
})
</script>
...
</footer>
</body>
</html>
結果
変更前後をLighthouseで計測。
TBTが 280ms → 80ms (FIDはLighthouseで計測できないため、TBTで代用)、
Speed Indexが 3.8s → 1.8s に改善した。
lazyloadは画像のみ適応できると思い込んでいたので、使い所によってはもっと改善できそう。