Сторонние скрипты - чаты, счётчики аналитики, рекламные пиксели, карты, виджеты отзывов и кнопки соцсетей - часто съедают больше половины времени загрузки сайта. Каждый виджет тянет свой код с чужого сервера, исполняет его на устройстве посетителя и нередко дотягивает ещё десяток запросов следом. Решение - аудит: измерить вклад каждого скрипта, убрать мёртвые, а нужные грузить отложенно, после того как страница уже показана.

Типичная картина. За 3-4 года на сайте оседают два счётчика аналитики (старый и новый), три рекламных пикселя от прошлых подрядчиков, чат, который никто не читает, и виджет обратного звонка из 2022 года. Каждый по отдельности «лёгкий», вместе - плюс 2-4 секунды к загрузке и сотни килобайт кода на каждом хите.

Почему один маленький виджет замедляет весь сайт

Виджет - это не одна строчка кода, которую вам дали вставить. Строчка загружает скрипт-загрузчик, тот тянет основную библиотеку, стили, шрифты и делает запросы к своему API. Типичный чат-виджет - это 300-700 КБ кода и 10-20 сетевых запросов. Исполняется всё это на устройстве посетителя, и сильнее всего страдают смартфоны - почему именно они, мы разобрали в статье про тормоза на телефоне.

Хуже того: скрипт, вставленный синхронно в шапку, блокирует отрисовку - пока чужой сервер не ответит, посетитель смотрит на белый экран. Если сервис виджета ляжет, ваш сайт будет «висеть» вместе с ним, хотя ваш хостинг здоров.

Как измерить, сколько скорости съедает каждый скрипт

  1. Откройте PageSpeed InsightsРаздел «Сократите влияние стороннего кода» перечисляет чужие скрипты с временем блокировки каждого. Как читать остальной отчёт - в статье про PageSpeed Insights.
  2. Проверьте вкладку NetworkF12, фильтр JS, сортировка по размеру: сразу видно, чей код самый тяжёлый и с каких доменов он приезжает.
  3. Сделайте контрольный замер без виджетовЗаблокируйте сторонние домены в DevTools (Network request blocking) и замерьте скорость снова. Разница между «с виджетами» и «без» - честная цена вашего зоопарка.
  4. Составьте список с ответственнымиПо каждому скрипту: что делает, кто им пользуется, когда добавлен. Треть позиций обычно не может объяснить никто - это кандидаты на удаление.

Что делать с нужными виджетами: грузим без тормозов

  • Отложенная загрузка - атрибуты async и defer, чтобы скрипты не блокировали отрисовку страницы
  • Загрузка по взаимодействию - чат подгружается при клике на кнопку или через несколько секунд после отрисовки, а не в первый же момент
  • Ленивые карты - вместо живой карты показывается картинка-заглушка, настоящая карта грузится по клику
  • Единый менеджер тегов - все пиксели и счётчики через Google Tag Manager или аналог: один загрузчик вместо пяти и порядок в голове
  • Фасады для видео - превью вместо встроенного плеера YouTube: сам плеер с его мегабайтами грузится по клику

Проведём ревизию скриптов на сайте

Найдём все сторонние коды, замерим вклад каждого, удалим мёртвые и настроим отложенную загрузку живых. Обычно это минус 1-3 секунды загрузки без потери функций.

Убрать тормоза от виджетов

Как не набрать зоопарк заново

Заведите простое правило: каждый новый виджет проходит через три вопроса. Какую задачу он решает и чем измерим результат? Кто его владелец и когда пересмотрим необходимость? Сколько он стоит в миллисекундах (замер до и после установки)? Плюс раз в полгода - ревизия: маркетинговые инструменты меняются, а их скрипты остаются на сайте навсегда, если их не выносить сознательно.

Совет. Не вставляйте коды виджетов прямо в шаблон сайта. Подключайте их через менеджер тегов или единое подключаемое место в шаблоне - тогда ревизия занимает минуты, а не поиски по всем файлам проекта, и старые пиксели не живут годами незамеченными.
Половина «медленных сайтов», которые к нам приходят на аудит, ускоряются на треть простым удалением скриптов, которыми никто не пользуется. Это самая дешёвая оптимизация из существующих.Команда Alavir

Сколько стоит ревизия скриптов и что вы получаете

Аудит стороннего кода с замерами вклада каждого виджета - 100-200 BYN, полный пакет с удалением мёртвых скриптов, переносом живых в менеджер тегов и настройкой отложенной загрузки - 200-500 BYN в зависимости от размера зоопарка. На выходе - таблица «скрипт, владелец, назначение, цена в миллисекундах», чистый шаблон без археологических слоёв и замеры скорости до и после.

Отдельная ценность такой ревизии - безопасность. Забытый скрипт прошлого подрядчика - это чужой код, который исполняется у ваших посетителей и имеет доступ к содержимому страниц, включая данные форм. Историй, когда заброшенный виджет начинал подгружать рекламу или майнер после смены владельца сервиса, в отрасли достаточно. Меньше чужого кода - меньше поверхность атаки.

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

Можно ли отложить загрузку Яндекс Метрики и Google Analytics?
Можно и нужно: счётчики не обязаны грузиться до контента. При отложенной загрузке на 1-2 секунды вы почти не теряете данных (недосчитаетесь только мгновенных отказов), а страница показывается заметно быстрее. Целевые события и конверсии фиксируются как раньше.
Чат приносит заявки - не потеряем ли мы их, отложив его загрузку?
Нет. Посетитель физически не успевает написать в чат в первые две секунды - он ещё не прочитал заголовок. Загрузка чата после отрисовки страницы или по клику на кнопку сохраняет все обращения и убирает самый тяжёлый скрипт из критического пути.
Сколько сторонних скриптов - это нормально?
Дело не в количестве, а во времени блокировки: PageSpeed показывает его по каждому скрипту. Рабочий ориентир - суммарное влияние стороннего кода до 250-500 мс. Аналитика, один чат и один пиксель в такой бюджет помещаются, пять пикселей и три виджета - уже нет.
Виджет вставил подрядчик по рекламе - можно ли его трогать?
Согласуйте, но не оставляйте как есть: подрядчику важно, чтобы пиксель собирал события, а не чтобы он грузился синхронно в шапке. Отложенная загрузка через менеджер тегов устраивает обе стороны - и рекламу, и скорость.

Итог: сторонние скрипты - это арендаторы вашей скорости, и без ревизии они размножаются. Закажите аудит в Alavir: в рамках доработки сайта найдём всех «арендаторов», выселим лишних и настроим остальных так, чтобы сайт снова летал. Если сайт на нашей абонентской поддержке, такая ревизия входит в регулярные работы.