איך חברת Taboola השתמשה ב-LoAF כדי לשפר את ה-INP ב-36% עבור האתרים של שותפיה בעלי תוכן דיגיטלי.

איך השימוש ב-Long Animation Frames API (LoAF) ואימוץ אסטרטגיית חלוקת משאבים חכמה אפשרו ל-Taboola לשפר את מהירות התגובה של אתרי בעלי תוכן דיגיטלי בלי לפגוע בביצועי המודעות.

David Belford

Thierno Thiam

מהירות התגובה לאינטראקציה באתר (INP) הוא מדד להערכת הרספונסיביות של אתר לקלט משתמש. המדד INP מודד את הזמן שחל מהרגע שבו משתמש מתחיל אינטראקציה – למשל לחיצה, הקשה או הקלדה – ועד למשוב החזותי שמתקבל. מדד INP יחליף את מדד מהירות התגובה לאינטראקציה ראשונה (FID) כמדד ליבה לבדיקת חוויית המשתמש באתר במרץ 2024.

‫Taboola היא פלטפורמה מובילה בעולם לגילוי תוכן, שמציגה 500,000 המלצות בכל שנייה באינטרנט הפתוח. ההמלצות האלה מאפשרות ל-9,000 השותפים הבלעדיים של Taboola לייצר הכנסות ולמשוך את הקהלים שלהם. בעלי תוכן דיגיטלי מציגים המלצות בדפים שלהם באמצעות JavaScript.

מאחר ש-JavaScript של צד שלישי יכול להשפיע על היכולת של דף להגיב במהירות לקלט של משתמשים, ב-Taboola השקיעו מאמצים רבים בצמצום הגודל של קובצי ה-JavaScript ומשך הביצוע שלהם. חברת Taboola עיצבה מחדש את כל מנוע העיבוד שלה, וגם השתמשה בממשקי API של הדפדפן ישירות ללא הפשטות כדי למזער את ההשפעה שלו על INP.

במקרה לדוגמה הזה מתוארת הדרך שבה חברת Taboola שיפרה את מדד INP באמצעות Long Animation Frames (LoAF) API החדש כדי למדוד את ההשפעה שלו על מהירות התגובה של הדף בשטח, ואת המאמצים שנעשו לאחר מכן כדי ליישם אופטימיזציות ספציפיות לשיפור חוויית המשתמש.

TBT כפרוקסי של INP

זמן חסימה כולל (TBT) הוא מדד שמבוסס על נתונים ממעבדה, שמזהה מקרים שבהם ה-thread הראשי נחסם למשך זמן מספיק ארוך שעלול להשפיע על מהירות התגובה של הדף. מדדים בשטח שמודדים את מהירות התגובה – כמו INP – יכולים להיות מושפעים מ-TBT גבוה. במחקר של Annie Sullivan בנושא הקשר בין TBT ל-INP במכשירים ניידים נמצא שאתרים נוטים יותר להשיג ציוני INP טובים כשהזמן שבו ה-thread הראשי חסום הוא מינימלי.

המתאם הזה, יחד עם החששות של בעלי האתרים של Taboola לגבי ערכי TBT גבוהים, הובילו את Taboola להתמקד בצמצום התרומה שלה למדד הזה.

חברת Taboola החלה להשתמש ב-TBT כמדד פרוקסי ל-INP, כדי לעקוב אחרי זמן הביצוע של JavaScript ולבצע בו אופטימיזציה, במטרה להגביל את ההשפעה הפוטנציאלית שלו על מדדי הליבה לבדיקת חוויית המשתמש באתר. הם התחילו בפעולות הבאות:

• זיהוי סקריפטים בעייתיים בשטח ואופטימיזציה שלהם באמצעות Long Tasks API.
• הערכת התרומות של TBT באמצעות PageSpeed Insights API כדי להעריך 10,000 עד 15,000 כתובות URL בכל יום.

עם זאת, ב-Taboola הבחינו שיש כמה מגבלות בניתוח של TBT באמצעות הכלים האלה:

• ממשק ה-API של משימות ארוכות לא יכול לשייך את המשימה לדומיין המקור או לסקריפט מסוים, ולכן קשה יותר לזהות את המקורות של משימות ארוכות.
• ‫Long Tasks API מזהה רק משימות ממושכות, ולא שילוב של משימות ושינויים בפריסה שיכולים לגרום לעיכוב בעיבוד.

