Скриншот-мониторинг сайта в Tracker.ru — это автоматические снимки страницы и попиксельное сравнение через pixel diff. Если внешний вид страницы изменился сильнее заданного порога, приходит уведомление со свежим скриншотом и подсвеченными областями. Это закрывает класс инцидентов, которые обычный HTTP-чек не ловит: сервер возвращает 200 OK, а пользователь видит белый экран, антибот-заглушку Cloudflare, упавший JS-бандл, подменённую платёжную форму или дефейс.
Если ваша задача — мониторинг сайта со скриншотами, мониторинг визуальных изменений сайта или мониторинг изменений вёрстки между релизами — этот лендинг про функцию /features/screenshot-monitoring. Для технических деталей алгоритма заглядывайте в /docs/features/screenshots, про тарифы — /pricing.
Что такое скриншот-мониторинг и зачем он нужен?
Обычный uptime-мониторинг проверяет HTTP-статус: пришёл 200 OK — значит, сайт работает. На практике этого недостаточно. Сервер может отвечать корректным статусом, а реальный пользователь — видеть совершенно другую страницу: пустой экран после того, как упал основной JS-бандл, надпись «Платёжная форма временно недоступна», CAPTCHA-стенку Cloudflare или съехавшую вёрстку из-за пропавших шрифтов с CDN.
Мониторинг скриншотов сайта решает эту слепую зону. Скриншот-мониторинг — это регулярные снимки страницы и попиксельное сравнение с предыдущей версией. Если внешний вид изменился сильнее заданного порога — пользователь получает уведомление с двумя картинками: «было» и «стало». В английской литературе этот класс задач называется screenshot monitoring, visual regression monitoring или screenshot diff service — речь идёт об одной и той же функции с разными формулировками.
В Tracker.ru скриншот-мониторинг встроен в обычный uptime: не нужно подключать сторонний сервис, разворачивать Playwright или собирать pipeline. Включается переключателем на странице URL, работает рядом с HTTP-проверками, использует тот же баланс уведомлений в Telegram, email и webhook'ах.
Как pixel diff детектирует визуальные изменения?
Pixel diff сайта в Tracker.ru работает по классическому и предсказуемому алгоритму, без ML-эвристик: каждый пиксель сверяется по четырём каналам RGBA с допуском в 10 единиц на канал — этого достаточно, чтобы отсечь шум антиалиасинга шрифтов и микроартефакты PNG-сжатия. Различающиеся пиксели группируются по связности, мелкие группы (меньше 100 пикселей) выбрасываются как шум — мерцание курсора, сдвинутая на пиксель тень, моргающий рекламный плейсхолдер. Итоговый процент изменения округляется до 0.01% и сравнивается с порогом, заданным для конкретного URL.
Если pixel diff превысил порог, в уведомление добавляется не только число, но и сама diff-картинка: исходный скриншот с красной подсветкой изменившихся областей. Это решает основную задачу pixel diff сервиса — за полсекунды показать, что именно изменилось, а не заставлять разработчика вручную сравнивать «было/стало». Подробное пошаговое описание шагов алгоритма, параметров и порогов — в /docs/features/screenshots.
Когда скриншот-мониторинг спасает: 6 реальных сценариев
Pixel diff мониторинг закрывает конкретные инциденты, которые в продакшене встречаются регулярно — и каждый из них стоит часов простоя или потери конверсии, если о них узнают по жалобам пользователей.
1. Visual regression после деплоя. Релиз выкатил новую сборку, css-сломанный — поплыли отступы на главной, заголовок съехал за вьюпорт, кнопка покупки спряталась под футер. Сервер отвечает 200 OK, аналитика конверсии покажет проседание только через несколько часов. Скриншот-мониторинг видит расхождение сразу после ближайшего снимка: появляется уведомление с diff-картинкой, разработчик откатывает релиз за минуты.
2. Дефейс или подмена контента. На странице появляется неожиданный баннер, JS-редирект на сторонний домен, инжектированный скрипт майнинга. HTTP-чек не отличает «нашу» главную от «не нашей» — она же отвечает 200. Pixel diff фиксирует факт визуального изменения и помечает страницу как изменившуюся, что критично для security-периметра. Мониторинг дефейса сайта на pixel-diff — рабочая практика, которую часто применяют для лендингов, форм оплаты и личных кабинетов.
3. Антибот-заглушка / CAPTCHA вместо контента. Cloudflare или внутренний WAF включил защитный режим. Реальный пользователь видит «Checking your browser…» или CAPTCHA — но HTTP-статус формально остаётся 200. Скриншот покажет это сразу: вместо привычной главной — серая страница с проверкой.
4. Упавший JS-бандл и пустой root. Ошибка в JS, падение CDN с реактом, конфликт версий — <div id="app"> остался пустым. HTML отдан, JS висит, сайт визуально пуст. Pixel diff между «работающим» снимком и пустой страницей — почти 100%, уведомление приходит сразу.
5. Ассеты 404 и поплывшая вёрстка. Деплой переименовал CSS-бандл, старый путь в HTML остался, шрифты пропали. Сайт работает, но выглядит как сайт 1998 года. Это типичный случай для проверки изменений вёрстки сайта — HTTP-чек ничего не заметит, скриншот заметит сразу.
6. Подмена платёжной формы. Stripe / CloudPayments / другой провайдер перешёл в режим «временно недоступно» и отрисовал заглушку вместо полей карты. Конверсия в оплату обнуляется, никто из команды не понимает почему. Pixel diff увидит, что визуальный блок формы поменялся, и подсветит зону.
В каждом из этих случаев общий паттерн один: HTTP-проверка возвращает 200, диагностика по логам неинформативна, проблему видит только живой пользователь. Скриншот-мониторинг автоматизирует именно эту проверку «как сейчас выглядит сайт».
Чем Tracker.ru отличается от Checkly, BrowserStack, Uptime Kuma + Playwright?
На рынке несколько сервисов, которые умеют работать со скриншотами, но цели и цены у них разные.
Checkly. Сильный сервис synthetic-мониторинга. Visual regression / screenshot diff — фича Team-плана, который начинается от $64/мес (Starter за $24 эту функцию не включает; данные актуальны на 2026-05). Оплата только в долларах, без российских платёжных методов. Подходит для команд, которые уже используют Checkly для browser checks и не хотят отдельный сервис под скриншоты.
BrowserStack. Заточен под ручное и автоматизированное QA в разных браузерах. Это не uptime-инструмент: BrowserStack не разбудит дежурного ночью, если на проде поплыла вёрстка. Хорош для pre-release тестирования, но не для непрерывной проверки в продакшене.
Uptime Kuma + Playwright. Self-hosted связка: бесплатно по лицензии, но pixel-diff из коробки нет — нужно собирать вручную (сценарии, хранилище скриншотов, движок сравнения, уведомления, инфраструктура с Chromium, обновления). Подходит для команд, которые готовы инвестировать инженерные часы в свой инструмент мониторинга.
Tracker.ru. Скриншот-мониторинг встроен в обычный uptime — не отдельный сервис, не отдельная подписка. Оплата в рублях, нативный Telegram-бот, диалог поддержки на русском. Свежий скриншот автоматически прикладывается к уведомлению о восстановлении сайта — чтобы дежурный сразу видел, как страница выглядит после починки. Нацелено на российские команды и компании в евразийском периметре, которым важны фиксированные тарифы в рублях и быстрая интеграция без построения собственного pipeline.
Сколько стоит и какие лимиты на тарифах?
Скриншот-мониторинг доступен на платных тарифах. Лимит складывается из двух чисел: сколько мониторов одновременно могут снимать скриншоты и сколько всего скриншотов делается за месяц.
| Тариф | Мониторов со скриншотами | Скриншотов в месяц | Цена |
|---|---|---|---|
| Free | 0 | 0 | 0 ₽ |
| Basic | 2 | 10 | 290 ₽/мес |
| Pro | 10 | 50 | 790 ₽/мес |
На тарифе Free скриншоты не входят — он подходит для базового uptime-мониторинга. На Basic и Pro можно включить скриншоты для нужных URL и выбрать частоту: 1, 6, 12 или 24 часа (это все доступные значения, более частые интервалы для скриншотов не предусмотрены — pixel diff заточен под периодический контроль, не под мгновенную реакцию на каждый отрисованный кадр). Дополнительно при восстановлении сайта после инцидента в уведомление автоматически добавляется свежий снимок — он расходует общую квоту тарифа.
Подробнее про тарифы и оплату — на странице /pricing. Если нужны кастомные лимиты — напишите в поддержку.
Часто задаваемые вопросы
Чем визуальный мониторинг отличается от обычного uptime-мониторинга?
HTTP-проверка смотрит код ответа сервера: пришёл 200 OK — значит формально всё работает. Скриншот-мониторинг смотрит, как страница выглядит для пользователя. 200 OK плюс белый экран, антибот-заглушка или подменённая платёжная форма — это инцидент, который ловит только pixel diff. По сути это два разных уровня контроля: HTTP-проверка отвечает на вопрос «сервер отдаёт страницу?», скриншот — «страница выглядит так, как должна?».
Можно ли поймать дефейс через скриншот-мониторинг?
Да. Любое видимое изменение на странице — баннер, неожиданный JS-инжект, подмена логотипа, редирект через JS — попадает в pixel diff и вызывает уведомление, если процент изменения превышает порог, заданный в настройках URL. Для лендингов и страниц оплаты обычно ставят низкий порог (1–5%), для динамичных главных — выше (10–20%), чтобы не получать ложные срабатывания на меняющиеся блоки.
Скриншоты делаются с разных регионов?
Нет. В отличие от HTTP-проверок, которые опрашивают URL из msk/eu и других регионов, скриншоты делает одна выделенная локация. На каждый URL снимается один скриншот, а не по одному с каждого региона. Это сделано осознанно: pixel diff считается между последовательными снимками одного и того же URL во времени, а не между регионами — так детектируются временные изменения, не геозависимости рендеринга.
Сколько скриншотов в каких тарифах?
На Free скриншотов нет — 0 мониторов и 0 снимков в месяц. На Basic за 290 ₽/мес доступно 10 скриншотов в месяц для 2 мониторов. На Pro за 790 ₽/мес — 50 скриншотов в месяц для 10 мониторов. Подробнее на странице /pricing.
Что такое visual regression monitoring и screenshot diff service по-английски?
Это синонимы для одной задачи. Screenshot monitoring — общий термин, visual regression monitoring подчёркивает фокус на регрессии после деплоя, screenshot diff service делает акцент на инструменте с pixel-diff. Tracker.ru закрывает все три формулировки — снимаем скриншоты регулярно и при восстановлении, считаем pixel diff с тонкой настройкой порога на URL, отправляем diff-картинки в уведомления.
Когда именно делается скриншот?
По расписанию — на выбор 1, 6, 12 или 24 часа (это четыре фиксированных пресета, более частые интервалы не предусмотрены). Дополнительно — при восстановлении сайта после инцидента: чтобы в уведомлении о recovery был свежий скриншот для быстрой визуальной проверки. При падении сайта скриншот не снимается автоматически — триггер только recovery, чтобы не плодить шумовые снимки в момент сетевой нестабильности.
Можно ли отключить скриншоты для конкретного URL?
Да. На странице URL в разделе «Скриншоты» есть переключатель: лимит=0 — снимки не делаются, квота тарифа на этот URL не расходуется. Так удобно отключать скриншоты для очень динамичных страниц (главная новостного сайта, дашборд с графиками), где любое сравнение по pixel diff заведомо шумное.
Включить мониторинг визуальных изменений сайта — /sign-up. Технические детали алгоритма pixel diff и параметры — в документации /docs/features/screenshots. Сравнить тарифы — /pricing.