Улучшение взаимодействия с Next Paint (INP) на смарт-телевизорах и приставках представляет собой значительно больше проблем, чем для браузеров настольных компьютеров, из-за ограничений ограниченной поддержки API и скромных системных спецификаций. В этом исследовании вы узнаете, как Disney+ Hotstar успешно преодолел эти препятствия и в результате получил значительные бизнес-преимущества.
С ростом популярности устройств для гостиной Disney+ Hotstar осознала, что предоставление бесшовного просмотра в их приложении для смарт-телевизоров и телевизионных приставок является критически важным бизнес-требованием. Однако исправление INP для таких устройств усложняется тем, что любая модель телевизора может использовать очень старые версии браузера — например, телевизор LG 2020 года выпуска использует Chrome 68, выпущенный в 2018 году . Некоторые из этих устройств также можно отнести к категории устройств начального уровня, то есть они не могут реагировать на взаимодействие так же быстро, как флагманские планшеты и ноутбуки.
На следующем рисунке сравнивается время загрузки страницы между ноутбуком с замедленным в шесть раз процессором, примененным в Chrome DevTools, и смарт-телевизором. Как можно видеть, ноутбук все еще намного быстрее, чем недавно произведенный смарт-телевизор.
Хотя эти тесты предоставляют лабораторные данные , Disney+ Hotstar начала собирать полевые данные для Interaction to Next Paint (INP) от реальных пользователей своего приложения, используя библиотеку web-vitals, и обнаружила, что 75% пользователей приложения испытали INP в 675 миллисекунд в полевых условиях, что считается «плохим» пользовательским опытом в соответствии с пороговыми значениями INP .
В этом исследовании рассматривается, как Disney+ Hotstar улучшили отзывчивость своих потоковых приложений, особенно на бюджетных устройствах. Они достигли улучшения на 61%, снизив значения INP до 272 миллисекунд — все еще выше рекомендуемого «хорошего» порога в 200 миллисекунд, но это существенное улучшение по отношению к нему.
Выводы
Disney+ Hotstar оснастил приложение методом onINP из атрибуционной сборки библиотеки web-vitals . На начальном этапе возникли различные проблемы, особенно при определении точного целевого элемента. Проблема возникла из-за того, что все ссылки указывали на тело из-за сторонней библиотеки пространственной навигации , которая использовалась с некоторыми настройками в приложении Disney+ Hotstar. Эта библиотека прослушивает только события в теле документа и впоследствии определяет фактический сфокусированный элемент и предсказывает следующий фокус на основе удаленных нажатий клавиш.
Disney+ Hotstar начал с решения проблемы атрибуции, чтобы взаимодействия, ответственные за высокие значения INP, могли быть правильно идентифицированы. Для этого Disney+ Hotstar зарегистрировал атрибут focusKey , который уже присутствует в библиотеке пространственной навигации для текущего сфокусированного элемента, а также карту всех фокусируемых элементов на странице, которая аналогична цели взаимодействия, доступной в сборке атрибуции web-vitals.
focusKey вместе с путем к элементу, вызвавшему его.Теперь, когда проведены соответствующие измерения и атрибуция, результаты полевых данных выявили следующие взаимодействия как наиболее проблемные для INP:
- Горизонтальная навигация по карусели.
- Вертикальная карусельная навигация.
- Взаимодействия во время первоначальной загрузки страницы.
После профилирования этих взаимодействий с панелью производительности в Chrome Dev Tools было обнаружено, что библиотека пространственной навигации считывает положение всех фокусируемых элементов и строит новое дерево. Это дорогостоящая операция, которая вызывает перегрузку макета при каждом взаимодействии, например, при переходе от одного элемента к другому.
Для домашней страницы с помощью библиотеки пространственной навигации было сгенерировано следующее дерево:
Это означало, что если приложение отображало 10 лотков, и в каждом лотке было 7 карточек, то для контейнера лотка было бы 70 фокусируемых элементов, включая элементы навигации. Это большое количество интерактивных элементов. Также использовалась сторонняя библиотека каруселей , которая считывала размеры каждой карточки во время горизонтальной навигации для перевода контейнера, что добавляло еще большую задержку взаимодействия.
Устранение проблем
Было несколько различных проблем, которые приходилось решать по отдельности, чтобы решить проблемы с отзывчивостью всего приложения.
Улучшения навигации в горизонтальном лотке
Disney+ Hotstar создала собственную библиотеку каруселей, которая не вызывает перегрузки макета за счет использования составных анимаций и считывания размеров один раз для каждого лотка, а не один раз для каждой карты.
Пространственная навигация фокусируется только на корне карусели, а для дальнейшей горизонтальной навигации в игру вступает наша пользовательская карусель. Благодаря такому подходу Disney+ Hotstar устранил зависимость пространственной навигации и старой библиотеки карусели, которая считывала размеры при каждой навигации.
Вот как выглядело дерево пространственной навигации после этих оптимизаций.
На следующих изображениях показано сравнение производительности, измеренное на панели производительности Chrome DevTools до и после внедрения нашей карусели.
В результате этой работы Disney+ Hotstar увидели значительное снижение INP своего приложения в этой области. Им также удалось сэкономить около 35 КБ (сжатых), удалив стороннюю библиотеку. В качестве бонуса эти улучшения также позволили Disney+ Hotstar сократить длительность своей пользовательской метрики, которую они используют для измерения общего времени рендеринга домашней страницы, поскольку макеты запускаются реже из-за сокращения узлов пространственной навигации.
Улучшения навигации в вертикальном лотке
Disney+ Hotstar также улучшил производительность навигации по вертикальным лоткам, используя ленивую загрузку лотков вместо загрузки всех из них заранее. Таким образом, при загрузке страницы вместо загрузки 10 экземпляров лотка, каждый из которых имеет компонент карусели и кучу изображений, приложение загружает только два лотка, которые видны в области просмотра, плюс дополнительный лоток выше и ниже. Рендеринг также был разделен на несколько задач с использованием стратегии возврата setTimeout() , чтобы у основного потока было больше возможностей для обработки взаимодействий с пользователем.
Взаимодействия во время начальной загрузки страницы
INP будет высоким для приложений, которые обрабатывают огромное количество скриптов во время запуска приложения. Это связано с тем, что браузер должен загружать, анализировать и оценивать эти скрипты. Пока все это происходит, основной поток будет занят потенциально долгое время и не сможет быстро реагировать на действия пользователя.
Disney+ Hotstar поняли, что они обрабатывают больше скриптов, чем было необходимо во время запуска приложения (время заставки), чтобы ускорить загрузку будущих страниц. Это повлекло за собой дополнительные задачи оценки скриптов, которые также могли негативно повлиять на INP.
Чтобы исправить это, Disney+ Hotstar рассматривал возможность динамической загрузки большинства ресурсов, чтобы сэкономить время при запуске приложения. Однако это увеличило бы время загрузки для навигации на будущих страницах, поскольку этот JavaScript больше не будет загружаться заранее с этим изменением. Чтобы решить эту проблему, Disney+ Hotstar разработал внутреннюю библиотеку предварительной загрузки ресурсов, которая определяет, какая страница может быть следующей в пути пользователя, и предварительно загружает ресурсы для этой страницы. Например:
- Когда пользователь находится на странице входа в систему, библиотека предварительной загрузки ресурсов предварительно загружает ресурсы для страницы выбора профиля.
- На странице выбора профиля загружаются ресурсы домашней страницы.
- На главной странице загружаются ресурсы страницы сведений.
- Наконец, ресурсы страницы просмотра загружаются на страницу сведений.
Оптимизация загрузки ресурсов помогла Disney+ Hotstar добиться двух результатов: сократить INP приложения (поскольку основной поток теперь был относительно свободен для выполнения взаимодействий с пользователем), а также сократить использование памяти на низкоуровневых устройствах.
Эти изменения привели к снижению зарегистрированного количества INP в полевых условиях на 32%, как можно увидеть на следующем снимке экрана.
Другие улучшения
Disney+ Hotstar также выяснил, что существуют длительные задачи по нескольким пользовательским событиям, которые можно разделить, часто передавая их основному потоку , и пошел еще дальше, создав утилиту-генератор задач, которая позволит пользователям отменять задачу в процессе ее выполнения.
Например, когда пользователь перемещается по нескольким карточкам на лотке, происходит следующее:
- Следующая карта сфокусирована.
- При необходимости карточка переводится.
- Spotlight обновлен.
- Если есть трейлер, он загружается и начинается воспроизведение.
- Для действия запускаются события аналитики.
Если во время этого процесса пользователь сосредоточится на следующей карте, то остальные шаги выполнять не нужно. Например, загрузка трейлера и инициализация проигрывателя для определенного заголовка больше не понадобятся, если пользователь перейдет к следующей карте. Следовательно, эти задачи можно прервать, чтобы освободить основной поток.
Утилита генератора задач Disney+ Hotstar принимает функцию, которая является задачей, и когда в середине появляется другая задача, предыдущая задача прерывается, что избавляет нас от ненужного выполнения задачи и позволяет быстро приступить к необходимой задаче.
Результаты
В целом, INP приложения Disney+ Hotstar снизился с 675 миллисекунд до 272 миллисекунд , что представляет собой улучшение почти на 60%! Кроме того, задержки взаимодействия с лотком, в частности, сократились с примерно 400 миллисекунд до примерно 100 миллисекунд.
Влияние на бизнес: еженедельные просмотры карточек выросли со 111 до 226 на пользователя! Это 100%-ный рост, демонстрирующий, что более быстрый и отзывчивый интерфейс с большей вероятностью будет вовлекать пользователей в течение более длительных периодов времени.
Это только начало, и Disney+ Hotstar только приступил к улучшению производительности рендеринга и взаимодействия, используя метрику INP в качестве ориентира. И их команда с нетерпением ждет возможности сделать Disney+ Hotstar максимально удобным для своих клиентов в ближайшем будущем.
Благодарим Аюша, Аджая, Киран, Милана и Ричу из Disney+ Hotstar за их усилия по перелому ситуации.
Особая благодарность Анкиту Майни , руководителю отдела разработки Disney+ Hotstar, и Рахулу Кришнану П. , руководителю отдела по работе с клиентами Disney+ Hotstar, за поддержку этой инновационной работы, а также Джереми Вагнеру, Джилберто, Барри Полларду и Брендану Кенни из Google за проверку и помощь в публикации этого исследования.