Вопрос к знатокам JavaScript. Какой прирост производительности от подключения внешних скриптов таким способом?

Question

[Петр Волханов]

Вопрос к знатокам JavaScript. Какой прирост производительности от подключения внешних скриптов таким способом?

Например подключение Гугл Аналитики дает какой-то плюс по сравнению с обычным добавлением:

<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1" async></script>

<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1" defer></script>

Или динамически подключаемый тот же самый скирпт?

function addExternalCodeAsync(){
                var fired = false;
                if (fired == false) {
                    fired = true;
                    setTimeout ( () => {
                        var GTMObject = document.createElement("script");
                        GTMObject.src = "https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1";
                        GTMObject.async = true;
                        document.getElementsByTagName('head')[0].appendChild(GTMObject);
                        window.dataLayer = window.dataLayer || [];
                        function gtag() {dataLayer.push(arguments);}
                        gtag('js', new Date());

                        gtag('config', 'UA-XXXXXXXXX-1');

                        setTimeout(function () {
                            gtag('event', location.pathname, {
                                'event_category': 'Новый посетитель'
                            });
                        }, 10000);
                    }, 5000);
                }
            }

Answer 1

[Alex Karo]

В первом случае парсинг html остановится, загрузится и выполнится скрипт gtag, после этого парсинг продолжится
Во втором случае:
1) Загрузка начнется только после того, как отработает этот код. Плохо потому, что контент сайта (обычно) важнее скриптов аналитики и его стоит отобразить первым.
2) Загрузка скрипта gtag не будет блокировать разбор html ввиду аттрибута async - этот код будет выполнен после того, как будет загружен

В принципе, можно и в первом случае добавить аттрибут async тегу script и это улучшит скорость загрузки
Советую глянуть инфу по аттрибутам async/defer

Comments

[Петр Волханов]

Чуть исправил вопрос, но за ответ - большое спасибо

[Михаил]

Петр Волханов, можно поставить загрузку аналитики на скролл

[Петр Волханов]

Михаил, так и стоит

window.addEventListener('scroll', addExternalCodeAsync());

[Stalker_RED]

Петр Волханов, это ужас :)

window.addEventListener('scroll', addExternalCodeAsync()); // функция выполнится сразу, а при скролле ничего не сработает, потому что там null
window.addEventListener('scroll', addExternalCodeAsync); // сразу не выполнится, но при скролле будет выполнятся десятками штук, потому что fired всегда false

И вообще, fired не нужен, замените на removeEventListener

[Михаил]

Петр Волханов, Stalker_RED,

setTimeout(() => {
  window.addEventListener('scroll', function() {
    // ...
  }, { once: true });
}, 100);

setTimeout потому что с перезагрузкой/возвращением назад/ссылка с хешем вызовет скролл
once: true ну очевидно

Answer 2

[Артем Андреев]

Не нужно откладывать загрузку аналитики никаким способом. Снесите все счётчики и если все загружается ок, то лучше вы не сделаете и будет только кривая статистика. У Яндекс метрики показатель отказов на 15 секунд стоит. Ставьте async и все. Единственное что там реально грузит страницу - это Яндекс метрика. Написали выше, что контент важнее, поспорю, важна и аналитика и контент