Cách tận dụng Long Animation Frames API (LoAF) và áp dụng chiến lược phân luồng thông minh giúp Taboola cải thiện khả năng phản hồi của trang web của nhà xuất bản mà không ảnh hưởng đến hiệu suất quảng cáo.
Lượt tương tác đến nội dung hiển thị tiếp theo (INP) là một chỉ số đánh giá khả năng phản hồi của một trang web đối với hoạt động đầu vào của người dùng. INP đo lường thời gian từ khi người dùng bắt đầu một lượt tương tác (chẳng hạn như khi nhấp, nhấn hoặc nhập) cho đến khi nhận được phản hồi trực quan. INP dự kiến sẽ thay thế Độ trễ đầu vào đầu tiên (FID) làm một Chỉ số quan trọng chính của trang web vào tháng 3 năm 2024.
Taboola là nền tảng khám phá nội dung hàng đầu thế giới, cung cấp 500.000 đề xuất mỗi giây trên môi trường web mở. Những đề xuất này giúp 9.000 đối tác nhà xuất bản độc quyền của Taboola kiếm tiền và thu hút khán giả. Nhà xuất bản hiển thị đề xuất trên các trang của họ bằng JavaScript.
Vì JavaScript của bên thứ ba có thể ảnh hưởng đến khả năng phản hồi nhanh chóng của một trang đối với hoạt động đầu vào của người dùng, nên Taboola đã đầu tư rất nhiều vào việc giảm kích thước tệp JavaScript và thời gian thực thi. Taboola đã thiết kế lại toàn bộ công cụ kết xuất, cũng như sử dụng trực tiếp các API của trình duyệt mà không cần các lớp trừu tượng để giảm thiểu tác động của công cụ này lên INP.
Nghiên cứu điển hình này trình bày hành trình của Taboola trong việc cải thiện INP bằng cách sử dụng Long Animation Frames (LoAF) API mới để đo lường tác động của API này đến khả năng phản hồi của trang trong thực tế và những nỗ lực tiếp theo để áp dụng các phương pháp tối ưu hoá cụ thể nhằm cải thiện trải nghiệm người dùng.
TBT là một proxy của INP
Tổng thời gian chặn (TBT) là một chỉ số dựa trên phòng thí nghiệm, xác định thời điểm luồng chính bị chặn đủ lâu để có thể ảnh hưởng đến khả năng phản hồi của trang. Các chỉ số trường đo lường khả năng phản hồi (chẳng hạn như INP) có thể bị ảnh hưởng bởi TBT cao. Một nghiên cứu của Annie Sullivan về mối tương quan giữa TBT và INP trên thiết bị di động cho thấy các trang web có nhiều khả năng đạt được điểm INP tốt hơn khi thời gian chặn luồng chính được giảm thiểu.
Mối tương quan này, cùng với những lo ngại của nhà xuất bản Taboola về TBT cao, đã khiến Taboola tập trung vào việc giảm thiểu mức đóng góp của mình cho chỉ số này.
RELEASE.js sẽ chặn luồng chính trong 691 mili giây.
Sử dụng TBT làm chỉ số proxy cho INP, Taboola bắt đầu theo dõi và tối ưu hoá thời gian thực thi JavaScript để hạn chế tác động tiềm ẩn của chỉ số này đến Các chỉ số quan trọng chính của trang web. Họ bắt đầu bằng cách làm như sau:
- Xác định và tối ưu hoá các tập lệnh có vấn đề tại hiện trường bằng cách sử dụng Long Tasks API.
- Ước tính mức đóng góp của TBT bằng cách sử dụng PageSpeed Insights API để đánh giá từ 10.000 đến 15.000 URL mỗi ngày.
Tuy nhiên, Taboola nhận thấy việc phân tích TBT bằng những công cụ này có một số hạn chế:
- Long Tasks API không thể liên kết tác vụ với miền gốc hoặc một tập lệnh cụ thể, khiến việc xác định nguồn của các tác vụ dài trở nên khó khăn hơn.
- Long Tasks API chỉ xác định các tác vụ dài, chứ không xác định sự kết hợp giữa các tác vụ và thay đổi bố cục có thể gây ra độ trễ khi kết xuất.
Để giải quyết những thách thức này, Taboola đã tham gia dùng thử ban đầu Long Animation Frames (LoAF) API (API Khung hình động dài) nhằm hiểu rõ hơn tác động thực tế của API này đối với khả năng phản hồi của dữ liệu đầu vào từ người dùng. Bản dùng thử theo nguyên gốc cho phép truy cập vào các tính năng mới hoặc thử nghiệm, giúp nhà phát triển kiểm thử các tính năng mới nổi mà người dùng có thể dùng thử trong một khoảng thời gian giới hạn.
Điều quan trọng cần lưu ý là khía cạnh khó khăn nhất của thử thách này là cải thiện thành công INP mà không làm ảnh hưởng đến bất kỳ KPI(Chỉ báo hiệu suất chính) nào của quảng cáo hoặc gây ra sự chậm trễ về tài nguyên cho nhà xuất bản của chúng tôi.
Sử dụng LoAF để đánh giá tác động của INP
Khung ảnh động dài xảy ra khi quá trình cập nhật kết xuất bị trễ quá 50 mili giây. Bằng cách xác định nguyên nhân gây ra các bản cập nhật giao diện người dùng chậm (thay vì chỉ các tác vụ dài), Taboola đã có thể phân tích tác động của các bản cập nhật này đến khả năng phản hồi của trang trong trường. Việc quan sát LoAF đã giúp Taboola:
- Gán các mục nhập thuộc tính cho các nhiệm vụ cụ thể trên Taboola.
- Quan sát các vấn đề về hiệu suất trong các tính năng cụ thể trước khi triển khai các tính năng đó cho người dùng thực tế.
- Thu thập dữ liệu tổng hợp để so sánh các phiên bản mã khác nhau trong thử nghiệm A/B và báo cáo về các chỉ số chính cho thấy mức độ thành công.
JavaScript sau đây là phiên bản đơn giản được dùng trong quá trình sản xuất để thu thập LoAF nhằm tách biệt tác động của 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 });
- Việc sử dụng hàm
loafEntryAnalysisgiúp Taboola xác định những mục mà họ là một cộng tác viên chính. - Taboola được coi là một yếu tố chính nếu Taboola chiếm hơn một nửa tổng thời lượng tập lệnh hoặc một tập lệnh Taboola mất hơn 50 mili giây để chạy.
- Một
firstUIEventTimeStampsẽ được tạo nếu hoạt động tương tác của người dùng bị trì hoãn do Khung hình động dài. Thời lượng chặn dài nhất được coi là điểm INP tổng thể. Chúng tôi cũng có thể xác định thời điểm Taboola đã kích hoạtfirstUIEventTimeStampđể tính điểm INP của Taboola.
Dữ liệu được thu thập bằng LoAF đã giúp Taboola tạo bảng phân bổ sau đây, xác định những lĩnh vực mà Taboola có thể áp dụng cơ hội mang lại lợi nhuận.
TRECS Engine: chiến lược mang lại lợi nhuận mới
Ngoài việc sử dụng LoAF để hiểu rõ hơn về các cơ hội tối ưu hoá tập lệnh, Taboola đã thiết kế lại toàn bộ công cụ kết xuất của mình để giảm đáng kể thời gian thực thi và chặn JavaScript.
TRECS (Dịch vụ khách hàng có thể mở rộng về đề xuất của Taboola) duy trì hoạt động kết xuất phía máy khách và mã JS hiện tại của nhà xuất bản, đồng thời giảm số lượng và kích thước của các tệp bắt buộc cần thiết để tải đề xuất của Taboola.
Sau khi xác định được các tác vụ chặn hiển thị bằng LoAF, "Performance Fader" có thể chia nhỏ các tác vụ đó trước khi nhường cho luồng chính bằng cách sử dụng scheduler.postTask(). Thiết kế này đảm bảo rằng những việc quan trọng mà người dùng nhìn thấy (chẳng hạn như kết xuất nội dung cập nhật) có thể được thực thi càng sớm càng tốt, bất kể có tác vụ nào đang chiếm luồng chính hay không.
Sau đây là đoạn mã JS của trình chạy tác vụ "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);
}
Hàm sendTaskToFader:
- Sử dụng
runAsPostTask, sử dụngscheduler.postTask()nâng cao (nếu có API) hoặc quay lạisetTimeout. - Hàm này bao bọc các lệnh gọi hàm trong các phần mã gây ra khung hình động dài và INP. Thao tác này sẽ chia các phần mã này thành các tác vụ ngắn hơn, nhờ đó giảm INP.
Chỉ số kinh doanh
Nhờ LoAF, Taboola có thể hiểu rõ hơn về tác động của chỉ số này đối với INP. Công cụ này cũng làm nổi bật các cơ hội tối ưu hoá tập lệnh có thể được sử dụng trong công cụ TRECS mới.
Để xác định tác động của TRECS và Performance Fader, Taboola đã tiến hành một thử nghiệm A/B để đo lường INP so với công cụ hiện có mà không có tập lệnh nào trên một nhóm đối tác nhà xuất bản.
Bảng sau đây cho thấy kết quả INP tính bằng mili giây ở phân vị thứ 75 của 4 nhà xuất bản ẩn danh trong mạng Taboola.
Rất may là các chỉ số kinh doanh, chẳng hạn như Tỷ lệ nhấp vào quảng cáo và Doanh thu trên 1.000 lượt hiển thị (RPM), không bị ảnh hưởng tiêu cực khi TRECS và Performance Fader được bật trên bảng thử nghiệm. Với sự cải thiện tích cực này về INP mà không có kết quả tiêu cực nào như mong đợi về KPI quảng cáo, Taboola sẽ dần cải thiện nhận thức của nhà xuất bản về sản phẩm của mình.
Một lần chạy Lighthouse khác trên cùng một khách hàng được làm nổi bật trước đó cho thấy sự cải thiện đáng kể về thời gian chặn luồng chính của Taboola khi sử dụng công cụ mới.
RELEASE.js giảm TBT xuống 485 mili giây (-70%).
Điều này cho thấy rằng việc sử dụng LoAF để xác định nguyên nhân gây ra INP và triển khai các kỹ thuật tạo hiệu ứng mờ tiếp theo bằng Performance Fader giúp các đối tác của Taboola đạt được thành công tối đa về hiệu suất quảng cáo và trang.
Kết luận
Việc tối ưu hoá INP là một quy trình phức tạp, đặc biệt là khi bạn sử dụng tập lệnh của bên thứ ba trên trang web của đối tác. Trước khi quá trình tối ưu hoá có thể bắt đầu, việc phân bổ INP cho các tập lệnh cụ thể sẽ loại bỏ mọi phỏng đoán và thiệt hại tiềm ẩn cho các chỉ số hiệu suất khác của trang web.API LoAF đã chứng minh là một công cụ có giá trị để xác định và giải quyết các vấn đề về INP, đặc biệt là đối với các bên thứ ba được nhúng bằng cách cho phép họ xác định chính xác các cơ hội cải thiện SDK cụ thể trong khi loại bỏ sự can thiệp của các công nghệ khác có trên trang.
Khi được dùng kết hợp với một chiến lược phân luồng hiệu quả (chẳng hạn như sử dụng scheduler.postTask()), LoAF có thể giúp bạn quan sát và hiểu rõ nguyên nhân khiến trang không phản hồi, từ đó cung cấp cho bạn thông tin cần thiết để cải thiện chỉ số INP của trang web.
Xin chân thành cảm ơn Gilberto Cocchi, Noam Rosenthal và Rick Viscomi của Google, cũng như Dedi Hakak, Anat Dagan và Omri Ariav của Nhóm Kỹ thuật và Sản phẩm của Taboola vì những đóng góp của họ cho công việc này.