כדי להתמודד עם האתגרים האלה, Taboola הצטרפה לניסוי המקור של Long Animation Frames (LoAF) API כדי להבין טוב יותר את ההשפעה האמיתית שלו על מהירות התגובה לקלט של המשתמשים. גרסאות מקור לניסיון מאפשרות גישה לתכונות חדשות או ניסיוניות, ומאפשרות למפתחים לבדוק תכונות חדשות שהמשתמשים שלהם יכולים לנסות לזמן מוגבל.

חשוב לציין שההיבט הכי מאתגר במשימה הזו היה לשפר את מדד ה-INP בלי לפגוע במדדי הביצועים המרכזיים(KPI) של מודעות או לגרום לעיכובים במשאבים של בעלי האתרים שלנו.

שימוש ב-LoAF כדי להעריך את ההשפעה של INP

פריים ארוך של אנימציה מתרחש כשעדכון של רינדור מתעכב מעבר ל-50 מילי-שניות. באמצעות זיהוי הגורמים לעדכונים איטיים בממשק המשתמש – ולא רק משימות ארוכות – הצליחה Taboola לנתח את ההשפעה של העדכונים על מהירות התגובה של הדף בשטח. התצפית על LoAF אפשרה ל-Taboola:

1. שיוך רשומות של מאפיינים למשימות ספציפיות ב-Taboola.
2. לזהות בעיות בביצועים בתכונות ספציפיות לפני הפריסה שלהן בסביבת הייצור.
3. איסוף נתונים מצטברים כדי להשוות בין גרסאות שונות של קוד בבדיקות A/B, ודיווח על מדדי הצלחה מרכזיים.

קוד ה-JavaScript הבא הוא גרסה פשוטה שמשמשת בסביבת ייצור לאיסוף נתוני LoAF כדי לבודד את ההשפעה של Taboola.

function loafEntryAnalysis (entry) {
  if (entry.blockingDuration === 0) {
    return;
  }

  let taboolaIsMajor = false;
  const hasInteraction = entry.firstUIEventTimestamp > 0;
  let taboolaDuration = 0;
  const nonTaboolaLoafReport = {};
  const taboolaLoafReport = {};

  entry.scripts.forEach((script) => {
    const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
    taboolaDuration += taboolaScriptBlockingDuration;

    if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
      taboolaIsMajor = true;
    }
  });

  generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);

  if (hasInteraction) {
    const global = _longAnimationFramesReport.global;
    global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);

    if (taboolaIsMajor) {
      global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
    }
  }
}

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    loafEntryAnalysis(entry);
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

• השימוש בפונקציה loafEntryAnalysis אפשר ל-Taboola לזהות רשומות שבהן היא תורמת משמעותית.
• ‫Taboola נחשבת כגורם משמעותי אם יותר ממחצית ממשך התסריט הכולל נגרמת על ידי Taboola, או אם לוקח לתסריט של Taboola יותר מ-50 אלפיות השנייה לפעול.
• firstUIEventTimeStamp נוצר אם האינטראקציה של המשתמש מתעכבת בגלל Long Animation Frame. המשך החסימה הארוך ביותר נחשב לציון הכולל של INP. אנחנו יכולים גם לזהות מתי Taboola הפעילה firstUIEventTimeStamp כדי לחשב ציון INP של Taboola.

הנתונים שנאספו באמצעות LoAF עזרו ל-Taboola ליצור את טבלת השיוך הבאה, שמזהה אזורים שבהם אפשר להחיל הזדמנויות להגדלת נפח התנועה.

מנוע TRECS: אסטרטגיית התפוקה החדשה

בנוסף לשימוש ב-LoAF כדי להבין טוב יותר את ההזדמנויות לאופטימיזציה של סקריפטים, Taboola מעצבת מחדש את כל מנוע העיבוד שלה כדי לצמצם באופן משמעותי את זמן הביצוע של JavaScript ואת זמן החסימה.

‫TRECS (Taboola Recommendations Extensible Client Service) שומר על עיבוד בצד הלקוח ועל קוד ה-JS הנוכחי של בעל התוכן הדיגיטלי, תוך צמצום מספר הקבצים הנדרשים וגודלם כדי לטעון את ההמלצות של Taboola.

אחרי שמזהים משימות שחוסמות את הרינדור באמצעות LoAF, אפשר לפצל את המשימות האלה לפני שהן מועברות ל-thread הראשי באמצעות scheduler.postTask(). העיצוב הזה מבטיח שפעולות חשובות שמוצגות למשתמשים – כמו עדכוני רינדור – יבוצעו בהקדם האפשרי, בלי קשר למשימות קיימות שאולי תופסות את השרשור הראשי.

