После подключения чата страница стала открываться медленнее. Совпадение по дате ещё не доказывает причину: в том же релизе могли измениться фото и код сайта. Сравните одну и ту же страницу с чатом и без его загрузки. Посмотрите отдельно время скачивания файлов и время выполнения JavaScript.
Что тормозит: загрузка, клик или чат
JavaScript чата скачивает дополнительные файлы и выполняется в браузере. Пока основной поток занят тяжёлым кодом, страница может поздно реагировать на клики. Официальная документация.
Чат может задерживать появление интерфейса, создавать тяжёлую работу после загрузки или тормозить только открытие своей панели. Запишите конкретное действие и видимый симптом. Не принимайте уменьшение общей оценки за объяснение причины. Сохраните версию страницы до подключения и состав текущего релиза. Если одновременно изменились первый экран, шрифты и код, сравнение двух дат не выделяет виджет. Сравнивайте одну сборку. В своём DevTools временно заблокируйте стартовый файл чата, оставив все остальные ресурсы доступными.
Какие условия оставить одинаковыми
| Режим | Что меняется | Как провести сравнение | Что смотреть в профиле |
|---|---|---|---|
| Виджет включён | Исходный режим | Сохранить профиль | Запросы и выполнение |
| Виджет заблокирован в тесте | Контрольный режим | Повторить условия | Не менять сборку |
| Два подключения | Дублирующий старт | Убрать лишнее | Функция сохраняется |
| Только async | Изменение загрузки | Проверить основной поток браузера | Проверить время выполнения JS |
В таблице укажите режим с виджетом, контроль без него, момент запуска и наличие согласия, если оно влияет на загрузку. Добавьте открытие панели после первого экрана. У стороннего сервиса могут меняться ресурсы между прогонами, поэтому сохраняйте реальные URL и время. Холодный и тёплый кеш держите раздельно. Если чат нужен важному пользовательскому действию, его отключение не является окончательной оптимизацией без продуктового решения. Блокировка помогает найти причину. Для постоянного решения согласуйте с владельцем сайта позднюю загрузку или замену чата, сохранив нужный способ связи.
Посмотрите сеть и выполнение кода
В Network сгруппируйте запросы провайдера и посмотрите инициатор. Один стартовый файл может загружать дополнительные файлы кода, шрифты и встроенные окна iframe. В Performance найдите выполнение их кода и связанную работу главного потока. Быстро скачанный скрипт способен долго обрабатываться; большой ответ не обязательно блокирует главное содержание. Сравните время появления нужного элемента и отзывчивость контрольного действия. Не суммируйте параллельные длительности запросов как задержку всей страницы. Проверьте, задержал ли чат появление основного текста или реакцию кнопки. Большой скачанный файл без такой связи ещё не объясняет торможение.
Отключите только чат в тестовом браузере
Сравните несколько загрузок с одинаковыми ограничениями сети и CPU, шириной окна и состоянием кеша. Для каждого режима запишите время появления основного текста, задержку контрольного клика и запросы чата. По профилям будет видно, исчезла ли тяжёлая задача вместе с виджетом. Если результаты сильно колеблются, повторите серию, прежде чем менять способ подключения.
В Network найдите стартовый JS чата. Через контекстное меню выберите Block request URL и включите Request blocking. Перезагрузите тестовую страницу с тем же профилем сети и запишите Performance. После сравнения снимите блокировку. Если основной сайт тоже сломался, этот опыт уже меняет больше, чем загрузку независимого чата.
Выберите момент загрузки чата
Если виджет необязателен для первого экрана, рассмотрите поздний старт или загрузку по намерению пользователя, сохраняя понятный доступ к функции. Async помогает не ждать скачивания в прежнем порядке, но выполнение остаётся работой браузера. Defer также имеет конкретную механику и не устраняет тяжёлый обработчик. Выбирайте вариант по найденному этапу задержки. Проверьте событие готовности провайдера, чтобы кнопка не выглядела активной до возможности открыть панель. Для аналитики отдельно сохраните нужный учёт событий, если изменение момента загрузки затрагивает её работу.
Уберите повторное подключение
Поищите повторное подключение через тему и менеджер тегов. Два экземпляра могут создавать лишние запросы, обработчики и панели. Проверьте поведение при недоступном провайдере: основной интерфейс не должен бесконечно ждать чат, если он не является необходимой частью действия. Это диагностируют на тестовой копии с контролируемой блокировкой или задержкой. Для проверки сбоя блокируйте провайдера только в своём браузере или на тестовой копии. Если сервис требует особой загрузки, сверяйте её с текущей официальной инструкцией провайдера, прежде чем самостоятельно переписывать стартовый файл.
Повторите загрузку и откройте чат
Профиль показывает, что найденная работа уменьшилась; основной интерфейс работает. Откройте панель чата без реального сообщения и проверьте готовность кнопки. После согласия пользователя, если оно требуется, виджет подключается один раз.
Читайте также: JavaScript оптимизация для производительности: полное руководство для веб-разработчиков и Скорость сайта и конверсия: сколько стоит каждая лишняя секунда загрузки. Проверки сайта доступны на странице технического аудита reChecker.