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

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

David Belford

Thierno Thiam

การโต้ตอบกับ Next Paint (INP) เป็นเมตริกที่ประเมินการตอบสนองของเว็บไซต์ต่อข้อมูลจากผู้ใช้ INP จะวัดเวลาตั้งแต่ที่ผู้ใช้เริ่มการโต้ตอบ เช่น เมื่อคลิก แตะ หรือพิมพ์ ไปจนถึงความคิดเห็นที่เป็นรูปภาพ INP มีขึ้นเนื่องจากมีการแทนที่ First Input Delay (FID) เป็น Core Web Vitals ในเดือนมีนาคม 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 ที่ดีมากขึ้นเมื่อลดเวลาในการบล็อกเทรดหลักให้เหลือน้อยที่สุด

ความสัมพันธ์นี้ควบคู่กับผู้เผยแพร่ของ Taboola ความกังวลเกี่ยวกับ 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 Engine: กลยุทธ์ผลตอบแทนแบบใหม่

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

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

เมื่อระบุงานการบล็อกการแสดงผลโดยใช้ LoAF แล้ว ค่าของ "Performance Fader" สามารถแบ่งงานเหล่านั้นก่อนที่จะแสดงในชุดข้อความหลักโดยใช้ 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 ใหม่ได้

Taboola ได้ทดสอบ A/B เพื่อวัด INP จากเครื่องมือที่มีอยู่โดยไม่มีสคริปต์ที่มาจากแผงของพาร์ทเนอร์ผู้เผยแพร่โฆษณาเพื่อระบุผลกระทบของ TRECS และ Performance Fader

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

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

Lighthouse อีกรายการหนึ่งที่ทำงานกับลูกค้ารายเดียวกันที่ไฮไลต์ไว้ก่อนหน้านี้แสดงให้เห็นว่า Taboola ใช้เวลาบล็อกเทรดหลักเพิ่มขึ้นอย่างมากเมื่อใช้เครื่องมือค้นหาใหม่

วันที่

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

บทสรุป

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

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

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