Оптимизация INP помогла redBus увеличить продажи примерно на 7%
Веб и его возможности развиваются быстрыми темпами. Теперь вы можете создавать богатые и полнофункциональные возможности в Интернете, которые могут достичь многого из того, что могут нативные приложения с точки зрения возможностей.
JavaScript — это основной драйвер интерактивности в Интернете, но если его использовать неаккуратно, взаимодействие может показаться вялым и привести к тому, что пользователи будут считать ваш сайт неотзывчивым или вообще сломанным. К счастью, метрика Interaction to Next Paint (INP) была создана для решения этой конкретной проблемы пользовательского опыта.
INP измеряет все взаимодействия, выполненные со страницей в течение ее жизненного цикла, и сообщает одно значение, которое является репрезентативным для скорости ответа веб-сайта на пользовательский ввод. Проще говоря, если INP страницы находится на уровне или ниже хорошего порога , все взаимодействия, выполненные со страницей, можно считать надежно быстрыми.
redBus , сайт бронирования и продажи билетов на автобусы, базирующийся в Индии, предпринял значительные усилия для улучшения INP своего сайта, даже в то время, когда это все еще считалось экспериментальной метрикой. В результате их усилий им удалось увеличить продажи на 7%, что еще раз проиллюстрировало связь между эффективностью веб-сайта и здоровьем бизнеса. Вот что сделал redBus для улучшения INP своего сайта.
Главные цели
Когда компания redBus решила оптимизировать INP своего сайта, они преследовали три цели:
- Обеспечьте пользователям лучший пользовательский опыт, сосредоточившись на задержке взаимодействия независимо от скорости сети и возможностей устройства.
- Оптимизируйте свой веб-сайт, чтобы взаимодействие было максимально быстрым.
- Убедитесь, что ответы от API были максимально легкими, чтобы обеспечить быструю передачу данных на интерфейс.
Путешествие
redBus классифицировал задержку взаимодействия двумя способами:
- Задержка взаимодействия, вызванная блокировкой JavaScript на клиенте. Когда взаимодействия используют избыточный JavaScript, который блокирует основной поток, рендеринг задерживается, и это влияет на INP страницы.
- Задержка сети, вызванная вызовами API. Хотя сетевая активность не измеряется INP, взаимодействие, зависящее от вызова удаленного API, может ощущаться медленным в более медленных сетях или если запросы приводят к большим ответам.
Изначально компания redBus была уверена, что INP для ее веб-сайта будет хорошим, однако данные Real User Monitoring (RUM) для этого показателя на 95-м процентиле показали иную картину.
Как redBus измерил INP
redBus использовал библиотеку JavaScript web-vitals , созданную Google, для отслеживания не только INP, но и всех важных показателей пользовательского опыта для всех страниц своего веб-сайта. В дополнение к библиотеке JavaScript web-vitals , redBus использовал ELK для анализа данных INP, которые собирались на фронтенде.
Однако то, как вы отслеживаете INP вашего веб-сайта в полевых условиях , может существенно отличаться от того, как redBus подошел к проблеме. Мы настоятельно рекомендуем вам прочитать о том , как находить медленные взаимодействия в полевых условиях, чтобы узнать, как лучше всего отслеживать INP для ваших веб-сайтов, а затем как воспроизвести их в лабораторных условиях, прежде чем вы начнете оптимизировать взаимодействия .
После того, как в redBus была внедрена система отслеживания INP, они смогли проанализировать данные, чтобы лучше понять, где присутствует медленная интерактивность.
Варианты использования
Когда пользователи ищут тарифы на сайте redBus, они могут изменить дату на странице поиска, чтобы отфильтровать выбранные тарифы для желаемого пункта назначения. Взаимодействие для изменения даты на этой странице было медленным и стало причиной низкого INP.
Кроме того, когда пользователь прокручивает тарифы, дополнительные тарифы загружаются лениво из API. Хотя сама прокрутка не учитывается при измерении INP , прослушиватель событий scroll сам планирует много работы, которая должна выполняться в основном потоке. Эта работа вызывала конкуренцию в основном потоке, что увеличивало задержку взаимодействия, что приводило к плохому INP на странице поиска.
Как redBus оптимизировал INP для страницы поиска
Чтобы улучшить INP страницы поиска, redBus провел ряд оптимизаций:
- Обработчик событий
scrollбыл дебаунсеризован , чтобы сократить количество раз, когда обратный вызов события срабатывал в заданный период. Снизив частоту, с которой выполнялся обратный вызов событияscroll, основной поток смог быстрее реагировать на взаимодействие пользователя на странице поиска. - Приоритет результирующей работы по рендерингу был установлен с помощью обратного вызова
requestAnimationFrame.requestAnimationFrameсообщает браузеру, что работа в обратном вызове должна быть выполнена до следующего кадра.
Кроме того, на странице результатов поиска были выполнены следующие дополнительные оптимизации:
- Новые пакеты результатов были получены на предпоследней карточке на странице результатов поиска с целью улучшения пользовательского опыта и визуальной производительности за счет более раннего запуска отложенной загрузки.
- Меньше результатов было получено при каждом сетевом вызове во время ленивой загрузки. При уменьшении выборок с 30 до 10 результатов наблюдалось снижение диапазонов INP с 870 до 900 до 350–370.
Хотя эти изменения значительно улучшили INP страницы поиска, все еще оставалась проблема, когда событие change полей ввода страницы поиска вызывало дорогостоящую функцию редуктора для обновления пользовательского интерфейса. Это приводило к ненужной повторной отрисовке пользовательского интерфейса, что влияло на INP страницы.
Для оптимизации этого взаимодействия redBus управлял состоянием компонентов ввода локально и синхронизировал его с хранилищем Redux только при срабатывании события blur ввода. Это изменение сократило количество повторных рендеров и устранило нежелательную повторную рендеринг пользовательского интерфейса, вызывая редуктор реже.
Благодаря этому изменению INP страницы улучшился на 72%, что привело к более быстрому и плавному пользовательскому опыту, с которым пользователи с большей вероятностью будут взаимодействовать.
Влияние на бизнес
Связь между здоровьем бизнеса и производительностью страниц хорошо известна. Хотя INP является относительно новой метрикой по сравнению с другими основными веб-показателями, redBus наблюдал лучшие бизнес-результаты, сосредоточившись на улучшении этой важной метрики производительности, ориентированной на пользователя. Результатом стало общее увеличение продаж на 7%.
Короче говоря, INP помог нарисовать картину проблем производительности времени выполнения на сайте redBus. Зная, что есть улучшения, которые необходимо сделать, redBus смог обнаружить проблему, воспроизвести ее и использовать эту важную информацию для оптимизации, которая была выгодна redBus и его бизнесу.