Как читать PageSpeed Insights на примере товарной страницы

Начни с реального сценария, а не с балла

Страница товара быстро открывается у разработчика на рабочем компьютере. Покупатель на телефоне ждёт фотографию, потом нажимает выбор размера и видит, как кнопка прыгает вниз. PageSpeed Insights помогает разобрать такие моменты, если читать отчёт как подсказку о причине. Один общий балл может меняться от запуска к запуску и не описывает весь путь покупки.

Возьми конкретный адрес карточки. Лучше выбрать товар с несколькими фотографиями, вариантами и обычными внешними виджетами. Проверь мобильный и настольный режимы отдельно. Сохрани дату, URL и несколько результатов, чтобы сравнивать изменения в похожих условиях. Затем сам открой страницу на телефоне и пройди действие: выбрать вариант, добавить товар и получить подтверждение. Это связывает метрики с тем, что действительно важно посетителю.

Не смешивай результаты разных шаблонов. Главная, категория и карточка могут загружать разный набор изображений и скриптов. Если проблемы видны в карточке, проверь ещё несколько товаров на том же шаблоне. Так понятно, есть ли общая причина или речь об одном необычно большом фото. Время команды лучше направить на улучшение, которое затронет много полезных страниц.

Чем отличаются полевые и лабораторные данные

В PageSpeed Insights могут быть данные о реальных визитах из Chrome и лабораторная проверка Lighthouse. Полевые показатели показывают опыт реальных пользователей за период и зависят от доступности достаточной выборки. Отчёт может отражать конкретный URL или более широкую группу, например данные источника. Посмотри, какой уровень показан. Полевые данные не обязаны появляться для каждой страницы.

Лабораторный запуск проходит в контролируемых условиях. Он помогает воспроизвести загрузку, найти тяжёлые ресурсы и сравнить технические причины. Лабораторный результат может отличаться от поля: реальные пользователи приходят с разными устройствами, сетью, состоянием кэша и действиями. Используй оба вида данных в соответствии с вопросом. Поле показывает, что испытывают люди, лаборатория помогает понять, где искать причину.

Если после правки лабораторные показатели улучшились, полевые данные могут измениться позже. Не считай это провалом. Запиши, когда опубликовано изменение и что оно должно затронуть. Когда появится сопоставимый период, посмотри, совпадает ли ожидание с опытом пользователей. Если в поле данных мало, используй лабораторные замеры и наблюдения на реальных устройствах как отдельные источники.

Что означают LCP, INP и CLS в карточке товара

LCP связан с моментом появления крупного элемента в видимой части страницы. В карточке им может быть основное фото или крупный текстовый блок. Посмотри, какой элемент выбран в отчёте. Если это фотография, проверь, когда начинается загрузка, какого она размера и что мешает отобразить её раньше. Не оптимизируй все картинки одинаково. Главное изображение и галерея ниже первого экрана выполняют разные роли.

INP отражает отзывчивость при взаимодействии по реальным действиям пользователя. Для магазина это может быть выбор размера, переключение фото или добавление в корзину. Если сайт долго отвечает на нажатие, смотри объём работы в браузере, скрипты, обновление интерфейса и состояние ожидания. Лабораторная загрузка без взаимодействия не воспроизведёт все такие задержки. Запиши конкретное действие и проверь его отдельно.

CLS описывает неожиданные сдвиги макета. На карточке элементы могут смещаться, если у изображения нет зарезервированного места, баннер добавляется выше уже видимого текста или виджет меняет размер после загрузки. Проверь видео или последовательность кадров. Если кнопка уезжает в момент нажатия, это мешает покупке независимо от красивого финального вида страницы.

Разбор условной карточки

Пусть основная фотография светильника приходит в размере, который нужен только для полноэкранного увеличения. На телефоне файл долго передаётся, а место под него не задано. На первом экране текст на мгновение поднимается, потом съезжает вниз. Отдельно виджет рекомендаций загружает скрипт до того, как пользователь увидел товар. Эти три наблюдения ведут к разным задачам.

Сначала подбери подходящие размеры для изображения первого экрана и задай его пропорции в разметке. Уточни, как основное фото загружается и не откладывается ли оно вместе с галереей. Затем проверь второстепенный виджет: если он нужен ниже страницы, можно пересмотреть момент загрузки. Проверь, что вариант товара по-прежнему обновляет фото и цену, а пользователь не видит пустой экран после нажатия.

После изменений сравни тот же URL на мобильном режиме. Посмотри, раньше ли появился основной элемент, ушёл ли сдвиг и не ухудшилось ли качество изображения. Проверь ещё одну карточку того же шаблона. Если новый сценарий работает только у тестового товара, исправление не готово к тиражированию. В каталоге важны и типичные, и пограничные изображения.

Как выбрать задачу для разработчика

Сформулируй проблему через элемент, условие и эффект. Например, «главное фото занимает долгое место на мобильной загрузке, потому что карточка запрашивает исходник для увеличения». Укажи, как проверить изменение: ответ отдаёт подходящую версию, место зарезервировано, фото читается и клик на увеличение работает. Такой запрос полезнее общего «поднимите балл».

Если в отчёте много рекомендаций, не выполняй их как список обязательных пунктов. Некоторые относятся к ресурсам, которые не мешают текущему сценарию. Начни с причины, которая влияет на первый экран или действие. После изменения повтори обычный проход и замер. Это даёт понятный результат даже тогда, когда общий балл меняется не так сильно, как ожидалось.

• Сохранить URL, устройство и исходные показатели.
• Разделить полевые данные и лабораторный запуск.
• Найти главный элемент первого экрана.
• Проверить задержку важного действия на телефоне.
• Отметить, что именно сдвигается и почему.
• Сравнить замеры на том же шаблоне и проверить обычную покупку.

Когда проверять весь магазин

После локальной правки посмотри соседние шаблоны. Одно изображение можно облегчить отдельно, а правило о размерах часто нужно внедрить для всех карточек. Если на категории загружается множество миниатюр, там будут другие приоритеты. Для оценки доработки в ZEVY можно прислать несколько URL, результаты PageSpeed Insights и описание проблемного действия. Тогда работу легче разделить на конкретные шаги и проверить каждый после выпуска.

Сохрани карточку замера

Укажи адрес, устройство, дату и состояние страницы. Например, товар в наличии, основное фото стандартное, виджет рекомендаций включён. Рядом запиши наблюдение, которое можно повторить: «при загрузке изображения смещается блок цены». После выпуска открой те же адреса и проверь тот же элемент. Без этого легко сравнить лёгкую карточку с другим шаблоном и решить, что изменение помогло.

Включи в карточку ссылку на скриншот или запись и список файлов, которые изменились. Это пригодится при следующей правке, если на шаблон добавят новый виджет или большой баннер.