Владелец интернет-магазина получил письмо от подрядчика: через полгода показатель отзывчивости станет учитываться в оценке страниц, и текущее значение уже сейчас выходит за границы нормы. Никаких подробностей, кроме названия метрики, в письме не было. Разбираться пришлось самостоятельно, и на это ушли недели, потому что за одним термином скрывается целая система измерений, которая меняется каждые пару лет.
Набор показателей качества делится на основные и вспомогательные
Разговоры о качестве веб-страниц долго велись наугад. Каждый оптимизировал то, что считал важным, и общих ориентиров не существовало. Положение изменилось, когда появился набор показателей, описывающих опыт посетителя через измеримые величины.
Основные показатели отвечают на три вопроса: как быстро появляется содержимое, насколько быстро страница реагирует на действие и не прыгает ли разметка. Именно эти три величины влияют на впечатление сильнее всего, и именно они попадают в оценку.
Вспомогательные показатели дополняют картину. Время до первого байта, доля страниц без ожидания, задержка отклика сервера. Они помогают понять причины, но в основную оценку не входят.
Первый основной показатель касается скорости отрисовки. Он измеряет момент, когда на экране появился самый крупный элемент: изображение, блок текста или видео. Раньше использовался другой показатель, основанный на моменте готовности страницы, но он плохо отражал реальное ощущение.
Второй основной показатель описывает отзывчивость. Он измеряет задержку между действием пользователя и видимой реакцией интерфейса.
Третий основной показатель оценивает стабильность разметки. Он считает, насколько сильно сместились элементы после загрузки.
Значения каждого показателя делятся на три полосы: хорошая, требующая улучшения и плохая. Оценка выставляется по семидесяти пятому проценту посещений, а не по среднему. Такой подход отсекает выбросы: редкий случай с плохой связью не портит картину, а систематическая проблема видна отчётливо.
Крупнейший элемент определяется по площади и меняется в процессе загрузки
Работа первого показателя основана на наблюдении за самым крупным элементом страницы. Под этим понимается элемент с наибольшей площадью, видимый в области просмотра.
Важная особенность состоит в том, что победитель меняется по мере загрузки. Сначала им может быть заголовок, затем крупное изображение, затем блок с текстом. Показатель фиксирует последний такой элемент и время его появления.
Отсюда несколько практических следствий.
Первое: изображение в первом экране влияет на показатель напрямую. Если оно загружается медленно, значение растёт. Решения известны: правильный формат, точные размеры, приоритетная загрузка.
Второе: отложенная подгрузка мешает. Изображение, помеченное как ленивое, но находящееся в первом экране, появится позже и ухудшит результат. Ленивую загрузку стоит применять только к тому, что ниже сгиба.
Третье: текст тоже может оказаться крупнейшим элементом. Огромный заголовок, отрисованный после подгрузки шрифта, задержит показатель. Предзагрузка шрифта решает задачу.
Четвёртое: анимации не считаются, только реально отрисованное содержимое. Бесконечная заставка с логотипом не станет крупнейшим элементом, если в этот момент на экране ничего другого нет.
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
const last = entries[entries.length - 1];
console.log("Крупнейший элемент:", last.element);
console.log("Время отрисовки, мс:", last.renderTime || last.loadTime);
console.log("Площадь:", last.size);
}).observe({ type: "largest-contentful-paint", buffered: true });Обратите внимание на свойство времени отрисовки. Для изображений, загруженных с чужого домена без разрешающего заголовка, значение может быть огрублено для защиты приватности. Тогда стоит опираться на время загрузки, понимая, что оно менее точно.
Задержка отклика измеряется через связи между событиями
Второй показатель сложнее устроен. Он описывает время от действия пользователя до следующего кадра отрисовки.
Логика измерения опирается на связи между записями производительности. Каждое взаимодействие получает идентификатор, и события, вызванные этим взаимодействием, помечаются тем же идентификатором. Так система понимает, какие задержки относятся к одному действию.
Взаимодействием считается нажатие, клик или ввод с клавиатуры. Прокрутка и наведение в расчёт не берутся: их обработка имеет свои особенности и измеряется отдельно.
Итоговое значение вычисляется как задержка самого долгого взаимодействия за время жизни страницы. Если человек один раз нажал кнопку и ждал две секунды, показатель испортится этим единственным случаем, даже если всё остальное работало мгновенно.
Отсюда практический вывод: один тяжёлый обработчик способен перечеркнуть всю работу над скоростью. Типичные причины: длинные вычисления в обработчике нажатия, синхронный разбор большого объёма данных, обращение к хранилищу, блокирующее главный поток.
let worstDelay = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.interactionId) {
continue;
}
const delay = entry.duration;
if (delay > worstDelay) {
worstDelay = delay;
}
if (delay > 200) {
console.log("Медленное взаимодействие:", entry.name, delay);
}
}
}).observe({ type: "event", buffered: true, durationThreshold: 40 });Ограничение по длительности в наблюдателе означает, что записи короче порога не передаются. Значение в примере выбрано ниже порога нормы, чтобы успеть заметить проблему до того, как она станет заметна пользователям.
Второй момент касается фоновых вкладок. Взаимодействие учитывается, только если вкладка была активна. Это правильно: обработка кликов в невидимой вкладке не влияет на ощущение человека.
Смещение разметки считается по площади и удалённости от экрана
Третий показатель описывает прыжки содержимого. Формула учитывает две величины: какую площадь занимает сдвинувшийся элемент и насколько далеко он переместился относительно высоты области просмотра.
Простой пример: баннер с рекламой загрузился после статьи и сдвинул текст вниз на высоту экрана. Площадь большая, смещение большое, вклад в итоговое значение значительный.
Ключевая тонкость состоит в том, что учитываются только неожиданные сдвиги. Если изменение разметки вызвано действием пользователя, например нажатием на кнопку, которая раскрыла список, сдвиг не штрафуется. Для этого элементу заранее сообщается, что сдвиг ожидаемый.
Второе уточнение касается новых элементов. Появление блока, который раньше не отображался, не считается сдвигом. Штрафуется именно перемещение уже видимого содержимого.
let totalShift = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (entry.hadRecentInput) {
continue;
}
totalShift += entry.value;
}
console.log("Накопленное смещение:", totalShift.toFixed(4));
}).observe({ type: "layout-shift", buffered: true });Свойство, отмечающее недавний ввод, позволяет отфильтровать ожидаемые изменения. Без этой проверки любое раскрытие меню выглядело бы как проблема.
Типичные причины прыжков хорошо известны. Изображение без указанных размеров, блок рекламы без зарезервированного места, шрифт, который подменяется после загрузки, уведомление, появляющееся поверх содержимого.
Исправление причин важнее подгонки цифр
Каждый показатель имеет свои методы лечения, и они не пересекаются.
Для скорости отрисовки работают несколько приёмов. Приоритетная загрузка главного изображения с правильным указанием, предварительное соединение с доменами, откуда тянутся ресурсы, отказ от ленивой загрузки в первом экране, оптимизация изображений по формату и размеру.
Для отзывчивости главное это разгрузка главного потока. Тяжёлые вычисления переносятся в фоновый поток. Обработчики разбиваются на короткие части с уступкой управления. Данные готовятся заранее, а не в момент нажатия.
Для стабильности разметки обязательны размеры. Изображениям и видео задаётся соотношение сторон, рекламным блокам резервируется место, шрифты подключаются с правильным описанием, а всплывающие сообщения размещаются так, чтобы не сдвигать содержимое.
<img
src="/catalog/hero.avif"
width="1200"
height="600"
fetchpriority="high"
alt="Новая коллекция"
/>Указание размеров в разметке решает сразу две задачи: браузер резервирует место и не сдвигает содержимое, а также правильно рассчитывает соотношение сторон при подгонке изображения под ширину контейнера.
Подготовка к изменениям начинается заранее
Измерения меняются, и это стоит учитывать в планировании.
Первое, что стоит наладить, это регулярный сбор данных с реальных посетителей. Лабораторные замеры полезны для отладки, но не отражают разнообразие устройств и сетей. Сбор с настоящих пользователей показывает картину честнее.
Второе это сегментация. Общие значения скрывают различия между группами. Разбивка по типу устройства, по странам и по скорости соединения показывает, где проблема сосредоточена.
Третье это отслеживание изменений в методике. Новые показатели появляются, старые выводятся из оценки. Обычно объявление даётся заранее, за несколько месяцев, и этого времени хватает на подготовку, если не откладывать.
Четвёртое это приоритеты. Не все страницы одинаково важны. Начинать стоит с тех, куда приходит больше всего трафика и где совершаются целевые действия.
Пятое это осторожность с оптимизацией под замер. Показатель можно улучшить, убрав полезное содержимое или упростив интерфейс до примитива. Такая победа в отчёте обернётся падением продаж.
Числовой пример показывает, как складывается оценка
Полезно пройти расчёт на конкретных данных, чтобы увидеть механику порога.
Пусть страница получила результаты по трём показателям за сутки: скорость отрисовки в пределах нормы у восьмидесяти пяти процентов посещений, отзывчивость в норме у семидесяти процентов, стабильность разметки в норме у девяноста процентов.
Оценка выставляется по семидесяти пятому проценту посещений, а не по среднему. Это значит, что пять процентов худших результатов отбрасываются, и берётся значение, ниже которого оказались семьдесят пять процентов замеров.
Для отзывчивости такое правило оказывается строгим. Тридцать процентов посещений выходят за норму, и в оценку попадает именно эта полоса. Общая картина по трём показателям выглядит как проход по двум и провал по одному.
Практический вывод состоит в том, что улучшать нужно самый отстающий показатель. Работа над тем, который уже в норме, не даст ничего, кроме потраченного времени.
Второй вывод касается распределения. Если плохие значения собраны у одной группы пользователей, например у владельцев старых телефонов, то проблема решается облегчением интерфейса для этой группы, а не переписыванием всего сайта.
Третий вывод связан с динамикой. Смотреть стоит не на текущее значение, а на изменение за месяц. Плавное улучшение говорит о том, что работа идёт в нужную сторону, даже если до идеала далеко.
Порядок действий при подготовке к изменению оценки
Когда методика меняется, времени обычно хватает, и стоит распорядиться им разумно.
Первый шаг это замер текущего состояния. Без исходной цифры невозможно понять, помогла ли работа.
Второй шаг это поиск проблемных страниц. Часто достаточно исправить десяток адресов, чтобы общая картина выправилась.
Третий шаг это разбор причин на каждой странице. Одинаковый плохой результат может иметь разные причины, и лечить их нужно по-разному.
Четвёртый шаг это исправление самых дешёвых проблем. Указание размеров изображений и отключение ленивой загрузки в первом экране занимают час, а результат дают сразу.
Пятый шаг это более сложные улучшения: перенос вычислений в фоновый поток, оптимизация шрифтов, перестройка загрузки ресурсов.
Шестой шаг это проверка на реальных устройствах. Лабораторный замер на быстром компьютере показывает радужную картину, которая рассыпается на бюджетном телефоне.
Седьмой шаг это повторный замер и сравнение. Без него невозможно понять, что сработало, а что оказалось бесполезным.
Метрики отзывчивости получились редким случаем, когда технические измерения оказались ближе к человеку, чем привычные показатели загрузки. Они говорят не о том, когда сервер отдал ответ, а о том, что успел увидеть и почувствовать посетитель. Именно поэтому попытки обмануть замер выглядят так же беспомощно, как попытки обмануть самого человека. Он просто уходит на другой сайт, а отчёт показывает ровные цифры.