Lighthouseのパフォーマンス改善で有効なカスタマイズのメモ
先日、趣味でやっていたLighthouseが満点となりました。なかなか詰められなかった部分をご紹介します。
Googleアナリティクスタグの遅延読み込み
パフォーマンスの数値に関してはGAあるしなということで思考停止していた部分もありましたが、画面のスクロールであったり、マウスの操作で発火するというスクリプトを参照させていただき実装しました。スクリプト自体は、</body>前に記述します。（参照：https://oncologynote.com/?680303ba45）
<script>
function lazyAnalyticsScript() {
var scrollFirstTime = 1;
window.addEventListener("scroll", oneTimeFunction, false);
window.addEventListener("mousemove", oneTimeFunction, false);
function oneTimeFunction() {
if (scrollFirstTime === 1) {
scrollFirstTime = 0;
var adScript = document.createElement("script");
adScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-0000000-00';
document.body.appendChild(adScript);
var adScript2 = document.createElement("script");
adScript2.innerHTML = 'window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config", "UA-0000000-00");';
document.body.appendChild(adScript2);
window.removeEventListener("scroll", oneTimeFunction, false);
window.removeEventListener("mousemove", oneTimeFunction, false);
}
}
}
lazyAnalyticsScript();
</script>画像のwebp化と遅延読み込み
<img class="lazy" src="" data-src="/img/hogehoge.webp" alt="hogehoge">フッター部分に以下コードを記載
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.10.0/lazyload.min.js"></script>
<script>
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy",
to_webp:true
});
</script>動画のwebm化と自動再生＋繰り返し
直接Lighthouseの採点には関係がありませんが、PC版での読み込みが高速になります。スマホでは動画の自動再生はできないので切り分けで削除してます。
<video src="/img/hogehoge.webm" controls muted autoplay playsinline loop></video>