การใช้ประโยชน์จาก Long Animation Frames API (LoAF) และการใช้กลยุทธ์ผลตอบแทนอันชาญฉลาดทำให้ Taboola ปรับปรุงการตอบสนองเว็บไซต์ของผู้เผยแพร่โฆษณาได้โดยไม่กระทบต่อประสิทธิภาพโฆษณา
การโต้ตอบกับ 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 ที่ดีเมื่อลดเวลาในการบล็อกเทรดหลัก
ความสัมพันธ์นี้ประกอบกับข้อกังวลของผู้เผยแพร่โฆษณาเกี่ยวกับ TBT ที่สูงของ Taboola ทำให้ Taboola หันมาให้ความสำคัญกับการลดการมีส่วนร่วมกับเมตริกนี้
RELEASE.js จะบล็อกเทรดหลักเป็นเวลา 691 มิลลิวินาที
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 ของโฆษณา(ตัวชี้วัดประสิทธิภาพ) หรือทำให้ทรัพยากรล่าช้าสำหรับผู้เผยแพร่โฆษณาของเรา
การใช้ 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 ใช้เวลามากกว่า 50 มิลลิวินาทีในการทำงาน โดยระยะเวลามากกว่าครึ่งหนึ่งของระยะเวลาสคริปต์ทั้งหมดเกิดจาก
- ระบบจะสร้าง
firstUIEventTimeStampหากการโต้ตอบของผู้ใช้ล่าช้าเนื่องจากเฟรมภาพเคลื่อนไหวที่ยาว ระยะเวลาการบล็อกที่นานที่สุดถือว่าเป็นคะแนน INP โดยรวม เรายังสามารถระบุเวลาที่ Taboola ทริกเกอร์firstUIEventTimeStampเพื่อคำนวณคะแนน INP ของ Taboola ได้อีกด้วย
ข้อมูลที่รวบรวมด้วย LoAF ช่วยให้ Taboola สร้างตารางการระบุแหล่งที่มาต่อไปนี้ ซึ่งระบุพื้นที่ที่สามารถใช้โอกาสผลตอบแทน
TRECS Engine: กลยุทธ์ด้านผลตอบแทนใหม่
นอกจากการใช้ LoAF เพื่อทำความเข้าใจโอกาสในการเพิ่มประสิทธิภาพสคริปต์แล้ว Taboola ยังได้ออกแบบเครื่องมือการแสดงผลทั้งหมดใหม่เพื่อลดเวลาในการดำเนินการกับ JavaScript และการบล็อกของ 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 ใหม่ได้ด้วย
ในการพิจารณาผลกระทบของ TRECS และ Performance Fader นั้น Taboola ได้ทำการทดสอบ A/B โดยวัด INP เทียบกับเครื่องมือที่มีอยู่ โดยไม่ให้สคริปต์แก่กลุ่มพาร์ทเนอร์ผู้เผยแพร่โฆษณา
ตารางต่อไปนี้แสดงผลลัพธ์ INP ในหน่วยมิลลิวินาทีที่เปอร์เซ็นไทล์ที่ 75 ของผู้เผยแพร่โฆษณาที่ไม่ระบุชื่อ 4 รายในเครือข่าย Taboola
โชคดีที่เมตริกธุรกิจ เช่น อัตราการคลิกผ่านโฆษณาและรายได้ต่อการแสดงผล 1,000 ครั้ง (RPM) ไม่ได้รับผลกระทบในเชิงลบเมื่อเปิดใช้ TRECS และ Performance Fader ในแผงการทดสอบ หลังจากการปรับปรุง INP ในเชิงบวกนี้ไม่ได้ผลลัพธ์เชิงลบตามที่คาดไว้ใน KPI ของ Google Ads ทาง Taboola จะค่อยๆ ปรับปรุงการรับรู้ของผู้เผยแพร่โฆษณาเกี่ยวกับผลิตภัณฑ์ของตน
Lighthouse อีกรายการที่ทำงานโดยลูกค้ารายเดียวกันที่ไฮไลต์ไว้ก่อนหน้าแสดงให้เห็นว่า Taboola ใช้เวลาในการบล็อกเทรดหลักดีขึ้นอย่างมากเมื่อใช้เครื่องมือใหม่
RELEASE.js ลด TBT ลง 485 มิลลิวินาที (-70%)
ซึ่งแสดงให้เห็นว่าการใช้ 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 ที่ร่วมให้ข้อมูลในงานนี้