frontendperf sytygorod.example

Экспресс-аудит производительности

Сытый Город

sytygorod.example

LCP на мобильных, p754,6 с при пороге 2,5 с
ДляАнна Морозова, CTO
Дата24 октября 2026
АвторМаксим Щербак

Коротко

Каталог на телефоне открывается за 4,6 с — почти вдвое дольше порога. Три правки вернут его в зелёную зону.

  • Главная проблема — LCP. Фото первого товара грузится последним: браузер узнаёт о нём только после JavaScript.
  • Отклик на фильтры — 340 мс. Каждое нажатие пересчитывает весь каталог в главном потоке.
  • План на 2–3 недели работы команды. Ожидаемо: LCP ≈ 2,3 с, INP ≈ 180 мс, все Core Web Vitals в зелёной зоне.
frontendperfСытый Город · Экспресс-аудит производительности2 / 15

Методика

Что и как измеряли

Страницы

  • Главная
  • Каталог
  • Карточка товара
  • Корзина

Устройства

Мобильные (Moto G Power, 4G), десктоп для сравнения

Период полевых данных

26 сентября — 23 октября 2026

Источники

  • Полевые данные: Chrome UX Report, 28 дней, p75
  • Лаборатория: Lighthouse, WebPageTest, трейсы Chrome DevTools
  • Код: бандл, сетевой водопад, сторонние скрипты
frontendperfСытый Город · Экспресс-аудит производительности3 / 15

Полевые данные

Не в зелёной зоне: LCP, INP, CLS

LCPзагрузка главного контента
4,6 схорошо у 38% визитов
INPотклик на действия
340 мсхорошо у 55% визитов
CLSстабильность вёрстки
0,14хорошо у 61% визитов
TTFBответ сервера
1,1 с

Chrome UX Report, мобильные, p75 · 26 сентября — 23 октября 2026

frontendperfСытый Город · Экспресс-аудит производительности4 / 15

Рынок

По LCP вы на 4-м месте из 5 среди конкурентов

Конкурент А порог 2,5 с 2,4 с
Конкурент Б 2,9 с
Конкурент В 3,4 с
Сытый Город 4,6 с
Конкурент Г 5,6 с

LCP, p75, мобильные, Chrome UX Report

frontendperfСытый Город · Экспресс-аудит производительности5 / 15

Страницы

Медленнее всего — каталог: 4,6 с до главного контента

СтраницаАдресLCPINPCLS
Главная/ 3,9 с 210 мс 0,06
Каталог/catalog/pizza 4,6 с 340 мс 0,14
Карточка товара/product/margarita 3,1 с 180 мс 0,02
Корзина/cart 2,2 с 260 мс 0,01

Lighthouse, мобильный профиль, медиана 5 прогонов

frontendperfСытый Город · Экспресс-аудит производительности6 / 15
Находка 1 из 4 высокий приоритет LCP

Фото первого товара грузится последним

Что видим
LCP-элемент — фото первой карточки (180 КБ, JPEG). Тег <img> появляется только после рендера React, поэтому браузер начинает качать фото через 1,9 с после старта.
Почему это важно
Пока фото нет, пользователь видит серые заглушки. Это половина всего LCP.
Что сделать
Отдавать первую карточку в HTML с сервера, fetchpriority="high" и preload для фото, AVIF вместо JPEG, правильный sizes.
Ожидаемый эффектLCP −1,5…1,9 с
ТрудозатратыS · до 2 дней
frontendperfСытый Город · Экспресс-аудит производительности7 / 15
Находка 2 из 4 высокий приоритет INP

Фильтры пересчитывают весь каталог на каждый тап

Что видим
Обработчик фильтра синхронно фильтрует и сортирует 1 200 товаров и перерисовывает весь список. Длинная задача — 280 мс на среднем телефоне.
Почему это важно
После тапа интерфейс треть секунды не реагирует — пользователи жмут повторно и сбрасывают фильтр.
Что сделать
Показывать отклик сразу (состояние кнопки), тяжёлую фильтрацию — через scheduler.yield() или в воркер, виртуализировать длинный список.
Ожидаемый эффектINP −150…200 мс
ТрудозатратыM · до недели
frontendperfСытый Город · Экспресс-аудит производительности8 / 15
Находка 3 из 4 средний приоритет CLS
Что видим
Баннер подгружается после первого кадра без зарезервированного места и сдвигает весь каталог на 120 px.
Почему это важно
Пользователь целится в товар, а попадает в баннер. Это основной вклад в CLS 0,14.
Что сделать
Зарезервировать место через aspect-ratio или min-height, показывать скелетон того же размера.
Ожидаемый эффектCLS 0,14 → 0,03
ТрудозатратыS · до 2 дней
frontendperfСытый Город · Экспресс-аудит производительности9 / 15
Находка 4 из 4 низкий приоритет LCP

Чат поддержки грузится до первого рендера

Что видим
Виджет чата (310 КБ JS) подключён синхронно в <head> и занимает главный поток на 240 мс до первого кадра.
Почему это важно
Чат нужен единицам, а задерживает всех.
Что сделать
Загружать виджет по клику на кнопку чата или после load в idle.
Ожидаемый эффектLCP −0,2…0,3 с
ТрудозатратыS · до 2 дней
frontendperfСытый Город · Экспресс-аудит производительности10 / 15

Приоритеты

Сначала — то, что даёт больше эффекта за меньшие усилия

  1. 1Фото первого товара грузится последним
  2. 2Фильтры пересчитывают весь каталог на каждый тап
  3. 3Баннер акции сдвигает каталог вниз
  4. 4Чат поддержки грузится до первого рендера
frontendperfСытый Город · Экспресс-аудит производительности11 / 15

План работ

План: 4 шага, примерно 2 нед. работы одного разработчика

  1. Фото первого товара грузится последнимLCP −1,5…1,9 сS
  2. Фильтры пересчитывают весь каталог на каждый тапINP −150…200 мсM
  3. Баннер акции сдвигает каталог внизCLS 0,14 → 0,03S
  4. Чат поддержки грузится до первого рендераLCP −0,2…0,3 сS
frontendperfСытый Город · Экспресс-аудит производительности12 / 15

Прогноз

После плана все Core Web Vitals — в зелёной зоне

LCP · загрузка главного контента

сейчас 4,6 с после 2,3 с

INP · отклик на действия

сейчас 340 мс после 180 мс

CLS · стабильность вёрстки

сейчас 0,14 после 0,03

Пунктир — порог «хорошо» по Core Web Vitals. Прогноз по p75, мобильные; уточняется замером через месяц после внедрения.

frontendperfСытый Город · Экспресс-аудит производительности13 / 15

Деньги

Ускорение может дать 256⁠–⁠639 тыс. ₽ выручки в месяц

  • Мобильных сессий в месяц420 000
  • Конверсия в заказ2,1%
  • Средний чек1 450 ₽
  • Выручка с мобильного веба12 789 000 ₽
  • Рост конверсии после плана (допущение)+2…5%

Дополнительная выручка

+256…639 тыс. ₽

в месяц, или 3,1–7,7 млн ₽ в год

Оценка по исследованиям о влиянии скорости на конверсию в ритейле. Точный эффект покажет A/B-тест.

frontendperfСытый Город · Экспресс-аудит производительности14 / 15

Что дальше

Что дальше

Максим Щербакt.me/maxareumadfrontendperf.ru
frontendperfСытый Город · Экспресс-аудит производительности15 / 15
← На сайт