Как измерить влияние сторонних скриптов на скорость сайта

Как отделить сетевую задержку от нагрузки на основной поток, проверить виджеты по одному и подтвердить причину повторным замером.

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

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

Что именно может тормозить

Под «сторонним» удобно понимать код, за поведение которого отвечает внешний поставщик: чат, аналитика, рекламный пиксель, карта, видео, форма обратного звонка, A/B-тест или виджет отзывов. Файл при этом может загружаться с вашего домена — например, через прокси или контейнер тегов.

У замедления бывают разные механизмы:

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

Сначала определите симптом: медленно появляется главный блок, поздно становится доступна кнопка, интерфейс подвисает при действии или страница «прыгает». Это подскажет, какую часть профиля изучать.

Подготовьте воспроизводимый сценарий

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

Перед сравнением зафиксируйте:

  1. устройство, браузер и профиль без лишних расширений;
  2. состояние Cookie и согласия на аналитику;
  3. режим кэша и одинаковое сетевое ограничение;
  4. версию страницы, набор экспериментов и время серии;
  5. показатели загрузки и отклика, которые относятся к симптому.

Сделайте несколько базовых прогонов. Первый запуск после очистки кэша и повторный просмотр решают разные задачи, поэтому не смешивайте их. Сравнивайте типичные результаты, а не лучший одиночный замер.

Составьте карту поставщиков

Откройте DevTools, вкладку Network, включите запись и перезагрузите страницу. Для каждого подозрительного запроса отметьте домен, тип ресурса, инициатора и момент начала. Колонка Initiator и цепочка вызовов помогают увидеть, какой загрузчик породил запрос.

Затем запишите профиль во вкладке Performance. В представлениях Bottom-up и Call tree сгруппируйте работу по URL или домену: так видны функции, которые занимают основной поток. Отдельно проверьте участок вокруг нужного события — показа главного контента, клика или ввода.

| Наблюдение | Возможная причина | Что проверить | |---|---|---| | После небольшого загрузчика идут десятки запросов | контейнер запускает несколько интеграций | Initiator и дочерние домены | | Запрос завершился быстро, но затем есть длинная задача | тяжёлое выполнение JavaScript | Bottom-up и исходный URL функции | | После появления виджета сдвигается контент | место под блок не зарезервировано | события Layout Shift и размеры контейнера | | Кнопка запаздывает только после запуска интеграции | обработчик занимает основной поток | профиль вокруг клика и список событий | | Лабораторный тест стабилен, а жалобы остаются | сценарий зависит от устройства, сети или согласия | полевые данные и условие воспроизведения |

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

Отключайте по одному поставщику

Для безопасного эксперимента используйте блокировку запросов в DevTools, тестовый флаг интеграции или отдельную конфигурацию контейнера тегов. Не удаляйте код сразу на рабочем сайте.

Порядок проверки:

  1. заблокируйте один точный домен или шаблон URL;
  2. перезагрузите страницу в тех же условиях;
  3. убедитесь, что исчезли основной запрос и дочерние ресурсы;
  4. повторите исходный пользовательский сценарий;
  5. сравните профиль и выбранные метрики с базовой серией;
  6. верните интеграцию и проверьте, появляется ли эффект снова.

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

Параллельно смотрите Console и ключевые функции страницы. Исчезнувшая ошибка, форма или кнопка может создать ложное впечатление ускорения: браузеру стало легче, потому что часть сценария перестала работать.

Как отличить причину от совпадения

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

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

Что делать после подтверждения

Решение зависит от роли интеграции. Возможны отложенная загрузка после критического контента, запуск после согласия или действия, ограничение только нужными страницами, сокращение тегов в контейнере либо замена поставщика. Атрибуты async и defer не взаимозаменяемы во всех сценариях: перед изменением проверьте зависимости и порядок выполнения.

После правки повторите исходную серию и отдельно проверьте формы, оплату, аналитику, согласие на Cookie и сообщения об ошибках.

Где заканчивается такой тест

DevTools показывает лабораторный сценарий на конкретном устройстве. Он не доказывает, что все посетители получают тот же результат, и не заменяет полевые данные. Также профиль браузера не объясняет медленный TTFB: серверную задержку нужно диагностировать отдельно.

Web-Puls можно использовать для регулярной внешней проверки доступности и времени ответа критической страницы, но он не определяет, какой JavaScript занял основной поток. После исправления добавьте важный публичный URL в мониторинг, чтобы заметить новый сбой или замедление без ручных проверок.

Проверьте свой сайт прямо сейчас

Введите адрес сайта: Web-Puls покажет HTTP-код, время ответа и базовую диагностику. Для постоянного контроля можно подключить мониторинг.

Хотите видеть такую историю по своему сайту?

Добавьте сайт в Web-Puls: мы будем проверять доступность, SSL и содержимое страницы.