Long Animation Frame API (LoAF olarak okunur Lo-Af), Chrome 123'ten kullanıma sunuldu. Ayrıca, bu yeni API'den en iyi şekilde yararlanmanıza yardımcı olmak için araçlarımızı ve kılavuzlarımızı da güncelledik.
LoAF, web-vitals JavaScript kitaplığında mevcut
Web hayati önem taşıyan JavaScript kitaplığının 4. sürümü, LoAF'den nasıl yararlanılacağıyla ilgili bilgiler içeren Alandaki yavaş etkileşimleri bulma kılavuzunda belgelendiği üzere INP etkileşimiyle ilgili uzun animasyon karesi (veya kareleri) içerir.
Google I/O 2024'te, INP etkileşimlerinizi yavaşlatan diğer komut dosyalarını belirlemek için LoAF'den yararlanma da dahil olmak üzere INP hatalarını ayıklamayla ilgili yeni alan analizleri başlıklı konuşmada bu bilgileri sunduk.
API'nin doğrudan kitaplığa entegre edilmesi, bu API'yi kullanan RUM iş ortaklarının RUMVision ve DebugBear gibi veriler dahil olmak üzere bu verileri açığa çıkarmasını sağlar. Bu aynı zamanda kendi ürünlerine bakmak isteyen diğer RUM sağlayıcıları için de açık kaynaklı bir referans uygulaması sağlar.
LoAF, Web Verileri Uzantısı'nda kullanılabilir
Web Vitals Uzantısı, INP etkileşimlerinde hata ayıklamanıza yardımcı olmak için uzun animasyon çerçevesi verilerini içerecek şekilde güncellendi:
Bu, etkileşiminiz sırasında diğer komut dosyalarının çalıştığını görmenize yardımcı olur. Bunlar genellikle gecikmelerin (özellikle giriş gecikmelerinin) nedenleridir, ancak şimdiye kadar uzantıyı kullanırken teşhis edilmesi zordu.
LoAF kullanımıyla ilgili güncellenmiş yönergeler
Bu API'den en iyi şekilde yararlanmanıza yardımcı olmak için ana Long Animation Frames API dokümanlarımızdaki rehberimizi de güncelledik.
Bu kılavuz, söz konusu API'nin sahada nasıl kullanıldığını temel alır (örneğin, Taboola'daki bu örnek olayda). Bir dizi başka örnek olay üzerinde çalışmaya devam ediyoruz ve gelecekte buna benzer daha fazla örnek yayınlamayı umuyoruz.
Ayrıca, API'yi MDN'de belgeledik.
Sonuç
Long Animation Frames API'si, web platformuna heyecan verici bir katkı sağlıyor. Birçok sitenin, deneme aşamasında bile sitelerini iyileştirmek için bu API'yı kullandığını gördük. Bu API sayesinde, araçlarda API'nin daha geniş bir şekilde kullanılmasını ve web sitelerinde yanıt verme hızının artmasını umuyoruz.