Онлайн-чат для WordPress без замедления сайта
Большинство чатов уроняют LCP сайта на 300-800 мс — они тянут собственные шрифты, аналитику, иконки, все это блокирующе. Нотифлоу весит 35 КБ в gzip, грузится async и не подгружает внешних шрифтов. На обычной установке прирост LCP — 30-50 мс. С отложенной инициализацией до первого взаимодействия пользователя — 0 мс. Это и есть честный ответ на запрос «чат без замедления»: не маркетинговое «не влияет», а конкретные миллисекунды и приемы.
Почему многие чаты замедляют сайт?
Типичный «жирный» виджет тянет 200-400 КБ JavaScript на UI с полифиллами, 100-150 КБ собственных иконочных шрифтов и аватаров, 50-100 КБ CSS на старте плюс запросы к 2-3 сторонним сервисам аналитики. Все это считается в LCP, INP, TBT и Core Web Vitals: сайт, который без чата выдавал 95 в PageSpeed, после установки часто падает до 70. Гугл видит в этом ухудшение опыта, и ранжирование тоже страдает.
Легкие виджеты делают наоборот: 30-50 КБ кода, системные шрифты, CSS только под свернутую кнопку до клика, все остальное — лениво по требованию.
Что измерять: LCP, INP, TBT, размер JS
Пять метрик, по которым оценивают влияние чата на скорость.
| Метрика | Что значит | Целевое значение |
|---|---|---|
| LCP | Время рендера главного элемента страницы | < 2.5 с |
| INP | Задержка интерактивности (бывший FID) | < 200 мс |
| CLS | Сдвиги верстки | < 0.1 |
| TBT | Время блокировки главного потока | < 200 мс |
| Трансфер JS | Размер скриптов в gzip | < 300 КБ на страницу |
PageSpeed Insights (pagespeed.web.dev) показывает все пять. Запустите тест до установки чата — это ваш baseline. После установки запустите снова на той же странице и сравните.
Если LCP не вырос больше чем на 50 мс, INP остался в зеленой зоне, а CLS не сдвинулся — чат «не замедляет сайт» в честном смысле слова.
Сколько весит виджет Нотифлоу и как он грузится?
Boot loader Нотифлоу — 4 КБ gzipped, грузится синхронно в <head>. Он же асинхронно подгружает основной widget.js (35 КБ gzipped). До клика по иконке чата ничего больше не грузится.
После клика подгружаются:
- UI диалога (15 КБ gzipped) — рендер шапки, поля ввода, истории
- WebSocket-соединение к серверу для real-time
- аватар оператора (1 раз, ~3 КБ JPEG)
Итого до взаимодействия — 39 КБ. После клика — еще 18 КБ. Для сравнения, скрипт Google Analytics 4 — около 47 КБ только для трекинга, без UI.
Внешних шрифтов виджет не тянет — используются системные -apple-system, Roboto, sans-serif. Это и быстрее, и закрывает требование 152-ФЗ (нет данных, ушедших в Google Fonts).
Как отложить загрузку чата до взаимодействия пользователя?
Стандартная установка через плагин или вставку в header.php грузит виджет сразу при загрузке страницы. Это нормально для большинства сайтов.
Но если у вас идеальный PageSpeed 95+ и хочется его сохранить — отложите загрузку до первого скролла, движения мыши или 8 секунд:
<script>
function loadНотифлоу() {
if (window.notiflowLoaded) return;
window.notiflowLoaded = true;
var script = document.createElement('script');
window.nw = window.nw || function(){(window.nw.q=window.nw.q||[]).push(arguments)};
script.src = 'https://cp.notiflow.ru/js/widget.js';
script.async = true;
script.onload = function() {
nw('init', { apiKey: 'YOUR_API_KEY_UUID' });
};
document.head.appendChild(script);
}
['scroll', 'mousemove', 'touchstart', 'click'].forEach(function(event) {
window.addEventListener(event, loadНотифлоу, { once: true, passive: true });
});
setTimeout(loadНотифлоу, 8000);
</script>
Что происходит:
- скрипт ждет первого взаимодействия — клик, скролл, движение мыши, тап
- если 8 секунд никто не двигался — грузится сам по
setTimeout(страховка для тех, кто читает без действий) { once: true, passive: true }снимает обработчики после первого срабатывания и не блокирует скролл
LCP при этом подходе — нетронут. Виджет появляется через 50-100 мс после первого жеста пользователя — для UX это незаметно.
Сравнение веса виджетов: Нотифлоу vs популярные сервисы
Цифры — gzipped размер скриптов до клика по виджету, замер на пустой странице через DevTools Network в апреле 2026.
| Сервис | Размер JS до клика | Внешние шрифты | Async loader |
|---|---|---|---|
| Нотифлоу | 39 КБ | нет | да |
| LiveTex | 85 КБ | да (Roboto) | да |
| Jivo | 120 КБ | да (Open Sans) | да |
| Carrot Quest | 180 КБ | да (Inter) | да |
| Bitrix24 онлайн-чат | 240 КБ | да (PT Sans) | частично |
Числа меняются с каждым релизом — методику замера вы можете повторить сами: pagespeed.web.dev → ваш URL → раздел «Diagnostics → Reduce unused JavaScript».
Внешние шрифты и трекеры
Часть «жирности» чужих чатов — это аналитика и шрифты, подтянутые с CDN провайдера. Иногда это конфликтует с 152-ФЗ и точно бьет по Core Web Vitals. Нотифлоу не загружает Google Fonts, Sentry, Hotjar и сторонние трекеры — все скрипты живут на cp.notiflow.ru (серверы в РФ), шрифты системные, иконки SVG inline. Для CSP достаточно одного домена cp.notiflow.ru.
Совместимость с WP Rocket, LiteSpeed Cache, Autoptimize
Кэширующие плагины не трогают внешние скрипты — Нотифлоу им безразличен. Конфликт возникает только с агрессивной оптимизацией JavaScript, когда плагин пытается объединить, минифицировать или отложить чужой inline-скрипт.
Что обычно ломает виджет:
- Defer / delay JavaScript в WP Rocket → виджет не инициализируется
- JS Combine в LiteSpeed → loader разрывается с инициализацией
- Aggregate inline JavaScript в Autoptimize → потеря
nw('init')
Решение — добавить ключевое слово notiflow в исключения соответствующего раздела. После правки сбросьте кэш плагина.
Как замерить влияние чата на Core Web Vitals?
Полный цикл замера:
- Откройте pagespeed.web.dev, прогоните URL без чата (можно временно отключить плагин)
- Запишите baseline: LCP, INP, CLS, TBT
- Включите Нотифлоу, очистите кэш
- Прогоните тот же URL еще раз
- Сравните метрики
Если разница в LCP < 100 мс и в TBT < 50 мс — чат «не замедляет сайт». Если больше — у вас стоит конфликт с другими скриптами или плагин делает что-то странное. Откройте DevTools → Performance → запись загрузки и смотрите, какие скрипты блокируют главный поток.
Для долгосрочного мониторинга подключите Search Console → Core Web Vitals — там видно реальные данные пользователей за 28 дней, а не лабораторные замеры.
Часто задаваемые вопросы
Сколько весит скрипт Нотифлоу?
39 КБ gzipped до клика по виджету (loader + основной JS), плюс 18 КБ при открытии диалога. Это в 2-6 раз меньше типичных конкурентов.
Загружается ли виджет асинхронно?
Да. Loader-скрипт — всего 4 КБ синхронно в <head>, основной JS подключается через script.async = true. Рендер страницы не блокируется.
Можно ли отложить загрузку до клика?
Да, через скрипт-обертку с обработчиками первого взаимодействия (scroll, mousemove, touchstart). Пример кода — в разделе «Как отложить загрузку» выше. LCP при этом не меняется относительно сайта без чата.
Влияет ли чат на LCP?
При стандартной установке — рост на 30-50 мс. При отложенной загрузке — ноль. Это одни из лучших цифр на рынке среди русскоязычных чатов.
Совместим ли с PageSpeed-плагинами?
Совместим со всеми распространенными — WP Rocket, LiteSpeed Cache, W3 Total Cache, Autoptimize. При включенном JS Combine добавьте notiflow в исключения, иначе виджет может не инициализироваться.
Поставьте быстрый чат на WordPress — зарегистрируйтесь в Нотифлоу, используйте плагин или ручную установку с отложенной загрузкой. Полная инструкция — в статье установка на WordPress, сравнение с другими CMS — в установке на Tilda. Подробнее о виджете — на странице чата.