after-load

Откладываем загрузку счётчиков

Источник:
https://t.me/perfScan/31
https://codepen.io/fe-nix/pen/VwXLNRa?editors=0010

<script>
// Создаем функцию, в которой каждый скрипт подключаем внутри своего таймаута, чтобы предыдущий успевал загрузиться и выполниться.
// Некоторые скрипты стоит отклыдвать только по одному событию, а не по всем, например загрузку карты проезда с яндекса или гугла можно откладывать только по скроллу, даже без таймаута.
// Чаты и другие маркетинговые инструменты, которые отображаются на странице спустя какое-то время можно отклыдвать только по таймеру и смело откалыдвать чат на 15-20 секунд.

let psLoadedJs = false
const getExtJs = () => {
  // проверяем, была ли выполнена функция ранее
  if (!psLoadedJs) {
    psLoadedJs = true
    // при выполенении функций удаляем события, которые были навешаны ранее.
    window.removeEventListener("scroll", getExtJs, false)
    window.removeEventListener("touchstart", getExtJs, false)
    window.removeEventListener("mousemove", getExtJs, false)
    window.removeEventListener("click", getExtJs, false)
    window.removeEventListener("keydown", getExtJs, false)
    clearTimeout(getExtJsTimeout)
    setTimeout(() => {
      // Здесь все внешние скрипты, вроде живосайта, метрики,
      // аналитикса, обратные звонки, коллтрекинги и так далее
    }, 300)
    // Для каждого скрипта нужно подбирать время, чтобы предыдущий успевал загрузиться и инициализироваться.
  }
}
// Вешаем выполнение функцию на каждое необходимое событие. Здесь перечислены самые распространенные.
window.addEventListener("scroll", getExtJs, { passive: true })
window.addEventListener("touchstart", getExtJs, { passive: true })
window.addEventListener("mousemove", getExtJs, { passive: true })
window.addEventListener("click", getExtJs, { passive: true })
window.addEventListener("keydown", getExtJs, { passive: true })
// Если никакое событие не произошло, то выполняем функцию через 5 секунд
let getExtJsTimeout = setTimeout(getExtJs, 5000)
</script>

Объединил оба варианта:

<!-- START wSEO.pw Michael Nossov: Отложенная загрузка сторонних скриптов -->
<script>
    async function wsloadScript(url, async) {
        async = async || false;
        const wsscript = document.createElement("script");
        wsscript.type = "text/javascript";
        wsscript.async = (async || false);
        return new Promise(function(done, failed) {
                wsscript.onload = function() {
                    done();
                };
                wsscript.onerror = function() {
                    failed();
                };
                wsscript.src = url;
                document.getElementsByTagName("head")[0].appendChild(wsscript);
            }
        );
    }

    let psLoadedJs = false
    const getExtJs = async () => {
        // проверяем, была ли выполнена функция ранее
        if (!psLoadedJs) {
            psLoadedJs = true;
            // при выполенении функций удаляем события, которые были навешаны ранее.
            window.removeEventListener("scroll", getExtJs, false);
            window.removeEventListener("touchstart", getExtJs, false);
            window.removeEventListener("mousemove", getExtJs, false);
            window.removeEventListener("click", getExtJs, false);
            window.removeEventListener("keydown", getExtJs, false);

            // Здесь все внешние скрипты, вроде живосайта, метрики,
            // аналитикса, обратные звонки, коллтрекинги и так далее
            await wsloadScript("https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1",true);
            await wsloadScript("/js/google-analytics.js",true);
            await wsloadScript("/js/yandex-metrika.js",true);

            console.log("metrics done");
            return true;
        }
    }
    // Вешаем выполнение функцию на каждое необходимое событие. Здесь перечислены самые распространенные.
    window.addEventListener("scroll", getExtJs, { passive: true });
    window.addEventListener("touchstart", getExtJs, { passive: true });
    window.addEventListener("mousemove", getExtJs, { passive: true });
    window.addEventListener("click", getExtJs, { passive: true });
    window.addEventListener("keydown", getExtJs, { passive: true });
    // Если никакое событие не произошло, то выполняем функцию через 5 секунд
    window.addEventListener("load", function () { setTimeout(getExtJs, 5000); return true; } );


    async function wsloadmetrics() {
        // Чаты и другие маркетинговые инструменты, которые отображаются на странице спустя какое-то время можно отклыдвать только по таймеру и смело откалыдвать чат на 15-20 секунд.
        await wsloadScript("/js/jivo.js",true);
        console.log("chats done");
        return true;
    }
    window.addEventListener("load", function () { setTimeout(wsloadmetrics, 5000); return true; } );
    // Для каждого скрипта нужно подбирать время, чтобы предыдущий успевал загрузиться и инициализироваться.

</script>
<!-- END wSEO.pw Michael Nossov: Отложенная загрузка сторонних скриптов -->