Улучшение взаимодействия с Next Paint (INP) на смарт-телевизорах и телевизионных приставках представляет значительно больше проблем, чем для настольных браузеров, из-за ограничений ограниченной поддержки API и скромных системных характеристик. Из этого примера вы узнаете, как Disney+ Hotstar успешно преодолела эти препятствия и в результате получила значительные преимущества для бизнеса.
С ростом популярности устройств в гостиной компания Disney+ Hotstar осознала, что обеспечение беспрепятственного просмотра контента в их приложении для смарт-телевизоров и телеприставок является важнейшим бизнес-требованием. Однако исправить INP для таких устройств сложнее потому, что любая конкретная модель телевизора может использовать очень старые версии браузера — например, телевизор LG 2020 года использует Chrome 68, выпущенный в 2018 году . Некоторые из этих устройств также можно отнести к категории бюджетных устройств, а это означает, что они не могут реагировать на взаимодействия так же быстро, как флагманские планшеты и ноутбуки.
На следующем рисунке сравнивается, сколько времени требуется для загрузки страницы между ноутбуком с замедленным процессором в шесть раз, примененным в Chrome DevTools, и Smart TV. Как видно, ноутбук по-прежнему намного быстрее, чем недавно выпущенный смарт-телевизор.
Хотя эти тесты дают лабораторные данные , Disney+ Hotstar начала собирать полевые данные для взаимодействия с следующей отрисовкой (INP) от реальных пользователей своего приложения, используя библиотеку веб-виталов, и заметила, что у 75% пользователей приложения INP составил 675 миллисекунд в поле, что считается «плохим» пользовательским опытом согласно пороговым значениям INP .
В этом тематическом исследовании показано, как Disney+ Hotstar улучшила скорость реагирования своих потоковых приложений, особенно на устройствах бюджетного класса. Они добились улучшения на 61%, снизив значения INP до 272 миллисекунд , что все еще превышает рекомендуемый «хороший» порог в 200 миллисекунд, но является существенным улучшением в этом направлении.
Находки
Disney+ Hotstar оснастила приложение, используя метод onINP из сборки атрибуции библиотеки web-vitals . На начальном этапе возникли различные проблемы, особенно при определении точного целевого элемента. Проблема возникла из-за того, что все ссылки указывали на тело из-за сторонней библиотеки пространственной навигации , которая использовалась с некоторыми настройками в приложении Disney+ Hotstar. Эта библиотека исключительно прослушивает события в теле документа, а затем определяет фактический элемент, на котором находится фокус, и прогнозирует следующий фокус на основе удаленных нажатий клавиш.
Disney+ Hotstar начала с решения проблемы атрибуции, чтобы можно было правильно идентифицировать взаимодействия, ответственные за высокие значения INP. Для этого Disney+ Hotstar зарегистрировал атрибут focusKey , который уже присутствует в библиотеке пространственной навигации для элемента, находящегося в фокусе, а также карту всех фокусируемых элементов на странице, что аналогично цели взаимодействия, доступной в сборке атрибуции веб-показателей. .
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 приложения (поскольку основной поток теперь был относительно свободен для выполнения действий пользователя), а также сократить использование памяти на устройствах низкого уровня.
Эти изменения привели к уменьшению на 32% количества зарегистрированных INP с мест, как можно видеть на следующем снимке экрана.
Другие улучшения
Disney+ Hotstar также выяснила, что в нескольких пользовательских событиях есть длинные задачи, которые можно разделить , часто уступая основному потоку , и пошла еще дальше и создала утилиту генератора задач, которая позволит пользователям отменить задачу в середине ее выполнения. исполнение.
Например, когда пользователь перемещается по нескольким карточкам на лотке, происходит следующее:
- Следующая карта сфокусирована.
- Карта переводится, если это необходимо.
- Прожектор обновлен.
- Трейлер (если он есть) загружается и начинается воспроизведение.
- События аналитики запускаются для действия.
Если во время этого процесса пользователь сосредоточится на следующей карточке, то остальные шаги выполнять не потребуется. Например, выбор трейлера и инициализация игрока для определенного заголовка больше не потребуются, если пользователь перешел к следующей карте. Следовательно, эти задачи можно прервать, чтобы освободить основной поток.
Утилита генератора задач 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 за рецензирование и помощь в публикации. тематическое исследование.