Загрузка файлов отложено или по востребованию

В первую очередь нужно загружать тот контент, который расположен на первом экране. Так пользователь быстрее приступит к изучению сайта, что повысит конверсию. Загрузку всего остального содержимого нужно отложить. Чтобы это сделать, вызывайте подгрузку тяжеловесных скриптов и сервисов в событии window.onload или в момент их востребования.

Содержание

Отложенная подгрузка счётчиков аналитики

Картографические сервисы, онлайн консультанты, системы сторонней авторизации (VK ID, Yandex ID и т.д.)

Каптчи

Отложенная подгрузка счётчиков аналитики

Хоть компании-поставщики систем аналитики и рекомендуют загружать их код как можно раньше, но технических объяснений, почему это надо делать, не предоставляют. Поэтому можно и нужно подгружать счётчики отложено.

Отложить загрузку Яндекс метрики можно вот так:

window.addEventListener("load", function() {
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(123123123, "init", {
         clickmap:true,
         trackLinks:true,
         accurateTrackBounce:true,
         webvisor:true
    });
});

Гугл аналитикс вот так:

window.addEventListener("load", function() {
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://www.googletagmanager.com/gtag/js?id=G-123123123", "ga");
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-123123123');
});

Помимо Яндекс метрики и Гугл аналитикс в событии window.onload нужно подгружать все рекламные и реферальные счётчики.

Картографические сервисы, онлайн консультанты, системы сторонней авторизации (VK ID, Yandex ID и т.д.)

Если карта расположена на первом экране, то её нужно подгружать сразу, если ниже то в событии window.onload.

Делается это так:

window.addEventListener("load", (event) => {
    setTimeout(function() {
        // Тут вызов кода загрузки
    }, 50);
});

или jQuery версия

$(window).on("load", function(event) {
    setTimeout(function() {
        // Тут вызов кода загрузки
    }, 50);
})

Каптчи

Скрипт каптчи нужно инициировать в момент начала заполнения полей формы. То есть по событию focus на любом из полей формы.

Вот jQuery код, который инициирует яндекс каптчу для формы когда пользователь начинает её заполнять:

/*Функция которая подключает каптчу на форму*/
function initSmCaptcha(form) {
    // Проверяем, была ли ранее инициирована каптча
    if(form.is('[sm-captcha-applied]')) return;
    // Добавляем инициацию каптчи на событии focus
    form.find('[type=text], [type=tel], [type=email]').focus(function() {
        form.attr('sm-captcha-applied', '');
        // Добавляем уникальный для формы блок для отображения каптчи
        var containerId = 'captcha-container-'+(new Date).getTime();
        form.append('<div id="'+containerId+'"></div>');
        var renderCaptcha = function() {
            window.smartCaptcha.render(containerId, {
                sitekey: 'SMARTCAPTCHA_CLIENT_KEY',
                invisible: true
            });
        };
        if (!window.smartCaptcha)
            // Загружаем код каптчи
            $.getScript('https://captcha-api.yandex.ru/captcha.js', renderCaptcha);
        else
            renderCaptcha();
    });
}

ПРО подписка для работы с сервисом

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса