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

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

David Belford
David Belford

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

ภาพหน้าจอของการตรวจสอบ Lighthouse สําหรับเวลาของเทรดหลักที่ถูกบล็อก สคริปต์หลายรายการบล็อกชุดข้อความหลักเป็นเวลารวม 2,630 มิลลิวินาที โดย JavaScript ของบุคคลที่สามมีส่วนทำให้เกิดเวลาดังกล่าว 712 มิลลิวินาที สคริปต์ RELEASE.js ของ Taboola เป็นผู้รับผิดชอบเวลาในการบล็อกของบุคคลที่สามส่วนใหญ่ที่ 691 มิลลิวินาที
เมื่อใช้เครื่องมือเก่าของ Taboola สคริปต์อย่าง RELEASE.js จะบล็อกเธรดหลักเป็นเวลา 691 มิลลิวินาที

เมื่อใช้ 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 สร้างตารางการระบุแหล่งที่มาต่อไปนี้ ซึ่งระบุพื้นที่ที่สามารถใช้โอกาสในการสร้างรายได้

สคริปต์ ระยะเวลา (มิลลิวินาที)
vpaid/units/33_6_8/infra/cmTagINLINE_INSTREAM.js:106517 997
vpaid/units/33_6_8/infra/cmTagFEED_MANAGER.js:496662 561
vpaid/vPlayer/player/v15.8.6/OvaMediaPlayer.js:44631 336
libtrc/impl.20231212-23-RELEASE.js:821090 857
publisher_name/pmk-20220605.5.js:7728 336
libtrc/card-interference-detector.20231219-7-RELEASE.es6.js:183 239
รายการสคริปต์ LoAF ที่บันทึกโดย RUM ของ 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

ผู้เผยแพร่ INP พร้อม TRECS + ตัวควบคุมประสิทธิภาพ INP กับเครื่องยนต์ที่มีอยู่ INP ลดลง (%)
ผู้เผยแพร่โฆษณา ก 48 75 36%
ผู้เผยแพร่โฆษณา ข 153 163 6%
ผู้เผยแพร่โฆษณา C 92 135 33%
ผู้เผยแพร่โฆษณา D 37 52 29%

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

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

ภาพหน้าจอของการตรวจสอบ Lighthouse สําหรับเวลาการบล็อกของเธรดหลักหลังจากใช้ TRECS และเครื่องมือ Performance Fader ใหม่เพื่อปรับปรุงเวลาการบล็อกของเธรดหลัก การตรวจสอบลดลงเหลือเพียง 206 มิลลิวินาที เทียบกับ 712 มิลลิวินาทีก่อนการเพิ่มประสิทธิภาพ
เครื่องมือใหม่ของ Taboola ช่วยให้สคริปต์อย่าง RELEASE.js ลด TBT ได้ 485 ms (-70%)

ข้อมูลนี้แสดงให้เห็นว่าการใช้ 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 ที่ให้ความร่วมมือในงานนี้