Cách PubConsent CMP giảm tới 64% INP cho khách hàng của họ bằng cách sử dụng một chiến lược lợi nhuận sử dụng API trình lập lịch biểu của trình duyệt để khắc phục các vấn đề về khả năng phản hồi được xác định bằng Công cụ của Chrome cho nhà phát triển.
Các nền tảng quản lý sự đồng ý (CMP) là những công cụ giúp các trang web tuân thủ quy định về quyền riêng tư bằng cách thu thập sự đồng ý của người dùng để sử dụng cookie và công nghệ theo dõi. Ngoài mục tiêu chính là đảm bảo việc tuân thủ pháp luật, các CMP, với vai trò là tập lệnh của bên thứ ba, cũng phải đảm bảo mức tác động ở mức tối thiểu đến hiệu suất và trải nghiệm người dùng.
CMP PubConsent là sản phẩm mới nhất của PubTech. Được thiết kế tập trung vào hiệu suất, CMP của PubConsent được thiết kế với trọng lượng nhẹ, đảm bảo trải nghiệm người dùng tối ưu và tác động tối thiểu đến hiệu suất tổng thể của trang web.
Việc giới thiệu chỉ số Lượt tương tác với thời gian hiển thị tiếp theo (INP) đã cho phép PubTech phát hiện các vấn đề về khả năng phản hồi của CMP của chúng tôi. Trong nghiên cứu điển hình này, PubTech cho thấy cách họ giải quyết các vấn đề về khả năng phản hồi trong nền tảng CMP PubConsent và cách họ cải thiện INP trước khi INP trở thành một trong các Chỉ số quan trọng chính về trang web vào tháng 3 năm 2024, thể hiện cam kết bền vững nhằm cung cấp hiệu suất tốt nhất có thể trong một sản phẩm CMP.
Vì sao PubTech quan tâm đến hiệu suất?
CMP (giống như hầu hết các CMP) của PubConsent cung cấp chức năng quản lý sự đồng ý được triển khai dưới dạng một tập lệnh của bên thứ ba trên các trang của trang web. Việc giảm thiểu tác động đến hiệu suất của dịch vụ CMP, bao gồm cả khả năng phản hồi, là vô cùng quan trọng để đảm bảo tích hợp CMP thành công.
Bằng cách ưu tiên hiệu suất và đảm bảo tập lệnh CMP của PubConsent gọn nhẹ, chủ sở hữu trang web có thể đạt được sự cân bằng tinh tế giữa việc kết hợp các chức năng Quản lý sự đồng ý có giá trị trong khi vẫn duy trì chất lượng trải nghiệm người dùng.
Do tầm quan trọng của chức năng mà CMP cung cấp và tác động của chức năng đó đối với hiệu suất, PubTech đặt ra các mục tiêu sau:
- Giảm thiểu tác động của sản phẩm PubConsent CMP đến INP.
- Giảm các nhiệm vụ dài do sản phẩm CMP.
- Giảm Tổng thời gian chặn (TBT), điều này có thể ảnh hưởng tiêu cực đến INP của trang.
Cách đo lường INP
PubTech đã sử dụng Công cụ của Chrome cho nhà phát triển để tiến hành phân tích ban đầu và chẩn đoán các hoạt động tương tác có tốc độ chậm theo cách thủ công. Quy trình làm việc này cho phép PubTech xác định các vấn đề cụ thể ảnh hưởng đến khả năng phản hồi của trang. Ví dụ: một lượt tương tác nhấp trong sản phẩm CMP để chấp nhận tất cả cookie, rồi sau đó đóng hộp thoại đồng ý sử dụng cookie, đã dẫn đến một thao tác dài, làm chậm trễ quá trình hiển thị cập nhật giao diện người dùng. Như bạn có thể thấy trong hình sau, giao diện người dùng chưa được cập nhật để cho biết hộp thoại đã đóng cho đến khi tác vụ dài hoàn tất.
Giống như nút chấp nhận tất cả cookie, nút từ chối tất cả cookie hoặc tuỳ chỉnh các lựa chọn ưu tiên về cookie đều tuân theo cùng một quy trình làm việc trong kiến trúc CMP của PubConsent. Do đó, những điểm cải tiến được nêu chi tiết trong nghiên cứu điển hình này đã ảnh hưởng đến một loạt hoạt động tương tác của người dùng trong sản phẩm CMP.
Sự chậm trễ này dẫn đến cảm nhận trực quan về việc bảng điều khiển bị khoá trong khi thực hiện nhiệm vụ. Vì chính sách này đã chặn quá trình cập nhật kết xuất trong một khoảng thời gian rõ ràng, nên INP của trang bị ảnh hưởng tiêu cực.
Cách PubTech tối ưu hoá INP cho các nút và đường liên kết
Để cải thiện INP, chúng tôi đã áp dụng nhiều chiến lược lợi nhuận trong CMP PubConsent.
Giao nhiệm vụ có mức độ ưu tiên cao
Phương thức yieldToMainUiBlocking minh hoạ trong đoạn mã sau đây được thiết kế nhằm tối ưu hoá các tác vụ JavaScript có mức độ ưu tiên cao bằng cách tạo ra scheduler.yield nếu có, nhưng sẽ quay lại postTask với mức độ ưu tiên user-blocking (cao) nếu có postTask, cuối cùng lại không có gì nữa.
Tránh sử dụng setTimeout ở đây vì phương thức yieldToMainUiBlocking được thiết kế để xử lý các hoạt động cài đặt CMP nội bộ và các công việc có mức độ ưu tiên cao nên duy trì mức độ ưu tiên đó trong khi vẫn tạo ra lợi nhuận. Điều này có nghĩa là chỉ những trình duyệt triển khai các API lập lịch này (hiện chỉ có trong các trình duyệt dựa trên Chromium tại thời điểm viết) được hưởng lợi từ những cải tiến được nêu chi tiết trong nghiên cứu điển hình này. Mặc dù vậy, phương pháp này được coi là một cải tiến tăng dần có thể chấp nhận được cho các tác vụ có mức độ ưu tiên cao này.
function yieldToMainUiBlocking () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
}
}
resolve(false);
});
};
Hiệu suất đối với tác vụ trung bình và tác vụ trong nền
Phương thức yieldToMainBackground minh hoạ trong đoạn mã sau đây được dùng để chia nhỏ các tác vụ dài có mức độ ưu tiên user-visible (trung bình) hoặc background. Logic này sẽ triển khai scheduler.yield() nếu có, nhưng logic này khác bằng cách sử dụng postTask với mức độ ưu tiên trung bình và cuối cùng là quay lại setTimeout trên các Trình duyệt không phải Chromium.
function yieldToMainBackground () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
}
}
setTimeout(() => { resolve(true) }, 0);
});
};
yieldToMainBackground cho phép trình duyệt hiển thị nội dung hiển thị tiếp theo (đóng giao diện người dùng CMP trong trường hợp này) sớm hơn.
Cách PubTech giảm thiểu TBT hơn nữa nhờ tính năng tối ưu hoá bố cục kết xuất
Sau khi áp dụng chiến lược lợi nhuận, nhận thấy rằng INP đã cải thiện đáng kể cho CMP. Trên thực tế, sau khi giảm đáng kể thời lượng xử lý của trình xử lý sự kiện, người ta đã tìm thấy cơ hội cải thiện thêm về quá trình kết xuất cho nội dung vẽ tiếp theo cho hành động Đóng giao diện người dùng. Hành động này ban đầu được thiết kế để xoá các phần tử khỏi DOM. Điều này đặt ra những thách thức, đặc biệt là trên các trang web có một số lượng đáng kể nút DOM, dẫn đến sự gia tăng bất ngờ trong công việc hiển thị.
Để giải quyết khối lượng công việc kết xuất tăng cần thiết nhằm loại bỏ các phần tử khỏi DOM, nhóm chúng tôi đã giới thiệu một giải pháp có tên là "kết xuất từng phần". Phương pháp này trước tiên sẽ áp dụng một quy tắc CSS display: none cho hộp thoại đồng ý của CMP sau khi người dùng đồng ý ẩn hộp thoại đó. Sau đó, việc xoá các nút DOM liên kết với hộp thoại CMP được chuyển sang một thời điểm sau đó khi trình duyệt ở trạng thái rảnh bằng cách sử dụng requestIdleCallback. Phương pháp này được chứng minh là nhanh hơn nhiều so với việc xoá nút DOM tại thời điểm người dùng đóng hộp thoại đồng ý.
Cách PubTech tiếp tục giảm INP bằng cách cải thiện thư viện TCF của IAB
Sau khi giải quyết thành công hầu hết các vấn đề về khả năng thích ứng của CMP, một trong những phần phụ thuộc chính của CMP đã xác định thêm nhiều cơ hội để cải thiện: thư viện Khuôn khổ về tính minh bạch và sự đồng ý (TCF) của IAB.
Các thành phần tiêu tốn tài nguyên tính toán nhất của thư viện này là "chuỗi bản dựng" và "điều phối sự đồng ý". Các thành phần này là những phần không thể thiếu trong thư viện Khuôn khổ về tính minh bạch và sự đồng ý (TCF) của Cục Quảng cáo tương tác (IAB). Những điểm tối ưu hoá sau đây cho các thành phần này đã được áp dụng trong một nhánh riêng dành riêng cho nhu cầu của PubTech:
- Sử dụng lại kết quả được tính toán cho quá trình giải mã (được thực thi cho mỗi lệnh gọi lại của bên thứ ba) cần đọc sự đồng ý của người dùng.
- Tránh và giảm vòng lặp không cần thiết trong quy trình mã hoá các quy định hạn chế dành cho nhà xuất bản (được thực thi khi người dùng đồng ý).
Hoạt động tối ưu hoá đầu tiên trong số này giúp giảm thời gian mà CMP sử dụng cho mỗi lệnh gọi lại của bên thứ ba kết nối với thư viện TCF của IAB. Hoạt động tối ưu hoá thứ hai làm giảm thời gian xử lý phát sinh của thành phần "chuỗi bản dựng". Trên thực tế, tính năng tối ưu hoá này đã giúp giảm lên đến 60% số vòng lặp được thực thi mỗi khi người dùng bày tỏ sự đồng ý.
Kết quả
Với các chiến lược mang lại lợi nhuận trước đây và tính năng tối ưu hoá bố cục kết xuất mới được áp dụng, INP của CMP đã cải thiện tới 65%. Kết quả là khả năng đáp ứng trải nghiệm người dùng của PubConsent CMP đã được cải thiện đáng kể và đối với một số quảng cáo, khả năng xem thậm chí còn tăng 1,5% bằng cách tối ưu hoá thời điểm có yêu cầu quảng cáo.
Ngoài những điểm cải tiến này, trên thư viện TCF của IAB, chúng tôi quan sát thấy rằng INP đã cải thiện tới 77% trên thiết bị di động đối với những khách hàng bị ảnh hưởng nhờ giảm được tới 85% các công việc dài hạn do TCF phát sinh. Điều này giúp giảm đáng kể chi phí cho mỗi lệnh gọi lại của bên thứ ba được thực thi trong toàn bộ vòng đời của một trang.
Số nguồn gốc vượt qua INP khi sử dụng CMP của PubConsent tăng hơn 400%, tăng từ 13% lên 55% trên thiết bị di động. Đối với một số khách hàng, INP của trang đã giảm hơn một nửa — từ 470 mili giây xuống còn 230 mili giây — do các biện pháp tối ưu hoá SDK PubTech được thực hiện.
Kết luận
Khách hàng của PubTech đã nhanh chóng nhận ra kết quả tích cực về hiệu suất INP và chỉ số kinh doanh nhờ nỗ lực tối ưu hoá của chúng tôi. Chúng tôi đang xem xét việc cải thiện hiệu suất hơn nữa cho CMP của PubConsent bằng cách tận dụng dữ liệu Giám sát người dùng thực tế (rum) vô giá từ khách hàng của họ. Dữ liệu này theo dõi chặt chẽ cả sự hồi quy và mức độ tiến triển, qua đó thúc đẩy nỗ lực cải tiến không ngừng của PubTech.
Với tư cách là bên thứ ba, PubTech cũng nhận ra rằng họ có cơ hội cải thiện hiệu suất web trên quy mô lớn và tăng khả năng phản hồi, đồng thời tránh được những tác động tiêu cực đến KPI của doanh nghiệp. Không bao giờ quá muộn để bắt đầu triển khai những loại cải tiến này!
Xin đặc biệt cảm ơn Luca Coppola (Giám đốc kỹ thuật của PubTech) hỗ trợ công cuộc đổi mới này cũng như Jeremy Wagner, Michal Mocny và Rick Viscomi của Google.