Cách CMP của PubConsent giảm INP cho khách hàng tới 64% nhờ sử dụng 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 đã 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ủ các quy định về quyền riêng tư bằng cách thu thập sự đồng ý của người dùng về việc sử dụng cookie và công nghệ theo dõi. Ngoài mục tiêu chính là đảm bảo tuân thủ pháp luật, các CMP, như tập lệnh bên thứ ba, cũng phải đảm bảo tác động 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. Với thiết kế tập trung chủ yếu vào hiệu suất, CMP PubConsent được thiết kế đơn giản, đảm bảo trải nghiệm người dùng tối ưu và giảm thiểu tác động đến hiệu suất tổng thể của trang web.
Việc ra mắt chỉ số Lượt tương tác với nội dung hiển thị tiếp theo (INP) đã giúp PubTech phát hiện ra các vấn đề liên quan đến 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 vấn đề về khả năng phản hồi trong nền tảng CMP PubConsent, cũng như cách họ cải thiện INP trước khi trở thành một trong những Chỉ số quan trọng chính của trang web vào tháng 3 năm 2024, qua đó thể hiện cam kết bền bỉ cung cấp hiệu suất tốt nhất có thể cho sản phẩm CMP.
Tại sao PubTech quan tâm đến hiệu suất?
CMP PubConsent (giống như hầu hết các CMP) cung cấp chức năng quản lý sự đồng ý được triển khai dưới dạng tập lệnh của bên thứ ba trên các trang của trang web. Để đảm bảo tích hợp CMP thành công, thì việc giảm thiểu tác động đến hiệu suất của nền tảng quản lý sự đồng ý (bao gồm cả khả năng phản hồi) là rất quan trọng.
Bằng cách ưu tiên hiệu suất và duy trì tập lệnh CMP của PubConsent gọn nhẹ, chủ sở hữu trang web có thể cân bằng hợp lý 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 CMP PubConsent đến INP.
- Giảm các tác vụ dài có thể quy cho sản phẩm CMP.
- Giảm Tổng thời gian chặn (TBT) vì đ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 tương tác chậm theo cách thủ công. Quy trình công 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 bằng lượt nhấp trong sản phẩm CMP để chấp nhận tất cả cookie, sau đó đóng hộp thoại đồng ý sử dụng cookie đã gây ra một nhiệm vụ kéo dài, khiến quá trình cập nhật hiển thị đối với giao diện người dùng bị chậm trễ. 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 thấy hộp thoại đã được đóng cho đến khi tác vụ mất nhiều thời gian đã 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 quy trình làm việc tương tự trong cấu trúc CMP 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 khiến người dùng nhận thấy bảng điều khiển ở trạng thái khoá trong khi thực hiện nhiệm vụ. Do đã chặn quá trình cập nhật hiển thị trong một khoảng thời gian dài rõ ràng, 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, nhiều chiến lược lợi nhuận đã được sử dụng trong CMP PubConsent.
Thực hiện nhiệm vụ có mức độ ưu tiên cao
Phương thức yieldToMainUiBlocking trong đoạn mã sau đây được thiết kế để 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 quay trở lại postTask với mức độ ưu tiên user-blocking (cao) nếu có postTask, cuối cùng cũng không trở thành phương thức nào.
Tránh dùng setTimeout ở đây vì phương thức yieldToMainUiBlocking được thiết kế để xử lý các thao tác cài đặt CMP nội bộ và công việc có mức độ ưu tiên cao mà vẫn cần mức độ ưu tiên như vậy trong khi vẫn mang lại lợi nhuận. Điều này có nghĩa là chỉ những trình duyệt đang 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) mới được hưởng lợi từ 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. Mặc dù vậy, phương pháp này vẫn được coi là một biện pháp cải tiến tăng dần có thể chấp nhận được cho những nhiệm 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);
});
};
Lợi nhuận đối với tác vụ ở chế độ nền và trung bình
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ó sẵn, nhưng sẽ khác bằng cách sử dụng postTask với mức độ ưu tiên trung bình, cuối cùng 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ị lần 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 bằng cách tối ưu hoá bố cục kết xuất
Sau khi áp dụng chiến lược lợi nhuận, chúng tôi nhận thấy INP đã cải thiện đáng kể cho CMP. Trên thực tế, sau khi giảm đáng kể thời gian xử lý của trình xử lý sự kiện, chúng tôi đã phát hiện thấy cơ hội để cải thiện kết xuất hình ảnh cho lần hiển thị 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ế để xóa các phần tử khỏi DOM. Điều này gây ra những thách thức, đặc biệt là trên các trang web có số lượng nút DOM đáng kể, dẫn đến sự gia tăng bất ngờ trong công việc kết xuất.
Để giải quyết khối lượng công việc kết xuất tăng lên cần thiết để xoá các phần tử khỏi DOM, một giải pháp đã được đưa ra mà nhóm có tên là "huỷ kết xuất từng phần". Trước tiên, phương pháp này 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 quy tắc đó. Sau đó, thao tá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á các nút DOM tại thời điểm người dùng đóng hộp thoại đồng ý.
Cách PubTech giảm INP hơn nữa 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 phản hồi của CMP, chúng tôi đã xác định được nhiều cơ hội cải thiện hơn ở một trong những phần phụ thuộc chính của CMP đó: 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 tốn kém nhất tính toán của thư viện này là "chuỗi bản dựng" và "sự đồng ý khi gửi thông tin". Các thành phần này là phần không thể thiếu của thư viện TCF của IAB. Các tối ưu hoá sau đây cho các thành phần này đã được áp dụng trong một nhánh phát triển riêng dành riêng cho nhu cầu của PubTech:
- Sử dụng lại kết quả đã tính toán cho quá trình giải mã. Quá trình này đượ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 thiểu các vòng lặp không cần thiết trong quy trình mã hoá quy định hạn chế dành cho nhà xuất bản. Quy trình này được thực thi khi người dùng đồng ý.
Phương pháp đầu tiên trong số những phương pháp tối ưu hoá 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 liên kết với thư viện TCF của IAB. Lần tối ưu hoá thứ hai giúp giảm thời lượng xử lý do "chuỗi bản dựng" gây ra thành phần. Trên thực tế, phương pháp tối ưu hoá này cho phép giảm tối đa 60% số vòng lặp được thực thi mỗi khi có người dùng đồng ý.
Kết quả
Với các chiến lược mang lại lợi nhuận trước đây và phương pháp tối ưu hoá bố cục hiển thị mới, INP của CMP đã cải thiện tới 65%. Nhờ đó, khả năng phản hồi của trải nghiệm người dùng của CMP PubConsent đã được cải thiện đáng kể.Đối với một số quảng cáo, khả năng xem thậm chí còn được cải thiện thêm 1, 5% nhờ tối ưu hoá thời điểm quảng cáo được yêu cầu.
Ngoài những điểm cải tiến này, thư viện TCF của IAB quan sát thấy INP được cải thiện tới 77% trên thiết bị di động cho những khách hàng chịu ảnh hưởng nhờ giảm tới 85% các thao tác dài do TCF gây ra. Điều này đã giúp giảm đáng kể mức hao tổn của 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ố lượng nguồn gốc chuyển INP khi sử dụng CMP PubConsent cải thiện 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 việc 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ờ các nỗ lực tối ưu hoá của chúng tôi. Do đó, chúng tôi đang xem xét các biện pháp cải thiện hiệu suất hơn nữa cho CMP của PubConsent, tận dụng dữ liệu quan trọng về Giám sát người dùng thực (RUM) 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à sự tiến bộ, thúc đẩy những 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 thích ứng, đồng thời tránh được các 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 các loại cải tiến này!
Xin đặc biệt cảm ơn Luca Coppola, Giám đốc công nghệ PubTech đã hỗ trợ công cuộc đổi mới này và Jeremy Wagner, Michal Mocny và Rick Viscomi của Google.