Преждевременная загрузка файлов

При загрузке страницы выполняются 2 события: DOMContentLoaded и load. Первое событие вызывается, когда загружен HTML и JavaScript файлы (за исключением асинхронных). Именно на событие DOMContentLoaded реагирует jQuery функция $( handler ). Событие load вызывается, когда помимо HTML и JavaScript загружены все картинки и CSS файлы.

Все файлы в страницы загружаются в том порядке, в котором они перечислены на страницы. Но есть возможность загружать JavaScript вне очереди, параллельно. Это называется асинхронной загрузкой. Большинство внешних сервисов, такие как системы аналитики, онлайн консультанты, капчи, карты, различные рекламные счётчики загружаются асинхронно, чтобы не откладывать загрузку визуального контента и JavaScript файлов самого сайта. Это немного ускоряет загрузку, но всё равно этот асинхронный JavaScipt нагружает интернет-канал и вычислительные мощности устройства. То есть, даже асинхронные скрипты замедляют загрузку визуального контента.

Поэтому, все вспомогательные внешние сервисы лучше загружать как можно позже. Рекомендуем распределить загрузку страниц на следующие этапы:

Загрузка через объявление в HTML коде страницы

Шрифты.
Картинки и любой другой контент на первом экране. Например, если на первом экране есть карта, то её загружаем картографические сервисы сразу.
CSS стили, отвечающие за визуал страницы.
JavaScript файлы, отвечающие за функционал страницы.

Загрузка в событии DOMContentLoaded

Отложенная загрузка картинок. Большинство плагинов отложенной загрузки вешают свои обработчики именно на событие DOMContentLoaded.
Вся логика страницы. Например, обработчики валидации формы, кликов по кнопкам и т.д. Когда вы указываете в jQuery обработчик события $( handler ) для того, чтобы повесить события onhover или onclick на кнопки, то этот код исполняется именно во время DOMContentLoaded.

Событие load

Счётчики, онлайн консультанты, карты, системы сторонней авторизации (VK ID, Yandex ID и т.д.) нужно загружать именно на этом этапе, чтобы они вообще никак не замедляли загрузку страницы. Сделать это лучше с помощью конструкции javascript window.addEventListener("load", (event) => { setTimeout(function() { // Тут вызов кода загрузки }, 50); }); или jQuery версия javascript $(window).on("load", function(event) { setTimeout(function() { // Тут вызов кода загрузки }, 50); })
Капчи нужно загружать в момент начала заполнения формы. То есть, по событию focus поля формы.
Всякие системы аналитики, кроме основной, также стоит загружать через это события. Например, если вы используете Yandex метрику и Google аналитику, то Yandex метрику можете загрузить сразу, а Google аналитику через конструкцию, показанную в первом пункте.

◀ Долгий JavaScript Адаптация вёрстки под монитор компьютера ▶

Есть замечания или дополнения? Напишите нам на почту admin@quick-site-upgrade.com.

Проверьте ваш сайт