การใช้ 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 ได้ออกแบบเครื่องมือแสดงผลทั้งหมดใหม่ รวมถึงใช้ 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 ทําสิ่งต่อไปนี้ได้
- ระบุแหล่งที่มาของรายการให้กับงาน 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
หากการโต้ตอบของผู้ใช้ล่าช้าเนื่องจากเฟรมภาพเคลื่อนไหวยาว ระยะเวลาการบล็อกที่นานที่สุดถือเป็นคะแนน 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 ที่ให้ความร่วมมือในงานนี้