การใช้ประโยชน์จาก Long Animation Frames API (LoAF) และการใช้กลยุทธ์การเพิ่มประสิทธิภาพอัจฉริยะช่วยให้ Taboola ปรับปรุงการตอบสนองของเว็บไซต์ผู้เผยแพร่โฆษณาได้โดยไม่กระทบต่อประสิทธิภาพโฆษณา
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 ได้ออกแบบเครื่องมือการแสดงผลทั้งหมดใหม่ รวมถึงใช้ Browser API โดยตรงโดยไม่มีการแยกส่วนเพื่อลดผลกระทบต่อ INP
กรณีศึกษาฉบับนี้ครอบคลุมเส้นทางการปรับปรุง INP ของ Taboola โดยใช้ Long Animation Frames (LoAF) API ใหม่เพื่อวัดผลกระทบต่อการตอบสนองของหน้าเว็บในภาคสนาม และความพยายามในภายหลังในการใช้การเพิ่มประสิทธิภาพที่เฉพาะเจาะจงเพื่อปรับปรุงประสบการณ์ของผู้ใช้
TBT เป็นพร็อกซีของ INP
เวลาทั้งหมดในการบล็อก (TBT) เป็นเมตริกในห้องทดลองที่ระบุตำแหน่งที่ชุดข้อความหลักถูกบล็อกนานพอที่จะส่งผลต่อการตอบสนองของหน้าเว็บ เมตริกภาคสนามที่วัดการตอบสนอง เช่น INP อาจได้รับผลกระทบจาก TBT สูง การตรวจสอบของ Annie Sullivan เกี่ยวกับความสัมพันธ์ระหว่าง TBT กับ INP ในอุปกรณ์เคลื่อนที่แสดงให้เห็นว่าเว็บไซต์มีแนวโน้มที่จะได้คะแนน INP ที่ดีมากขึ้นเมื่อลดเวลาการบล็อกเทรดหลักลง
ความสัมพันธ์นี้รวมกับความกังวลของผู้เผยแพร่โฆษณาของ Taboola เกี่ยวกับ TBT ที่สูง ทำให้ Taboola มุ่งเน้นไปที่การลดผลกระทบต่อเมตริกนี้
RELEASE.js จะบล็อกเทรดหลักเป็นเวลา 691 มิลลิวินาที
Taboola ใช้ TBT เป็นเมตริกพร็อกซีสำหรับ INP และเริ่มตรวจสอบและเพิ่มประสิทธิภาพเวลาในการดำเนินการ JavaScript เพื่อจำกัดผลกระทบที่อาจเกิดขึ้นกับ Core Web Vitals โดยเริ่มจากการทำสิ่งต่อไปนี้
- การระบุและเพิ่มประสิทธิภาพสคริปต์ที่มีปัญหาในภาคสนามโดยใช้ Long Tasks API
- การประมาณการมีส่วนร่วมของ TBT โดยใช้ PageSpeed Insights API เพื่อประเมิน URL 10,000-15,000 รายการในแต่ละวัน
อย่างไรก็ตาม Taboola พบว่าการวิเคราะห์ TBT ด้วยเครื่องมือเหล่านี้มีข้อจำกัดบางประการ ดังนี้
- Long Tasks API ไม่สามารถระบุแหล่งที่มาของงานไปยังโดเมนต้นทางหรือสคริปต์ใดสคริปต์หนึ่งได้ ซึ่งทำให้การระบุแหล่งที่มาของ Long Tasks ยากขึ้น
- Long Tasks API จะระบุเฉพาะงานที่ใช้เวลานาน ไม่ใช่การรวมกันของงานและการเปลี่ยนแปลงเลย์เอาต์ที่อาจทำให้การแสดงผลล่าช้า
Taboola จึงเข้าร่วมการทดลองใช้ต้นทางของ Long Animation Frames (LoAF) API เพื่อรับมือกับความท้าทายเหล่านี้ และพยายามทำความเข้าใจผลกระทบที่แท้จริงต่อการตอบสนองต่ออินพุตของผู้ใช้ให้ดียิ่งขึ้น ช่วงทดลองใช้จากต้นทางช่วยให้เข้าถึงฟีเจอร์ใหม่หรือฟีเจอร์ทดลองได้ ซึ่งช่วยให้นักพัฒนาแอปทดสอบฟีเจอร์ใหม่ๆ ที่ผู้ใช้สามารถลองใช้ได้ในช่วงเวลาจำกัด
เราต้องเน้นย้ำว่าสิ่งที่ยากที่สุดในความท้าทายนี้คือการปรับปรุง INP ให้สำเร็จโดยไม่กระทบต่อ KPI ของโฆษณา(ตัวชี้วัดประสิทธิภาพ) หรือทำให้เกิดความล่าช้าด้านทรัพยากรสำหรับผู้เผยแพร่โฆษณา
การใช้ LoAF เพื่อประเมินผลกระทบของ INP
เฟรมภาพเคลื่อนไหวที่ใช้เวลานานจะเกิดขึ้นเมื่อการอัปเดตการแสดงผลล่าช้าเกิน 50 มิลลิวินาที การระบุสาเหตุของการอัปเดตอินเทอร์เฟซผู้ใช้ที่ช้าแทนที่จะพิจารณาเฉพาะงานที่ใช้เวลานาน ทำให้ Taboola สามารถวิเคราะห์ผลกระทบต่อการตอบสนองของหน้าเว็บในภาคสนามได้ การสังเกตการณ์ LoAF ช่วยให้ Taboola ทำสิ่งต่อไปนี้ได้
- ระบุรายการแอตทริบิวต์ให้กับงาน Taboola ที่เฉพาะเจาะจง
- สังเกตปัญหาด้านประสิทธิภาพในฟีเจอร์ที่เฉพาะเจาะจงก่อนที่จะนำไปใช้ในการผลิต
- รวบรวมข้อมูลรวมเพื่อเปรียบเทียบโค้ดเวอร์ชันต่างๆ ในการทดสอบ 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 แล้ว "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 ของโฆษณา Taboola จะค่อยๆ ปรับปรุงการรับรู้ของผู้เผยแพร่โฆษณาเกี่ยวกับผลิตภัณฑ์ของตน
การเรียกใช้ Lighthouse อีกครั้งในลูกค้าเดียวกันที่ไฮไลต์ไว้ก่อนหน้านี้แสดงให้เห็นว่า Taboola ปรับปรุงเวลาการบล็อกชุดข้อความหลักได้อย่างมากเมื่อใช้เครื่องมือใหม่
RELEASE.js ลด TBT ได้ 485 มิลลิวินาที (-70%)
ซึ่งแสดงให้เห็นว่าการใช้ LoAF เพื่อระบุสาเหตุของ INP และการใช้เทคนิคการเพิ่มประสิทธิภาพที่ตามมาด้วย Performance Fader ช่วยให้พาร์ทเนอร์ของ Taboola ประสบความสําเร็จสูงสุดในด้านประสิทธิภาพโฆษณาและหน้าเว็บ
บทสรุป
การเพิ่มประสิทธิภาพ INP เป็นกระบวนการที่ซับซ้อน โดยเฉพาะเมื่อมีการใช้สคริปต์ของบุคคลที่สามในเว็บไซต์ของพาร์ทเนอร์ ก่อนที่จะเริ่มการเพิ่มประสิทธิภาพ การระบุแหล่งที่มาของ INP ไปยังสคริปต์ที่เฉพาะเจาะจงจะช่วยขจัดข้อสันนิษฐานและอันตรายที่อาจเกิดขึ้นกับเมตริกประสิทธิภาพอื่นๆ ของเว็บไซต์ได้ API ของ LoAF ได้รับการพิสูจน์แล้วว่าเป็นเครื่องมือที่มีประโยชน์ในการระบุและแก้ไขปัญหา INP โดยเฉพาะอย่างยิ่งสำหรับ 3P ที่ฝังไว้ เนื่องจากช่วยให้ระบุโอกาสในการปรับปรุง SDK ที่เฉพาะเจาะจงได้ ในขณะเดียวกันก็ขจัดการรบกวนจากเทคโนโลยีอื่นๆ ที่มีอยู่ในหน้าเว็บ
เมื่อใช้ร่วมกับกลยุทธ์การสร้างรายได้ที่ดี เช่น การใช้ scheduler.postTask() LoAF จะช่วยให้คุณสังเกตและทําความเข้าใจสาเหตุที่หน้าเว็บตอบสนองได้ไม่ดี ซึ่งจะช่วยให้คุณได้รับข้อมูลที่จําเป็นในการปรับปรุง INP ของเว็บไซต์
ขอขอบคุณ Gilberto Cocchi, Noam Rosenthal และ Rick Viscomi จาก Google รวมถึง Dedi Hakak, Anat Dagan และ Omri Ariav จากทีมวิศวกรรมและผลิตภัณฑ์ของ Taboola ที่มีส่วนร่วมในงานนี้