Taboola ผู้ให้บริการแนะนำเนื้อหาใช้ LoAF ในการปรับปรุง INP สูงสุด 36% สำหรับเว็บไซต์พาร์ทเนอร์ผู้เผยแพร่โฆษณา

การใช้ Long Animation Frames API (LoAF) และการใช้กลยุทธ์การสร้างรายได้อย่างชาญฉลาดช่วยให้ Taboola ปรับปรุงการตอบสนองของเว็บไซต์ของผู้เผยแพร่โฆษณาได้โดยไม่กระทบประสิทธิภาพโฆษณา

David Belford

Thierno Thiam

Interaction to Next Paint (INP) คือเมตริกที่ประเมินการตอบสนองของเว็บไซต์ต่ออินพุตของผู้ใช้ INP จะวัดเวลาตั้งแต่ที่ผู้ใช้เริ่มโต้ตอบ เช่น เมื่อคลิก แตะ หรือพิมพ์ ไปจนถึงผลลัพธ์ที่เป็นภาพ INP จะแทนที่ First Input Delay (FID) เป็น Core Web Vital ในเดือนมีนาคม 2024

Taboola เป็นแพลตฟอร์มการค้นพบเนื้อหาชั้นนําของโลกที่แสดงคําแนะนํา 500,000 รายการต่อวินาทีบนเว็บแบบเปิด คําแนะนําเหล่านี้ช่วยให้พาร์ทเนอร์ผู้เผยแพร่โฆษณาสุดพิเศษ 9,000 รายของ Taboola สร้างรายได้และดึงดูดผู้ชมได้ ผู้เผยแพร่โฆษณาแสดงผลคําแนะนําในหน้าเว็บโดยใช้ JavaScript

เนื่องจาก JavaScript ของบุคคลที่สามอาจส่งผลต่อความสามารถของหน้าเว็บในการตอบสนองต่ออินพุตของผู้ใช้อย่างรวดเร็ว Taboola จึงลงทุนอย่างหนักเพื่อลดขนาดไฟล์ JavaScript และเวลาในการดำเนินการ Taboola ได้ออกแบบเครื่องมือการแสดงภาพทั้งหมดใหม่ และใช้ API ของเบราว์เซอร์โดยตรงโดยไม่มีนามธรรมเพื่อลดผลกระทบต่อ INP

กรณีศึกษานี้ครอบคลุมเส้นทางของ Taboola ในการปรับปรุง INP โดยใช้ Long Animation Frames (LoAF) API ใหม่เพื่อวัดผลลัพธ์ที่ส่งผลต่อเวลาในการตอบสนองของหน้าเว็บในสนาม และการพยายามใช้การเพิ่มประสิทธิภาพที่เฉพาะเจาะจงเพื่อปรับปรุงประสบการณ์ของผู้ใช้ในภายหลัง

TBT เป็นพร็อกซีของ INP

เวลาทั้งหมดในการบล็อก (TBT) คือเมตริกที่อิงตามห้องทดลอง ซึ่งระบุตำแหน่งที่มีการบล็อกเทรดหลักเป็นเวลานานพอที่จะมีแนวโน้มที่จะส่งผลต่อการตอบสนองของหน้าเว็บ เมตริกในช่องที่วัดการตอบสนอง เช่น INP อาจได้รับผลกระทบจาก TBT ที่สูง Annie Sullivan ได้ทำการวิจัยเกี่ยวกับความสัมพันธ์ระหว่าง TBT กับ INP ในอุปกรณ์เคลื่อนที่ ซึ่งพบว่าเว็บไซต์มีแนวโน้มที่จะได้คะแนน INP ที่ดีมากขึ้นเมื่อลดเวลาการบล็อกของเธรดหลักให้น้อยที่สุด

ความเกี่ยวข้องนี้ประกอบกับข้อกังวลของผู้เผยแพร่โฆษณาเกี่ยวกับ TBT ที่สูง ทําให้ Taboola มุ่งเน้นที่การลดการมีส่วนร่วมในเมตริกนี้

Taboola เริ่มตรวจสอบและเพิ่มประสิทธิภาพเวลาในการเรียกใช้ JavaScript เพื่อจำกัดผลกระทบที่อาจมีต่อ Core Web Vitals โดยใช้ TBT เป็นเมตริกพร็อกซีสำหรับ INP โดยเริ่มจากการดำเนินการต่อไปนี้

