​Снижение INP на 80% увеличило рост конверсий на 36% у QuintoAndar

​Снижение INP на 80% увеличило рост конверсий на 36% у QuintoAndar

Изначально платформа недвижимости демонстрировала худший INP среди конкурентов: только 42% страниц соответствовали порогу "хорошо" в 200 миллисекунд. Для решения проблемы была введена инициатива "Code Yellow" — концепция, вдохновлённая Google, которая позволяла привлекать любых сотрудников для работ по улучшению производительности.

Анализ RUM (Real User Monitoring) показал, что у 25% пользователей взаимодействие с платформой занимало до 4 секунд во время поиска недвижимости.

Основные стратегии оптимизации

1. Работа с длинными задачами:

- Использование async/await для управления точками приостановки выполнения кода.

- Реализация React-переходов для предотвращения блокировки UI при обновлении состояния.

2. Дополнительные оптимизации:

- Мемоизация данных.

- Дебаунсинг событий.

- Использование аборт-контроллеров.

- Применение React Suspense.

3. Структурные изменения:

- Удаление сторонних пикселей.

- Отказ от CSS-in-JS.

- Оптимизация рендеринга для снижения задержек ввода, вызванных перегрузкой главного потока.

Метрики и управление процессами

Для оценки влияния изменений использовалась метрика Total Blocking Time (TBT) в качестве прокси-показателя.

Система управления производительностью включала:

- Фиксированные и переменные пороговые значения, разделённые по типу приложений и пользовательскому опыту.

- Хранение данных RUM в базе данных с временными рядами для мониторинга и выявления аномальных шаблонов.

- Регулярный анализ порогов тревог на заседаниях раз в две недели.

- Подробные "руководства по действиям" для управления инцидентами.

Внедрение изменений

Для развёртывания изменений использовалась система Canary Release:

- Постепенное масштабирование внедрения: на 1%, 10%, 65% и 100%.

- Автоматический откат изменений в случае ухудшения производительности.

Результаты

Комплексный подход позволил достичь значительных улучшений:

- INP на мобильных устройствах снизился с 1 006 мс до 216 мс.

- Доля страниц с хорошими показателями INP увеличилась с 42% до 78%.

- Число пользователей с плохим опытом сократилось с 32% до 6.9%.

Улучшение пользовательского опыта привело к 36%-му росту конверсий записи на просмотр недвижимости в годовом выражении.

https://web.dev/case-studies/quintoandar-inp

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/4637...