Cách tận dụng Long Animation Frames API (LoAF) và áp dụng chiến lược phân phối thông minh đã giúp Taboola cải thiện khả năng thích ứng 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à 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) trong 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 khán 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 các API trình duyệt mà không cần trừu tượng hoá để giảm thiểu tác động của công cụ này đối với INP.
Nghiên cứu điển hình này trình bày hành trình của Taboola nhằm cải thiện INP bằng cách sử dụng API Khung ả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 thực tế, cũng như những 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 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. 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 cho thấy rằng các trang web có nhiều khả năng đạt được điểm INP cao 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 mối lo ngại của các 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.
Bằng cách 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 đối với các chỉ số Core Web Vitals. 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 đề trong trường bằng cách sử dụng Long Tasks API.
- Dự đoán mức đóng góp của 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 các 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 một tập lệnh cụ thể, khiến việc xác định nguồn của 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, thay vì sự kết hợp của các tác vụ và thay đổi bố cục có thể gây ra độ trễ kết xuất.
Để giải quyết những thách thức này, Taboola đã tham gia thử nghiệm gốc API Khung ảnh động dài (LoAF) nhằm tìm hiểu rõ hơn về tác động thực sự của API này đối với 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 sử dụng các tính năng mới hoặc tính năng thử nghiệm, cho phép nhà phát triển thử nghiệm các tính năng mớ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àm nổi bật 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 độ trễ về tài nguyên cho nhà xuất bản.
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ì 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ác tác vụ dài), Taboola có thể phân tích tác động của việc này đối với khả năng phản hồi của trang trong thực tế. Nhờ quan sát LoAF, Taboola đã có thể:
- 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 đó sang môi trường thực tế.
- 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ố thành công chính.
JavaScript sau đây là phiên bản đơn giản được dùng trong quá trình phát hành công khai để thu thập LoAF nhằm tách riêng 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 những mục mà Taboola đóng vai trò chính. - Taboola được coi là yếu 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.
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 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, trong đó xác định những khu vực có thể áp dụng cơ hội mang lại lợi nhuận.
Công cụ TRECS: chiến lược trả về 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 để 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 được các tác vụ chặn hiển thị bằng LoAF, "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.
Dưới đây là đoạn mã JS của trình chạy tác vụ "Performance Fader" (Bộ giảm hiệu suất):
/**
* 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ã gây ra khung ảnh động dài và INP. Tính năng này 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 tính năng 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à Trình giảm hiệu suất, 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ả về trên một 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 trên mỗi 1.000 lượt hiển thị (RPM), không bị ảnh hưởng tiêu cực khi bật TRECS và Trình giảm hiệu suất trên bảng điều khiển 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ư dự kiến đối với các KPI của 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 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 nhường quyền tiếp theo bằng Trình giảm 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
Việc tối ưu hoá INP là một quá trình phức tạp, đặc biệt là 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 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 suy đ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 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ể, đồng thời loại bỏ sự can thiệp của các công nghệ khác 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 đến từ 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.