API-интерфейс Long Animation Frame уже отправлен,API-интерфейс Long Animation Frame уже отправлен

Барри Поллард

Поддержка браузера

  • Хром: 123.
  • Край: 123.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

API Long Animation Frame (LoAF произносится как Lo-Af) появился в Chrome 123, и теперь мы также обновили наши инструменты и рекомендации, чтобы помочь вам максимально эффективно использовать этот новый API.

LoAF доступен в JavaScript-библиотеке web-vitals .

Версия 4 библиотеки JavaScript web-vitals включает длинный кадр анимации (или кадры), связанный с взаимодействием INP, как описано в руководстве «Найти медленные взаимодействия в поле» , где содержится информация о том, как воспользоваться преимуществами LoAF .

На конференции Google I/O 2024 мы представили эту информацию в разделе «Новая информация для отладки сообщений INP» , включая использование LoAF для выявления других сценариев, замедляющих взаимодействие с INP.

Интеграция API непосредственно в библиотеку позволяет партнерам RUM, использующим этот API, предоставлять эти данные, в том числе таким, как RUMVision и DebugBear . Это также обеспечивает эталонную реализацию с открытым исходным кодом для других поставщиков RUM, желающих использовать ее в своем собственном продукте.

LoAF доступен в расширении Web Vitals.

Расширение Web Vitals было обновлено и теперь включает данные длинных кадров анимации, которые помогут вам отлаживать взаимодействия INP:

Ведение журнала консоли расширения Web Vitals.
Журналирование консоли Web Vitals Extension отображает данные LoAF.

Это полезно, чтобы увидеть, какие другие сценарии выполняются во время вашего взаимодействия, что часто является причиной задержек (особенно задержек ввода), но до сих пор их было трудно диагностировать при использовании расширения.

Обновленное руководство по использованию LoAF.

Мы также обновили руководство в нашей основной документации по API длинных кадров анимации, чтобы помочь вам максимально эффективно использовать этот API.

Примеры длинных кадров анимации на странице с выделенным INP LoAF.
На странице может быть множество LoAF, один из которых связан с взаимодействием INP.

Это руководство основано на том, как мы видели использование этого API в полевых условиях, например, в этом тематическом исследовании от Taboola . Мы работаем над рядом других тематических исследований и надеемся опубликовать больше подобных примеров в будущем.

Кроме того, мы также задокументировали API на MDN .

Заключение

API Long Animation Frames — это интересное дополнение к веб-платформе, и мы уже видели ряд сайтов, использующих этот API для улучшения своих сайтов даже на этапе пробного использования. Мы с нетерпением ожидаем более широкого внедрения API в инструментарий и улучшения отзывчивости веб-сайтов благодаря этому API.