הנה קטע ה-JS של כלי ההרצה של המשימה Performance Fader:

/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
  const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
  const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;

  if (applyYielding) {
    return runAsPostTask(task, isBlocker);
  }

  return runImmediately(task);
}

/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
  if ('scheduler' in window && 'postTask' in scheduler) {
    const priority = isBlocker ? 'user-blocking': 'background';

    return window?.scheduler?.postTask(task, { priority });
  }

  const publisherChoiceEnableFallback = fillPublisherChoices();

  if (publisherChoiceEnableFallback) {
    return new Promise(resolve => {
      window.setTimeout(() => {
        resolve(task());
      }, 0);
    });
  }

  return runImmediately(task);
}

הפונקציה sendTaskToFader:

• משתמש ב-runAsPostTask, שמשתמש ב-scheduler.postTask() מתחת לפני השטח (אם ה-API זמין), או עובר ל-setTimeout.
• הפונקציה הזו עוטפת קריאות לפונקציות בקטעי קוד שגורמים למסגרות ארוכות של אנימציה ול-INP. הוא מפצל את קטעי הקוד האלה למשימות קצרות יותר, וכך מקטין את מדד ה-INP.

מדדים עסקיים

הודות ל-LoAF, ‏ Taboola הצליחה להבין טוב יותר את ההשפעה שלה על INP. הכלי גם הדגיש הזדמנויות לאופטימיזציה של סקריפטים שאפשר להשתמש בהם כחלק ממנוע TRECS החדש.

כדי לקבוע את ההשפעה של TRECS ושל Performance Fader, חברת Taboola ערכה בדיקת A/B למדידת INP לעומת המנוע הקיים ללא סקריפט, בפאנל של שותפי תוכן דיגיטלי.

בטבלה הבאה מוצגות תוצאות של INP במילישניות באחוזון ה-75 של ארבעה בעלי תוכן דיגיטלי אנונימיים ברשת Taboola.

למזלנו, מדדים עסקיים כמו שיעור הקליקים על מודעות והכנסה לאלף חשיפות (RPM) לא הושפעו לרעה כש-TRECS ו-Performance Fader הופעלו בחלונית הבדיקה. בעקבות השיפור החיובי הזה ב-INP ללא תוצאה שלילית כצפוי במדדי הביצועים של Google Ads, ‏ Taboola תשפר בהדרגה את התפיסה של בעלי האתרים לגבי המוצר שלה.

הרצה נוספת של Lighthouse אצל אותו לקוח שהוזכר קודם מדגימה שיפור משמעותי בזמן החסימה של ה-Thread הראשי על ידי Taboola כשמשתמשים במנוע החדש.

הנתונים האלה מוכיחים ששימוש ב-LoAF כדי לזהות את הגורמים ל-INP ויישום טכניקות ההשהיה הבאות באמצעות Performance Fader מאפשרים לשותפים של Taboola להשיג הצלחה מקסימלית בביצועי המודעות והדפים.

סיכום

אופטימיזציה של INP היא תהליך מורכב, במיוחד כשמשתמשים בסקריפטים של צד שלישי באתרים של שותפים. לפני שמתחילים באופטימיזציה, שיוך של INP לסקריפטים ספציפיים מסיר את הצורך בניחושים ומצמצם את הסיכון לפגיעה במדדי ביצועים אחרים באתר. ה-API של LoAF הוא כלי חשוב לזיהוי בעיות INP ולטיפול בהן, במיוחד כשמדובר ב-3P שמוטמעים באתר. הוא מאפשר לזהות הזדמנויות לשיפור ה-SDK הספציפי שלהם, תוך ביטול הפרעות מטכנולוגיות אחרות שקיימות בדף.

כשמשתמשים ב-LoAF בשילוב עם שיטת בידינג טובה – כמו שימוש ב-scheduler.postTask() – הכלי יכול לעזור לכם לזהות את הסיבה לתגובתיות נמוכה של הדף ולהבין אותה, וכך לקבל את המידע שאתם צריכים כדי לשפר את מדד ה-INP של האתר.

תודה מיוחדת לגלברטו קוקי, נועם רוזנטל וריק ויסקומי מ-Google, ולדדי חקק, ענת דגן ועמרי אריאב מצוות ההנדסה והמוצר של Taboola על תרומתם לעבודה הזו.