Long Animation Frame API gönderildi

Barry Pollard

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

Uzun Animasyon Çerçevesi API'si (LoAF - Lo-Af olarak okunur), Chrome 123'ten itibaren kullanıma sunulmuştur. Bu yeni API'den en iyi şekilde yararlanmanıza yardımcı olmak için araçlarımızı ve yönergelerimizi de güncelledik.

LoAF, web-vitals JavaScript kitaplığında kullanılabilir.

web-vitals JavaScript kitaplığının 4. sürümü, Alanda yavaş etkileşimleri bulma kılavuzunda belirtildiği gibi INP etkileşimiyle ilgili uzun animasyon çerçevesini (veya çerçevelerini) içerir. Bu, LoAF'tan nasıl yararlanacağınızla ilgili bilgileri içermek içindir.

Google I/O 2024'te, INP etkileşimlerinizi yavaşlatan diğer komut dosyalarını belirlemek için LoAF'tan yararlanma da dahil olmak üzere bu bilgileri INP'de hata ayıklamayla ilgili yeni alan analizleri konulu konuşmada sunduk.

API'nin doğrudan kitaplığa entegre edilmesi, bu API'yi kullanan RUM iş ortaklarının (ör. RUMVision ve DebugBear) bu verileri göstermesine olanak tanır. Bu, kendi ürünlerine eklemek isteyen diğer RUM sağlayıcılar için açık kaynak bir referans uygulama da sağlar.

LoAF, Web Vitals uzantısında kullanılabilir.

Web Vitals Uzantısı, INP etkileşimlerinde hata ayıklamanıza yardımcı olmak için uzun animasyon karesi verilerini içerecek şekilde güncellendi:

Web Vitals uzantısı konsol günlük kaydı.
Web Vitals uzantısı konsol günlük kaydı, LoAF verilerini gösterir.

Bu, etkileşiminiz sırasında hangi diğer komut dosyalarının çalıştığını görmek için yararlıdır. Bu komut dosyaları genellikle gecikmelere (özellikle giriş gecikmelerine) neden olur ancak uzantı kullanılırken teşhis edilmesi şimdiye kadar zordu.

LoAF'ın kullanımıyla ilgili güncellenmiş yönergeler

Ayrıca, bu API'den en iyi şekilde yararlanmanıza yardımcı olmak için ana Uzun Animasyon Kareleri API dokümanlarımızdaki yönergelerimizi güncelledik.

Bir sayfadaki uzun animasyon karelerine örnek. INP LoAF vurgulanmıştır.
Bir sayfada, INP etkileşimiyle ilgili olanlardan biri olmak üzere birçok LoAF olabilir.

Bu kılavuz, bu API'nin alanda nasıl kullanıldığını gözlemlememiz temel alınarak hazırlanmıştır (ör. Taboola'nın bu örnek olayında). Diğer birkaç örnek üzerinde çalışıyoruz ve gelecekte bu tür daha fazla örnek yayınlamayı umuyoruz.

Ayrıca API'yi MDN'de belgeledik.

Sonuç

Uzun Animasyon Kareleri API'si, web platformuna heyecan verici bir katkıdır. Henüz deneme aşamasındayken bile sitelerini iyileştirmek için bu API'yi kullanan birçok site gördük. Bu API'nin araç setlerinde daha yaygın bir şekilde kullanılmasını ve web sitelerinde daha iyi yanıt vermeyi umuyoruz.