after-load

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

<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);
            }
        );
    }
    async function wsloadmetrics() {
        await wsloadScript("/js/yandex-metrika.js",true);
        await wsloadScript("https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1",true);
        await wsloadScript("/js/google-analytics.js",true);
        console.log("metrics done");
        return true;
    }
    // Вставляем сюда один из скриптов, описанных ниже, в зависимости от того, когда хотим делать подгрузку
</script>

Загрузка сторонних скриптов после загрузки сайта

<script>
    window.addEventListener('load', function () { setTimeout(wsloadmetrics, 1500); return true; } );
</script>

Загрузка сторонних скриптов при скролинге от посетителя

<script>
    let wsdoloadm = false;
    window.addEventListener('scroll', function() {
        if (wsdoloadm === false) {
            wsdoloadm = true;
            setTimeout(wsloadmetrics, 5000);
        }
        return true;
    });
</script>

Загрузка сторонних скриптов при скролинге от посетителя ИЛИ через 10 сек после полной загрузки, если скролинга небыло

<script>
    let wsdoloadm = false;
    let wswindowload = false;
    window.addEventListener('scroll', function() {
        if (wsdoloadm === false) {
            wsdoloadm = true;
            setTimeout(wsloadmetrics, 5000);
        }
        return true;
    });
    window.addEventListener('load', function () { 
        setTimeout(function () {
            if (wsdoloadm === false) {
                wsdoloadm = true;
                wsloadmetrics();
            }
        }, 10000);
        return true; 
    } );
</script>

Загрузка сторонних скриптов при скролинге от посетителя, но только после полной загрузки сайта

<script>
    let wsdoloadm = false;
    let wswindowload = false;
    window.addEventListener('load', function () { wswindowload = true; return true; } );
    window.addEventListener('scroll', function() {
        if (wsdoloadm === false && wswindowload === true) {
            wsdoloadm = true;
            setTimeout(wsloadmetrics, 100);
        }
        return true;
    });
</script>

Откладываем загрузку шрифтов, вернее их влияние на отображение
https://github.com/bramstein/fontfaceobserver/blob/master/fontfaceobserver.js
https://fontfaceobserver.com/
https://habr.com/ru/post/258731/

<style>
 @import url(http://fonts.googleapis.com/css?family=НАЗВАНИЕ_ШРИФТА&subset=cyrillic,latin);
 
 /* шрифт по умолчанию, до тех пор пока не подгружен новый шрифт */
 body {font-family: sans-serif;}
 /* новый шрифт */
 .fontOneLoad body {
    font-family: 'НАЗВАНИЕ_ШРИФТА', cursive;
 }
</style>

<script src='js/fontfaceobserver.js'></script>
<script>
 // инициализация
 var fontOneLoad = new FontFaceObserver('НАЗВАНИЕ_ШРИФТА', {});
 fontOneLoad
   .check()
   .then(function () { // событие, когда шрифт загружен
      // добавляем класс тегу html 
      document.documentElement.className += " fontOneLoad";
	});
</script>

Я на https://wseo.kz для отложения шрифта иконок сделал так:

async function wsloadFontsCss() {
        var wsfont = new FontFaceObserver('wseo-icons');

        wsfont.load().then(function () {
            // Добавляем стиль шрифта уже в самом конце загрузки страницы, но перед загрузкой всяких скриптов
            var wsFontCss = document.createElement('style');
            wsFontCss.innerHTML = ".icon {font-family: 'wseo-icons' !important}";
            document.head.appendChild(wsFontCss);
            console.log("font-family: wseo-icons - done");
            return true;
        });
        
    }
    window.addEventListener('load', wsloadFontsCss);

Источник:
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: Отложенная загрузка сторонних скриптов -->