Cách việc tận dụng API khung hình động dài (LoAF) và áp dụng chiến lược lợi nhuận thông minh đã kích hoạt 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 làm ảnh hưởng đến hiệu suất quảng cáo.
Lượt tương tác với Nội dung hiển thị tiếp theo (INP) là chỉ số đánh giá khả năng thích ứng 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 khoảng thời gian từ khi người dùng bắt đầu một hành động 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 bằng hình ảnh. INP sẽ thay thế Độ trễ đầu vào đầu tiên (FID) làm 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, hỗ trợ 500.000 đề xuất mỗi giây trên web mở. Những đề xuất này cho phé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 đối tượng. 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 người dùng trên một trang, 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ủa mình, cũng như sử dụng trực tiếp API trình duyệt mà không sử dụng các thành phần trừu tượng để giảm thiểu tác động của công cụ này đến INP.
Nghiên cứu điển hình này đề cập đến hành trình cải thiện INP của Taboola bằng cách sử dụng API Khung hình động dài (LoAF) mới để đo lường tác động của API này đối với khả năng phản hồi của trang trong trường và các nỗ lực tiếp theo để áp dụng các biện 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 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, giúp xác định vị trí luồng chính bị chặn đủ lâu để có khả năng ả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 cuộc điều tra của Annie Sullivan về mối tương quan giữa TBT và INP trên thiết bị di động chỉ ra rằng các trang web có nhiều khả năng đạt được điểm INP cao hơn khi giảm thiểu thời gian chặn luồng chính.
Mối tương quan này, cùng với những mối lo ngại của các nhà xuất bản của Taboola về TBT cao, đã khiến Taboola tập trung vào việc giảm thiểu mức đóng góp vào chỉ số này.
RELEASE.js sẽ chặn luồng chính trong 691 mili giây.
Khi 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 đối với Các chỉ số quan trọng về trang web. Họ đã bắt đầu bằng cách làm những việc sau:
- Xác định và tối ưu hoá tập lệnh có vấn đề trong trường bằng API Tác vụ dài.
- Số liệu ước tính mức đóng góp cho TBT bằng cách sử dụng API PageSpeed Insights để đánh giá 10.000 đến 15.000 URL mỗi ngày.
Tuy nhiên, Taboola nhận thấy rằng việc phân tích TBT bằng những công cụ này có một số hạn chế:
- API Tác vụ dài không thể phân bổ tác vụ cho miền gốc hoặc tập lệnh cụ thể, điều này 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.
- API Tác vụ dài chỉ xác định các tác vụ dài, chứ không phải tổ hợp các tác vụ và thay đổi về bố cục có thể gây ra độ trễ hiển thị.
Để giải quyết những thách thức này, Taboola đã tham gia bản dùng thử theo nguyên gốc API Khung hình động dài (LoAF) nhằm hiểu rõ hơn tác động thực của nó đến khả năng phản hồi hoạt động đầu vào của người dùng. Bản dùng thử theo nguyên gốc cấp quyền truy cập vào các tính năng mới hoặc tính năng 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 thời gian có hạn.
Chúng tôi cần nhấn mạnh rằng khía cạnh khó khăn nhất của thách thức này là cải thiện thành công INP mà không ả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ề nguồn lực cho nhà xuất bản.
Sử dụng LoAF để đánh giá tác động của INP
Một khung ảnh động dài xảy ra khi quá trình cập nhật kết xuất bị trì hoãn quá 50 mili giây. Bằng cách xác định nguyên nhân khiến giao diện người dùng cập nhật chậm (thay vì chỉ cập nhật các tác vụ dài), Taboola đã có thể phân tích tác động của vấn đề này đối với khả năng phản hồi của trang trong trường. Việc quan sát LoAF đã cho phép Taboola:
- Phân bổ các mục nhập cho các tác vụ cụ thể trên Taboola.
- Theo dõi 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 đó vào giai đoạn phát hành chính thức.
- 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ố thành công quan trọng.
JavaScript sau đây là phiên bản đơn giản được sử dụng trong 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
loafEntryAnalysischo phép Taboola xác định các mục nhập mà bài viết này là người đóng góp chính. - Taboola được xem là yếu tố đóng góp chính nếu có hơn một nửa tổng thời lượng tập lệnh là do Taboola gây ra hoặc một tập lệnh Taboola mất hơn 50 mili giây để chạy.
firstUIEventTimeStampđược tạo nếu hoạt động tương tác của người dùng bị trì hoãn do Khung ảnh động dài. Thời lượng chặn dài nhất được xem là điểm INP tổng thể. Chúng ta cũng có thể xác định thời điểm Taboola kích hoạt mộtfirstUIEventTimeStampđể tính điểm INP của Taboola.
Dữ liệu thu thập được bằng LoAF đã giúp Taboola tạo ra bảng phân bổ sau đây, giúp xác định các lĩnh vực có thể áp dụng cơ hội sinh lời.
TRECS Engine: chiến lược lợi nhuận mới
Ngoài việc sử dụng LoAF để hiểu rõ hơn 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 thiểu đáng kể thời gian chặn và thực thi JavaScript.
TRECS (Dịch vụ máy khách mở rộng được đề xuất của Taboola) duy trì quá trình hiển thị 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 các đề xuất của Taboola.
Sau khi các tác vụ chặn kết xuất được xác định bằng LoAF, "Hiệu suất Fader" có thể chia nhỏ các tác vụ đó trước khi chuyển vào luồng chính bằng cách sử dụng scheduler.postTask(). Thiết kế này đảm bảo thực thi các công việc quan trọng dành cho người dùng (chẳng hạn như hiển thị nội dung cập nhật) càng sớm càng tốt, bất kể mọi tác vụ hiện tại có thể đang chiếm luồng chính.
Dưới đâ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
runAsPostTaskvốn sử dụngscheduler.postTask()nâng cao (nếu có API) hoặc quay lại sử dụngsetTimeout. - Hàm này gói các lệnh gọi hàm trong các phần mã gây ra khung ảnh động và INP dài. Công cụ này chia những phần mã này thành các tác vụ ngắn hơn, do đó giảm INP.
Chỉ số kinh doanh
Nhờ LoAF, Taboola có thể hiểu rõ hơn về tác động của công nghệ 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 thử nghiệm A/B để đo lường INP đối với công cụ hiện có mà không tạo ra tập lệnh nào trên một nhóm các đối tác nhà xuất bản.
Bảng sau hiển thị kết quả INP theo mili giây ở phân vị thứ 75 của bốn nhà xuất bản ẩn danh trong mạng Taboola.
May mắn 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 mỗi 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 tạo ra bất kỳ kết quả tiêu cực nào như mong đợi đối với KPI của quảng cáo, Taboola sẽ dần cải thiện được nhận thức của nhà xuất bản về sản phẩm của họ.
Một Lighthouse khác chạy trên cùng một khách hàng được đánh dấu trước đó minh họa 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 được TBT 485 mili giây (-70%).
Điều này chứng minh 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 lợi nhuận tiếp theo bằng Performance Fader cho phé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
Tối ưu hoá INP là một quá trình phức tạp, đặc biệt khi các tập lệnh của bên thứ ba được sử dụng trên trang web của đối tác. Trước khi có thể bắt đầu tối ưu hoá, 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 đối với các chỉ số hiệu suất trang web khác.LoAF API đã được chứng minh là một công cụ hữu ích để 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 các cơ hội cải thiện SDK cụ thể trong khi loại bỏ can thiệp vào các công nghệ khác có trên trang.
Khi được sử dụng cùng với chiến lược tạo lợi nhuận hiệu quả (chẳng hạn như sử dụng scheduler.postTask()), LoAF có thể giúp bạn quan sát và tìm hiểu nguyên nhân dẫn đến khả năng trang phản hồi kém, từ đó cung cấp cho bạn thông tin cần thiết để cải thiện INP của trang web.
Xin đặc biệt cảm ơn Gilberto Cocchi, Noam Rosenthal và Rick Viscomi của Google, cùng Dedi Hakak, Anat Dagan và Omri Ariav thuộc 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 trình này.