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化と自動再生+繰り返し

スマホでは自動再生はできないのでスマホ向けの表現は別途検討。

<video src="/img/hogehoge.webm" controls muted autoplay playsinline loop></video>

ほかのメモ