API длинных кадров анимации (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.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?hl=ru)
Это полезно, чтобы увидеть, какие другие сценарии выполняются во время вашего взаимодействия, что часто является причиной задержек (особенно задержек ввода), но до сих пор их было трудно диагностировать при использовании расширения.
Обновленное руководство по использованию LoAF.
Мы также обновили рекомендации в нашей основной документации по API длинных кадров анимации, чтобы помочь вам максимально эффективно использовать этот API.
![Примеры длинных кадров анимации на странице с выделенным INP LoAF.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?hl=ru)
Это руководство основано на том, как мы видели использование этого API в полевых условиях, например , в этом тематическом исследовании от Taboola . Мы работаем над рядом других тематических исследований и надеемся опубликовать больше подобных примеров в будущем.
Кроме того, мы также задокументировали API на MDN .
Заключение
API Long Animation Frames — это интересное дополнение к веб-платформе, и мы уже видели ряд сайтов, использующих этот API для улучшения своих сайтов даже на этапе пробного использования. Мы надеемся на более широкое внедрение API в инструментарий и повышение скорости реагирования на веб-сайтах благодаря этому API.
,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.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?hl=ru)
Это полезно, чтобы увидеть, какие другие сценарии выполняются во время вашего взаимодействия, что часто является причиной задержек (особенно задержек ввода), но до сих пор их было трудно диагностировать при использовании расширения.
Обновленное руководство по использованию LoAF.
Мы также обновили рекомендации в нашей основной документации по API длинных кадров анимации, чтобы помочь вам максимально эффективно использовать этот API.
![Примеры длинных кадров анимации на странице с выделенным INP LoAF.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?hl=ru)
Это руководство основано на том, как мы видели использование этого API в полевых условиях, например , в этом тематическом исследовании от Taboola . Мы работаем над рядом других тематических исследований и надеемся опубликовать больше подобных примеров в будущем.
Кроме того, мы также задокументировали API на MDN .
Заключение
API Long Animation Frames — это интересное дополнение к веб-платформе, и мы уже видели ряд сайтов, использующих этот API для улучшения своих сайтов даже на этапе пробного использования. Мы надеемся на более широкое внедрение API в инструментарий и повышение скорости реагирования на веб-сайтах благодаря этому API.