ВойтиРегистрация
▤ Руководства

Проверка в настоящем браузере: Core Web Vitals, мобильная версия, SPA

Содержание

Страница /render («Рендеринг JS») получила блок «Полная проверка в браузере». Он запускает скрипт src/Render/probe.js в настоящем Chromium: во встроенном воркере (v144, deploy/render-worker, бесплатно) или в облачном Browserless (метод /function) и возвращает измерения вместе с конкретными элементами, которые создают проблемы.

Что измеряется

  • LCP — какой именно элемент главный (селектор и кусок разметки), загружен ли он лениво (loading="lazy"), нет ли fetchpriority="high", не слишком ли велик файл, не фоновая ли это картинка.
  • CLS — какие элементы сдвигались и насколько (окно сессии по правилам Google), нет ли у картинок width и height.
  • INP — лабораторная оценка по пробным нажатиям на кнопки-переключатели (меню, вкладки, аккордеоны): какая кнопка медленная и на что уходит время (ожидание потока, обработчик, перерисовка). Нажимаются только безопасные элементы, не ссылки и не отправка форм.
  • TBT и долгие задачи, сторонние домены, ошибки скриптов, неудачные запросы, размер DOM. Для телефона процессор замедляется в 4 раза (как у среднего устройства).
  • Мобильные элементы: мелкий шрифт (доля текста меньше 12 px и список элементов), области нажатия (меньше 24 px — ошибка, меньше 44 px рядом с соседней целью — предупреждение), горизонтальная прокрутка и выступающие элементы, закреплённые баннеры, закрывающие экран, viewport, картинки сильно больше показываемого размера.

SPA и сайты на JavaScript

  • Что получает поисковик в исходном HTML и что появляется только после JavaScript (title, description, canonical, h1, robots, объём текста).
  • Настоящие ссылки <a href> против «ссылок» на обработчиках, маршруты с #.
  • Пробные переходы по 3 внутренним ссылкам: меняются ли title, description, canonical и h1 при переходе без перезагрузки.
  • Ответ на несуществующий адрес (soft 404). Эта часть и проверка исходного HTML работают бесплатно, без браузера (кнопка «Проверить SPA»).

Страница «Скорость»

Lighthouse из PageSpeed Insights теперь тоже показывает узлы: элемент LCP и этапы его загрузки, виновники сдвигов, мелкие области нажатия (в версиях Lighthouse, где аудит ещё есть), долгие задачи, тяжёлые скрипты и сторонние сервисы.

Стоимость и лимиты

Каждое устройство списывает одну платную проверку из дневного лимита render_daily_limit (общего со скриншотами и сравнением HTML). Замеры хранятся в таблице rx_probe (до 150 на пользователя), следующий замер той же страницы показывает «было → стало». Находки на ваших сайтах можно отметить галочками и добавить в план работ (до 10 за раз).

Ограничения

  • Это лабораторные замеры одного запуска: значения колеблются. Данные реальных посетителей — на странице «Скорость» (CrUX).
  • INP оценивается по нескольким пробным нажатиям, а не по поведению посетителей.
  • Формат вызова /function взят из документации Browserless; на живом аккаунте он не проверялся. Сам скрипт проверен в настоящем Chromium на тестовых страницах.