Cách việc tận dụng API Khung ảnh động dài (LoAF) và áp dụng chiến lược tạo lợi nhuận thông minh đã giúp Taboola cải thiện hiệu suất của nhà xuất bản khả năng phản hồi của trang web mà không ả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à 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 tương tác (chẳng hạn như khi nhấp, nhấn hoặc nhập) đến phản hồi kết quả 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, cung cấp 500.000 đề xuất mỗi giây trên 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 độc giả. Nhà xuất bản đưa ra đề xuất trên các trang của họ bằng cách sử dụng JavaScript.
Do JavaScript của bên thứ ba có thể ảnh hưởng đến khả năng phản hồi nhanh của trang với hoạt động đầu vào của người dùng, 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 API trình duyệt mà không trừu tượng để giảm thiểu tác động của nó đến INP.
Nghiên cứu điển hình này bao gồm hành trình của Taboola để cải thiện INP bằng cách sử dụng API Khung hoạt ảnh dài (LoAF) 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 lĩnh vực này và những nỗ lực tiếp theo để áp dụng các 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 nơi luồng chính đã bị chặn trong thời gian đủ 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ể chịu ảnh hưởng của 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 các nghiên cứu của Taboola những mối lo ngại về TBT cao, đã khiến Taboola tập trung sự chú ý vào việc giảm thiểu sự đóng góp của mình vào chỉ số này.
RELEASE.js sẽ chặn luồng chính trong 691 mili giây.
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 TBT đối với Các chỉ số quan trọng chính của 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á các tập lệnh có vấn đề trong trường bằng cách sử dụng Long Tasks API.
- Ước tính số tiền đóng góp cho TBT bằng cách dùng PageSpeed Insights API để đá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 các công cụ này có một số hạn chế:
- Long Tasks API không thể phân bổ công việc cho 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 công việc dài trở nên khó khăn hơn.
- Long Tasks API chỉ xác định tác vụ dài, thay vì kết hợp các tác vụ và các 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 ảnh động dài (LoAF) để hiểu rõ hơn về tác động thực của API này đối với khả năng phản hồi khi người dùng nhập. 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ử những 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.
Xin 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 làm ảnh hưởng đến KPI(Chỉ báo hiệu suất chính) của quảng cáo hoặc làm chậm trễ nguồn lực cho nhà xuất bản.
Sử dụng LoAF để đánh giá tác động đến INP (Lượt tương tác đến nội dung hiển thị tiếp theo)
Khung hoạt ảnh dài xảy ra khi một bản 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 khiến giao diện người dùng cập nhật chậm (thay vì chỉ thực hiện các tác vụ mất nhiều thời gian), Taboola có thể phân tích tác động của việc này đối với tốc độ phản hồi của trang trong trường này. Quan sát LoAF đã cho phép Taboola:
- Các mục nhập thuộc tính cho các nhiệm vụ cụ thể trên Taboola.
- Quan sát vấn đề về hiệu suất của một số tính năng trước khi triển khai chính thức.
- Thu thập dữ liệu tổng hợp để so sánh các phiên bản mã trong thử nghiệm A/B và báo cáo về các chỉ số chính để đo lường thành công.
JavaScript sau đây là phiên bản đơn giản được sử dụng trong phiên bản chính thức để 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à nó là người đóng góp chính. - Taboola được xem là phần tử đóng góp chính nếu 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.
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 ả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 ta 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 ra bảng phân bổ sau đây, xác định các khía cạnh mà công cụ này có thể áp dụng các cơ hội lợi nhuận.
TRECS Engine: chiến lược lợi nhuận mới
Cũng như 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 nhằm giảm thiểu đáng kể thời gian thực thi và chặn JavaScript.
TRECS (Dịch vụ khách hàng mở rộng theo đề xuất của Taboola) duy trì khả năng 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ác tệp bắt buộc cần thiết để tải các đề xuất của Taboola.
Sau khi xác định tác vụ chặn hiển thị bằng LoAF, tính năng "Trình làm mờ hiệu suất" có thể chia nhỏ các tác vụ đó trước khi chuyển sang luồng chính bằng cách sử dụng scheduler.postTask(). Thiết kế này đảm bảo rằng các tác vụ quan trọng dành cho người dùng (chẳng hạn như kết xuất bản cập nhật) có thể được thực thi sớm nhất có thể, bất kể mọi tác vụ hiện có có thể đang chiếm luồng chính.
Đây là đoạn mã JS của "Bộ giảm giá hiệu suất" trình chạy tác vụ:
/**
* 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, trong đó sử dụngscheduler.postTask()nâng cao (nếu có API) hoặc quay lạisetTimeout. - Hàm này gói các lệnh gọi hàm trong các phần mã tạo ra khung ảnh động dài và INP. Nó chia các phần mã này thành các tác vụ ngắn hơn, từ đó giúp giảm INP.
Chỉ số kinh doanh
Nhờ LoAF, Taboola có thể hiểu rõ hơn về tác động của tổ chức này đối với INP. Công cụ này cũng nêu bật các cơ hội tối ưu hoá tập lệnh có thể dùng trong công cụ TRECS mới.
Để xác định tác động của TRECS và Mức giảm về hiệu suất, Taboola đã tiến hành thử nghiệm A/B đo lường INP dựa trên công cụ hiện có mà không có tập lệnh tạo ra trên nhóm đối tác nhà xuất bản.
Bảng sau đây trình bày kết quả INP tính bằng mili giây ở bách 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 mỗi 1.000 lượt hiển thị (RPM) không bị ảnh hưởng tiêu cực khi TRECS và Mức giảm về hiệu suất đượ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ó 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 về sản phẩm của công ty.
Một Lighthouse khác chạy trên cùng một khách hàng được đánh dấu trước đó cho thấy Taboola đã cải thiện đáng kể thời gian chặn luồng chính 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 ra lợi nhuận tiếp theo với Mức tăng hiệu suất 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 là khi tập lệnh của bên thứ ba được sử dụng trên các 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 sự phỏng đoán và thiệt hại tiềm ẩn đối với các chỉ số hiệu suất khác của trang web.LoAF API đã được chứng minh là một công cụ có giá trị để xác định và giải quyết vấn đề về INP, đặc biệt đố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ỏ sự can thiệp của các công nghệ khác hiện có trên trang.
Khi được sử dụng cùng với một chiến lược 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 khiến 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 như 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.