• ระบุและเพิ่มประสิทธิภาพสคริปต์ที่มีปัญหาในสนามโดยใช้ Long Tasks API
• ประมาณการมีส่วนร่วมระดับ TBT โดยใช้ PageSpeed Insights API เพื่อประเมิน URL จำนวน 10,000 ถึง 15,000 รายการในแต่ละวัน

อย่างไรก็ตาม Taboola พบว่าการวิเคราะห์ TBT ด้วยเครื่องมือเหล่านี้มีข้อจำกัดบางประการดังนี้

• Long Tasks API ไม่สามารถระบุแหล่งที่มาของงานว่าเป็นโดเมนต้นทางหรือสคริปต์ใด ทำให้ระบุแหล่งที่มาของงานที่ใช้เวลานานได้ยากขึ้น
• Long Tasks API จะระบุเฉพาะงานที่ใช้เวลานาน ไม่ใช่การรวมงานและการเปลี่ยนแปลงเลย์เอาต์ที่อาจทําให้การแสดงผลล่าช้า

เพื่อรับมือกับความท้าทายเหล่านี้ Taboola ได้เข้าร่วมช่วงทดลองใช้ Long Animation Frames (LoAF) API จากต้นทางเพื่อทำความเข้าใจผลกระทบที่แท้จริงที่มีต่อการตอบกลับการป้อนข้อมูลของผู้ใช้ ช่วงทดลองใช้จากต้นทางให้สิทธิ์เข้าถึงฟีเจอร์ใหม่ๆ หรือฟีเจอร์ทดลอง ซึ่งช่วยให้นักพัฒนาแอปสามารถทดสอบฟีเจอร์ใหม่ๆ ที่ผู้ใช้จะใช้ได้ในระยะเวลาจำกัด

เราขอเน้นย้ำว่าส่วนที่ยากที่สุดของความท้าทายนี้ก็คือการปรับปรุง INP ให้ประสบความสำเร็จโดยไม่ลด KPI(ตัวชี้วัดประสิทธิภาพหลัก) ของ Google Ads หรือก่อให้เกิดความล่าช้าของทรัพยากรสำหรับผู้เผยแพร่โฆษณา

การใช้ 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 หากการโต้ตอบของผู้ใช้ล่าช้าเนื่องจากเฟรมภาพเคลื่อนไหวที่ใช้เวลานาน ระยะเวลาการบล็อกที่ยาวที่สุดถือเป็นคะแนน INP โดยรวม เรายังสามารถระบุได้เมื่อ Taboola ทริกเกอร์ firstUIEventTimeStamp เพื่อคำนวณคะแนน INP ของ Taboola

ข้อมูลที่รวบรวมด้วย LoAF ช่วยให้ Taboola สร้างตารางการระบุแหล่งที่มาต่อไปนี้ ซึ่งระบุพื้นที่ที่สามารถใช้โอกาสในการสร้างรายได้

เครื่องมือ TRECS: กลยุทธ์การสร้างรายได้แบบใหม่

นอกจากการใช้ LoAF เพื่อให้เข้าใจโอกาสในการเพิ่มประสิทธิภาพสคริปต์ได้ดียิ่งขึ้นแล้ว Taboola ยังออกแบบเครื่องมือแสดงผลทั้งหมดใหม่เพื่อลดเวลาในการประมวลผลและบล็อก JavaScript ของ JavaScript ให้ได้มากที่สุด

TRECS (Taboola Recommendations Extensible Client Service) ดูแลการแสดงผลฝั่งไคลเอ็นต์และโค้ด JS ปัจจุบันของผู้เผยแพร่โฆษณา ขณะเดียวกันก็ลดจํานวนขนาดของไฟล์ที่จําเป็นในการโหลดคําแนะนําของ Taboola

เมื่อระบบระบุงานที่บล็อกการแสดงผลโดยใช้ LoAF แล้ว "ตัวควบคุมประสิทธิภาพ" จะแบ่งงานเหล่านั้นออกก่อนที่จะส่งมอบให้กับเธรดหลักโดยใช้ scheduler.postTask() การออกแบบนี้ช่วยให้มั่นใจได้ว่างานที่สำคัญต่อผู้ใช้ เช่น การอัปเดตการแสดงผล จะสามารถดำเนินการโดยเร็วที่สุด ไม่ว่างานที่มีอยู่จะครอบครองเธรดหลักอยู่ก็ตาม

