ה-Long Animation Frame 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
התוסף של מדדי חוויית המשתמש באינטרנט עודכן כך שיכלול נתונים של פריימים ארוכים של אנימציה, כדי לעזור לכם לנפות באגים באינטראקציות של INP:
![רישום ביומן של מסוף התוסף של Web Vitals.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?authuser=8&hl=he)
התכונה הזו מאפשרת לראות אילו סקריפטים אחרים פועלים בזמן האינטראקציה שלכם. סקריפטים כאלה הם לרוב הגורם לעיכובים (במיוחד עיכובים בהזנת נתונים), אבל עד עכשיו היה קשה לאבחן אותם כשמשתמשים בתוסף.
הנחיות מעודכנות לשימוש ב-LoAF
בנוסף, עדכנו את ההנחיות במסמך התיעוד הראשי של Long Animation Frames API כדי לעזור לכם להפיק את המקסימום מה-API הזה.
![דוגמאות לפריימים ארוכים של אנימציה בדף, עם הדגשה של INP LoAF.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?authuser=8&hl=he)
ההנחיות האלה מבוססות על האופן שבו ראינו את השימוש ב-API הזה בשטח, למשל במחקר המקרה הזה של Taboola. אנחנו עובדים על כמה מחקרים נוספים ונשמח לפרסם דוגמאות נוספות כאלה בעתיד.
בנוסף, תיעדנו את ה-API ב-MDN.
סיכום
Long Animation Frames API הוא תוספת מעניינת לפלטפורמת האינטרנט, וכבר ראינו מספר אתרים שמשתמשים ב-API הזה כדי לשפר את האתרים שלהם, גם במהלך שלב הניסיון. אנחנו מצפים לשימוש נרחב יותר ב-API בכלים ולשיפור מהירות התגובה באתרים בעזרת ה-API הזה.