На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта.

Блокирующие скрипты

Часто на сайтах подключают скрипты из заблокированных соцсетей и сайтов. Это может быть:

1. Виджет соцсети, отображающий участников группы.

2. Подключение скрипта библиотеки для интеграции кнопки "Поделиться", который, в свою очередь, подключает скрипт запрещённой соцсети.

3. Скрипт авторизации через запрещённую соцсеть.

Доступ к этим соцсетям заблокирован через политику DENY, а не REJECT. Это значит, что браузер пользователя, отправит запрос на загрузку JavaScript файла и не получит ответа. Ожидание ответа будет "висеть" от 30 до 45 секунд. После этого браузер сбросит подключение.

Если скрипт загружается синхронно, а не асинхронно, то вызов события window.onload отложится на 30-45 секунд. Всё из-за того, что window.onload ожидает загрузку всех JavaScript файлов страницы, прежде чем отработать.

Поэтому следите, чтобы у вас не подключались файлы запрещённых соцсетей на сайте. Проверить их наличие можно 2 способами:

1. Отключить в своём браузере все плагины, блокирующие рекламу и защищающие от трекинга. Также отключить такую же защиту в настройках браузера. Открыть страницу и в инструментах разработчика проверить подвисшие скрипты.

2. Воспользуйтесь сервисом Сайт Аларм. Проверить наличие предупреждений в секции "Блокирующие файлы".

Тяжеловесные сервисы

Есть файлы,которые можно и нужно подключать по востребованию:

1. Каптчи. Общий объём файлов, загружаемой 1 каптчей около мегабайта. Правильным решением будет вызывать каптчу, в момент заполнения формы. То есть, когда вызывается событие focus у какого-либо поля.

2. Видео сервисы. Используйте фасады при отображении вставки видео в видеосервисов. Вот пример для youtube. Задача фасада отложить тяжеловесную загрузку кода плеера видео. При клике на видео, фасад подгружает код плеера. До этого момента фасад отображает только превью видео и кнопку плей.

3. Системы авторизации. Системы авторизации как VK ID или Yandex ID тяжеловесны. Но используются только на специальной странице входа либо во всплывающем окне. Подключайте скрипты систем авторизации отложено, в момент востребования, а не перманентно.

4. Карты. Если карты размещены на втором экране открываемой страницы и далее, то они становятся видны пользователю только после прокрутки страницы. Следовательно, нет смысла загружать их сразу. Лучше осуществлять их загрузку в событии window.onload. Причём именно window.onload, а не jQuery(document).ready или DOMContentLoaded, чтобы в первую очередь загрузить всё полезное содержимое сайта.

Проверить слишком ранее подключение таких файлов можно в сервисе. Информация будет в разделах "Преждевременная загрузка файлов" и "Использование JS фасадов".

Счётчики аналитических систем

В документации счётчиков пишут, что их надо подключать в секции head как можно раньше. Но скрипты счётчиков увесистые и требует много процессорного времени на обработку. Да, сейчас все системы аналитики подгружают свои скрипты асинхронно, но из-за их размера они всё равно значительно откладывают загрузку страницы.

Счётчики могут отложить загрузку страницы от 0.15 до 0.5 секунд. Это притом, что страница должна загружаться за 1 секунду и быстрее.

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

Вот так вот просто можно подключать счётчик гугла отложено. Достаточно обернуть его в функцию window.addEventListener("load", funcition() {}); и подгружать JavaScript через функцию (взята из счётчика яндекса).

<script>
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-QWE123123", "ga");
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-QWE123123');
});
</script>

Вся статистическая информация об этапах загрузки страницы всё равно берётся из window.perfomance. Поэтому подключая счётчики отложено, вы вряд ли повлияете на наполнение итоговых отчётов.

Расположение вызова JS файлов

Все файлы на страницы подгружаются в порядке их объявления в HTML коде. Логично в первую очередь загрузить CSS файлы и картинки первого экрана страницы. Это нужно, чтобы как можно раньше показать пользователю хоть какой-нибудь контент. Это удержит его внимание и не даст ему шанса отвлечься или сменить вкладку.

Если подключить скрипты вначале, а затем CSS файлы, то страница будет белой несколько секунд. Первая графика отобразится только после загрузки всех JavaScript файлов в очереди.

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

Долгое выполнение JS

Различные объёмные JavaScript файлы могут занимать длительное время на интерпретацию (аналог компиляции в JS). Также, JavaScript файлы могут попросту долго отрабатывать.

Чтобы бороться с этим, есть несколько способов:

1. Найдите "Узкое горлышко" с помощью профайлера. Профайлер firefox, профайлер chrome.

2. Подгружайте скрипты отложено. Уделите особое внимание тяжеловесным скриптам из одноимённого раздела этого поста.

3. Найдите неиспользуемые файлы. Отключите группировку JavaScript файлов в настройках сайта. Просканируйте ваш сайт в сервисе. Прокрутите к секции "Лишний JavaScript найден". Обратите внимание на файлы, у которых 90% кода не используется. Скорее всего, их подключения на странице можно избежать.

4. Почистите неиспользуемый JavaScript в уже существующих файлах. Как это сделать рассказано в этой статье.