นี่เป็นข้อมูลโค้ด JS ของโปรแกรมรันไทม์ "ตัวควบคุมประสิทธิภาพ"

/**
* 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 และตัวควบคุมประสิทธิภาพ Taboola ได้ทำการทดสอบ A/B ซึ่งวัด INP เทียบกับเครื่องมือที่มีอยู่โดยไม่มีการแสดงผลสคริปต์ในแผงพาร์ทเนอร์ผู้เผยแพร่โฆษณา

ตารางต่อไปนี้แสดงผลลัพธ์ INP เป็นมิลลิวินาทีที่เปอร์เซ็นต์ไทล์ 75 ของผู้เผยแพร่โฆษณาที่ไม่ระบุตัวตน 4 รายในเครือข่าย Taboola

แต่โชคดีที่เมตริกทางธุรกิจ เช่น อัตราการคลิกผ่านของโฆษณาและรายได้ต่อการแสดงผล 1,000 ครั้ง (RPM) ไม่ได้รับผลกระทบเชิงลบเมื่อเปิดใช้ TRECS และตัวควบคุมประสิทธิภาพในแผงการทดสอบ การปรับปรุง INP ในเชิงบวกนี้โดยไม่มีผลลัพธ์เชิงลบตามที่คาดไว้ใน KPI ของ Google Ads ทำให้ Taboola ค่อยๆ ปรับปรุงการรับรู้ของผู้เผยแพร่โฆษณาเกี่ยวกับผลิตภัณฑ์ของตนให้มากขึ้น

Lighthouse ที่ใช้กับลูกค้ารายเดียวกันซึ่งไฮไลต์ไว้ก่อนหน้านี้แสดงให้เห็นถึงการปรับปรุงเวลาการบล็อกชุดข้อความหลักอย่างมีนัยสําคัญโดย Taboola เมื่อใช้เครื่องมือใหม่

ซึ่งแสดงให้เห็นว่าการใช้ LoAF ในการระบุสาเหตุของ INP และการปรับใช้เทคนิคผลตอบแทนที่ตามมากับ Performance Fader ทำให้พาร์ทเนอร์ของ Taboola ประสบความสำเร็จสูงสุดในประสิทธิภาพโฆษณาและประสิทธิภาพของหน้าเว็บ

บทสรุป

การเพิ่มประสิทธิภาพ INP เป็นกระบวนการที่ซับซ้อน โดยเฉพาะอย่างยิ่งเมื่อใช้สคริปต์ของบุคคลที่สามในเว็บไซต์ของพาร์ทเนอร์ ก่อนที่จะเริ่มการเพิ่มประสิทธิภาพ การระบุแหล่งที่มาของ INP ไปยังสคริปต์ที่เฉพาะเจาะจงจะช่วยขจัดข้อคาดเดาและความเสียหายที่อาจเกิดขึ้นกับเมตริกประสิทธิภาพอื่นๆ ของเว็บไซต์ LoAF API พิสูจน์แล้วว่าเป็นเครื่องมือที่มีประโยชน์ในการระบุและแก้ไขปัญหา INP โดยเฉพาะสําหรับบุคคลที่สามที่ฝังอยู่ โดยช่วยให้บุคคลที่สามระบุโอกาสในการปรับปรุง SDK ที่เฉพาะเจาะจงได้ พร้อมทั้งขจัดการรบกวนจากเทคโนโลยีอื่นๆ ในหน้าเว็บ

เมื่อใช้ร่วมกับกลยุทธ์การสร้างรายได้ที่ดี เช่น การใช้ scheduler.postTask() จะช่วยให้คุณสังเกตและเข้าใจสาเหตุที่หน้าเว็บตอบสนองได้ไม่ดี ซึ่งจะช่วยให้คุณได้รับข้อมูลที่จําเป็นในการปรับปรุง INP ของเว็บไซต์

ขอขอบคุณ Gilberto Cocchi, Noam Rosenthal และ Rick Viscomi จาก Google รวมถึง Dedi Hakak, Anat Dagan และ Omri Ariav จากทีมวิศวกรและทีมผลิตภัณฑ์ของ Taboola ที่ให้ความร่วมมือในงานนี้