Виджеты и скорость сайта

«Виджет замедлил сайт» — фраза, за которой почти всегда стоит не один виджет, а семь. Разбираем, что на странице действительно тормозит, а что нет.

С чего начинается путаница

Владелец сайта ставит чат, через неделю сайт открывается на секунду дольше, и вывод напрашивается сам: виноват чат. Часто это не так. За тот же месяц на сайт могли добавить баннер с акцией, форму подписки, второй счётчик аналитики и виджет отзывов — и каждый добавлял свою строку кода. Когда скриптов на странице пять и больше, найти виновника на глаз невозможно, а крайним чаще всего назначают тот, что поставили последним.

Что такое defer и почему он не блокирует отрисовку

Браузер читает HTML-страницу сверху вниз и по пути встречает теги <script>. Обычный скрипт без пометок останавливает чтение страницы, пока не загрузится и не выполнится — отсюда старое правило вставлять скрипты в конец страницы, а не в шапку. Атрибут defer решает это иначе: браузер загружает файл скрипта параллельно с чтением остальной страницы, но выполняет его только после того, как вся HTML-разметка разобрана. Пользователь видит текст, кнопки и картинки, не дожидаясь, пока довыполнится сторонний код.

Строка вида <script src="..." defer></script> — это и есть тот случай. Виджет чата на сайте подключается ровно так, и подробно про сам код и место установки написано в статье как подключить чат на сайт. Смысл defer именно в порядке: сначала показать страницу, потом догрузить то, что не нужно для первого экрана.

Чем опасен набор из пяти виджетов сразу

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

Второй риск — дублирование задач. Два счётчика аналитики, поставленные в разное время и оба забытые, чат и отдельная форма обратной связи, делающие примерно одно и то же, — каждый добавленный виджет должен окупать своё место на странице, а не просто существовать по инерции с прошлого года.

Как проверить свой сайт

Не нужен отдельный инструмент — в браузере он уже есть. В инструментах разработчика (обычно клавиша F12) есть вкладка «Производительность» или «Network»: там видно, сколько весит каждый файл на странице и сколько времени браузер тратит на его выполнение. Отдельно полезны публичные сервисы проверки скорости — они показывают конкретные метрики загрузки, а не общее ощущение «быстро или медленно». Проверять стоит не только десктопную версию, но и мобильную: у большинства сайтов именно на телефоне и при более слабом соединении разница между аккуратным набором скриптов и захламлённым становится заметна глазу, а не только в цифрах отчёта.

Как читать результат

Итоговая оценка в баллах — самая заметная цифра отчёта, но самая бесполезная для поиска причины. Полезнее конкретные метрики: время до появления основного контента страницы и время, которое главный поток браузера был занят выполнением скриптов и не мог отреагировать на действие пользователя. Если в отчёте указано, какой именно скрипт занял больше всего этого времени, — вот он и есть кандидат на разбор, а не тот виджет, который поставили последним и потому запомнили.

«Виджет замедлил сайт» обычно значит другое

На практике за этой фразой чаще стоит накопленный список из пяти-семи скриптов, а не один конкретный виновник. Убрать все виджеты — не решение: часть из них приносит реальную пользу, и без чата на сайте, например, часть посетителей просто не оставит вопрос и уйдёт молча. Разумнее пройтись по списку установленных скриптов и честно спросить про каждый: пользуются ли им сейчас, или он остался с прошлой акции. Наш загрузчик весит около десяти килобайт и подключается с defer — то есть не входит в число скриптов, которые стоит подозревать первыми, но и он занимает своё место в общем списке, который время от времени стоит пересматривать.

Чего проверка скорости не решает

Быстрый отчёт о скорости не заменяет решения о том, какие виджеты вообще нужны сайту — это вопрос не про технику, а про то, чем пользуются посетители. И defer не спасает от тяжёлого скрипта: если код после загрузки строит сложную структуру на странице или держит соединение открытым, отложенный старт лишь сдвигает момент нагрузки, а не убирает её. Разница между виджетом с defer и без него — это разница в порядке, а не в объёме работы, которую скрипту в итоге придётся выполнить. Что из функций виджета можно включить или выключить, чтобы он делал ровно то, что нужно сайту, — на странице возможностей.

Частые вопросы

Замедлит ли чат загрузку сайта, если поставить его с defer?

На отрисовку страницы — нет, браузер покажет контент раньше, чем выполнит отложенный скрипт. На вес страницы в мегабайтах — да, но обычно на несколько килобайт, что для современных каналов связи не критично.

Как понять, какой из виджетов виноват в медленной загрузке?

Открыть вкладку «Производительность» в инструментах разработчика браузера и посмотреть, чей скрипт занимает время на главном потоке дольше остальных — виновник обычно виден сразу.

Стоит ли убирать виджеты вообще ради скорости?

Не обязательно. Чаще достаточно оставить те, которыми правда пользуются, и убрать дубли — например две формы подписки или два счётчика аналитики, поставленных в разное время и забытых.

Читайте дальше