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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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