API khung ảnh động dài (Lo-Af phát âm theo LoAF) đã được chuyển từ Chrome 123 và chúng tôi hiện cũng đã cập nhật công cụ và hướng dẫn của mình để giúp bạn khai thác tối đa API mới này.
LoAF có trong thư viện JavaScript web-vitals
Phiên bản 4 của thư viện JavaScript quan trọng trên web bao gồm khung hoạt ảnh (hoặc khung) dài liên quan đến tương tác INP như được nêu trong hướng dẫn Tìm tương tác chậm trong trường để bao gồm thông tin về cách tận dụng LoAF.
Tại Google I/O 2024, chúng tôi đã trình bày thông tin này trong bài nói chuyện Thông tin chi tiết mới về các trường để gỡ lỗi INP, trong đó có việc tận dụng LoAF để xác định những tập lệnh khác làm chậm tương tác INP.
Việc tích hợp API trực tiếp trong thư viện cho phép các đối tác RUM sử dụng API này để hiển thị dữ liệu này, bao gồm cả các ứng dụng như RUMVision và DebugBear. Đây cũng là cách triển khai tệp tham chiếu nguồn mở cho các nhà cung cấp dịch vụ rum khác muốn sử dụng công cụ này cho sản phẩm của họ.
LoAF có sẵn trong Tiện ích Chỉ số quan trọng của trang web
Phần mở rộng Chỉ số quan trọng đối với trang web đã được cập nhật để thêm dữ liệu về khung ảnh động dài nhằm giúp bạn gỡ lỗi các hoạt động tương tác INP:
Điều này rất hữu ích để xem các tập lệnh khác đang chạy tại thời điểm tương tác của bạn. Đây thường là nguyên nhân gây ra sự chậm trễ (đặc biệt là độ trễ đầu vào) nhưng cho đến nay vẫn khó chẩn đoán khi sử dụng tiện ích.
Hướng dẫn mới về cách sử dụng LoAF
Chúng tôi cũng đã cập nhật hướng dẫn trong tài liệu chính về Long Animation Frames API (API Khung ảnh động dài) để giúp bạn khai thác tối đa API này.
Hướng dẫn này dựa trên cách chúng tôi thấy API này được sử dụng tại hiện trường, chẳng hạn như trong nghiên cứu điển hình này của Taboola. Chúng tôi đang nghiên cứu một số nghiên cứu điển hình khác và mong muốn xuất bản thêm nhiều ví dụ tương tự trong tương lai.
Ngoài ra, chúng tôi cũng đã ghi lại API trên MDN.
Kết luận
API Khung hoạt ảnh dài là một bổ sung thú vị cho nền tảng web và chúng tôi đã thấy nhiều trang web sử dụng API này để cải thiện trang web của họ ngay cả trong giai đoạn dùng thử. Chúng tôi mong muốn API này sẽ được sử dụng rộng rãi hơn trong công cụ và khả năng phản hồi nhanh hơn trên trang web.