frontendperf Связаться

мониторинг frontendperf · инструкция для магазина

Установка за 10 минут

Одна строка в <head> — и через пару минут в панели появятся первые просмотры. Всё остальное на этой странице необязательно, но делает отчёт точнее.

Что собираем и чего нет

Скрипт весит 8 КБ, грузится асинхронно и не тормозит страницу. Он замеряет каждый просмотр у реальных покупателей: появление первого экрана (LCP), отклик на клики и ввод (INP), сдвиги вёрстки (CLS), ответ сервера и то, какие сторонние скрипты мешают странице.

Без cookies и постоянных идентификаторов. IP не сохраняем, из адресов страниц вырезаем email, телефоны и номера заказов. Данные хранятся в Европе и не передаются третьим лицам.

1 Сниппет — в <head> всех страниц

<script src="https://app.frontendperf.ru/s/КЛЮЧ.js" async></script>

Ставьте как можно выше в <head>, до остальных скриптов: чем раньше скрипт начнёт работу, тем точнее замер первого экрана.

Данные принимаются только с домена магазина (и его поддоменов), указанного при подключении. Со staging- и тестовых доменов маяки отклоняются — если нужен ещё один домен, напишите.

1С-Битрикс

В шаблоне сайта, в header.php (обычно /local/templates/<шаблон>/header.php или /bitrix/templates/<шаблон>/header.php), перед <?$APPLICATION->ShowHead();?>:

<script src="https://app.frontendperf.ru/s/КЛЮЧ.js" async></script>

Или в init.php, чтобы не трогать шаблон:

\Bitrix\Main\Page\Asset::getInstance()->addString(
    '<script src="https://app.frontendperf.ru/s/КЛЮЧ.js" async></script>'
);

После правки сбросьте кэш шаблона.

InSales, Tilda и другие конструкторы

Настройки сайта → «Код в <head>» (называется по-разному: «Счётчики», «HTML-код для вставки в head»). Вставьте сниппет целиком.

Google Tag Manager

Тег → «Пользовательский HTML» → сниппет → триггер «Initialization — All Pages». Работает, но GTM загружается позже самого сайта, и часть ранних замеров теряется. Если есть доступ к шаблону — ставьте напрямую.

SPA: React, Vue, Next.js, Nuxt

Сниппет — в index.html или в <Head> корневого шаблона (_document, app.vue). Переходы без перезагрузки страницы отслеживаются сами: каждый переход — отдельный просмотр.

2 Типы страниц

Отчёт строится по типам страниц: главная, каталог, карточка товара, поиск, корзина, оформление, личный кабинет. Типовые адреса (/catalog/…, /product/…, /cart/, /order/…, /personal/…) распознаём сами. Если у вас другая структура адресов — укажите тип явно:

<html data-page-type="pdp">

Значения: home, listing (каталог, категория), pdp (карточка товара), search, cart, checkout, account, other. Или пришлите нам несколько адресов каждого типа — настроим правила сами.

3 Покупки и деньги

Чтобы посчитать «скорость → конверсия → рубли», нужны события покупки. Если на сайте уже настроена электронная коммерция GA4 (dataLayer.push({event: 'purchase', ecommerce: {…}})) или Яндекс Метрики (dataLayer с ecommerce.purchase), ничего делать не нужно — события подхватятся сами.

Иначе — пара строк на странице «Спасибо за заказ»:

<script>
  window.perf = window.perf || function () { (perf.q = perf.q || []).push(arguments) };
  perf('event', 'purchase', { value: 4500, currency: 'RUB' });
</script>

Первая строка — очередь: вызовы perf(…) до загрузки основного скрипта не теряются.

4 Релизы необязательно

Чтобы видеть, какой релиз замедлил сайт, передавайте версию:

<script src="https://app.frontendperf.ru/s/КЛЮЧ.js" data-release="2026.10.21" async></script>

или perf('release', 'v1.42.0'). Новая версия появится на графиках вертикальной линией. Если ничего не передавать, мониторинг всё равно заметит изменения, но без привязки к релизу.

5 Важные элементы необязательно

Время появления конкретного элемента — главного баннера, фото товара, кнопки «В корзину»:

<img src="…" data-perf="product_photo">

7 Прокси на своём домене рекомендуем

Блокировщики рекламы (uBlock, AdGuard) режут запросы к сторонним доменам: без прокси вы не увидите 10–30 % посетителей. Прокси на вашем домене это решает — запросы идут на shop.ru/_p/…, а ваш сервер пересылает их нам. Cookie магазина при этом не передаются.

Nginx — внутри server { } магазина

# приём замеров: браузер шлёт на shop.ru/_p/i
location = /_p/i {
    proxy_pass https://i.frontendperf.ru/i;
    proxy_http_version 1.1;
    proxy_ssl_server_name on;
    proxy_set_header Host i.frontendperf.ru;
    proxy_pass_request_headers off;
    proxy_set_header Content-Type $http_content_type;
    proxy_set_header User-Agent $http_user_agent;
    proxy_set_header Origin $http_origin;
    proxy_read_timeout 5s;
    client_max_body_size 16k;
}

# скрипт: shop.ru/_p/z.js
location = /_p/z.js {
    proxy_pass https://app.frontendperf.ru/s/КЛЮЧ.js;
    proxy_ssl_server_name on;
    proxy_set_header Host app.frontendperf.ru;
    proxy_pass_request_headers off;
    add_header Cache-Control "public, max-age=300";
}

Caddy — внутри блока сайта shop.ru { }

handle /_p/i {
	request_body {
		max_size 16KB
	}
	reverse_proxy https://i.frontendperf.ru {
		rewrite /i
		header_up Host i.frontendperf.ru
		header_up -Cookie
	}
}

handle /_p/z.js {
	reverse_proxy https://app.frontendperf.ru {
		rewrite /s/КЛЮЧ.js
		header_up Host app.frontendperf.ru
		header_up -Cookie
	}
}

Сниппет при прокси — вместо сниппета из п. 1:

<script src="/_p/z.js" data-endpoint="/_p/i" async></script>

Apache, IIS или CDN — напишите, пришлём конфиг под ваш сервер.

8 Проверка

  1. Откройте пару страниц магазина и перейдите между ними: замер уходит, когда посетитель уходит со страницы.
  2. Нажмите «Проверить» ниже — увидим, дошли ли данные. Если нет, страница сама проверит снова в течение 10 минут.
  3. Первые просмотры появятся в панели app.frontendperf.ru. Устойчивые цифры по каждой странице — через несколько дней трафика.

Если данных нет

  • Во вкладке «Сеть» запрос на i.frontendperf.ru/i (или /_p/i) отвечает 403 — сайт открыт не с того домена, что указан при подключении. Напишите нам, добавим домен.
  • Запроса нет совсем — проверьте, что сниппет попал в HTML (Ctrl+U, поиск по frontendperf) и не режет ли его блокировщик (см. п. 7).
  • Сайт на staging-домене — маяки с него не принимаются.
  • Хотите увидеть сами замеры: добавьте к адресу страницы ?z_debug=1 и выполните в консоли браузера __zDebug().
Написать в Telegram Цены