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 มุ่งเน้นที่การลดการมีส่วนร่วมในเมตริกนี้

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

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

บทสรุป

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

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

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