Quảng cáo sử dụng một lượng tài nguyên không cân đối trên thiết bị sẽ tác động tiêu cực đến trải nghiệm của người dùng – từ những tác động rõ ràng của việc giảm hiệu suất đến các hậu quả ít thấy hơn như tiêu hao pin hoặc tiêu tốn hết băng thông. Những quảng cáo này thuộc nhiều loại, từ nội dung độc hại chủ động, chẳng hạn như công cụ đào tiền mã hoá, cho đến nội dung thực có lỗi vô tình hay vấn đề về hiệu suất.
Chrome đặt ra giới hạn về tài nguyên mà một quảng cáo có thể sử dụng và huỷ tải quảng cáo đó nếu vượt quá giới hạn. Bạn có thể đọc thông báo trên blog của Chromium để biết thêm chi tiết. Cơ chế dùng để huỷ tải quảng cáo là Can thiệp quảng cáo nặng.
Tiêu chí Quảng cáo nặng
Một quảng cáo được coi là nặng nếu người dùng chưa tương tác với quảng cáo đó (ví dụ: chưa nhấn hoặc nhấp vào quảng cáo đó) và quảng cáo đáp ứng bất kỳ tiêu chí nào sau đây:
- Sử dụng luồng chính tổng cộng hơn 60 giây
- Sử dụng luồng chính hơn 15 giây trong khoảng thời gian 30 giây bất kỳ
- Sử dụng hơn 4 megabyte băng thông mạng
Tất cả tài nguyên mà mọi iframe con của khung quảng cáo sử dụng đều được tính vào các giới hạn can thiệp vào quảng cáo đó. Điều quan trọng bạn cần lưu ý là giới hạn thời gian của luồng chính không giống với thời gian đã trôi qua kể từ khi tải quảng cáo. Các giới hạn đó là thời gian CPU cần để thực thi mã của quảng cáo.
Kiểm tra biện pháp can thiệp
Biện pháp can thiệp đã được đưa vào Chrome 85, nhưng theo mặc định, các ngưỡng nhiễu và biến thể sẽ được thêm vào các ngưỡng để bảo vệ quyền riêng tư của người dùng.
Việc đặt chrome://flags/#heavy-ad-privacy-mitigations thành Disabled (Tắt) sẽ xoá các biện pháp bảo vệ đó, nghĩa là các hạn chế sẽ được áp dụng một cách xác định, hoàn toàn theo các giới hạn. Điều này sẽ giúp việc gỡ lỗi và kiểm thử trở nên dễ dàng hơn.
Khi biện pháp can thiệp được kích hoạt, bạn sẽ thấy nội dung trong iframe cho một quảng cáo nặng được thay thế bằng thông báo Đã xoá quảng cáo. Nếu truy cập đường liên kết Chi tiết đi kèm, bạn sẽ thấy thông báo giải thích: "Quảng cáo này sử dụng quá nhiều tài nguyên cho thiết bị của bạn, vì vậy Chrome đã xoá quảng cáo đó".
Bạn có thể xem biện pháp can thiệp được áp dụng cho nội dung mẫu trên secondary-ads.glitch.me. Bạn cũng có thể sử dụng trang web thử nghiệm này để tải một URL tuỳ ý như một cách kiểm tra nhanh nội dung của riêng bạn.
Khi kiểm thử, hãy lưu ý rằng có một số lý do có thể ngăn việc áp dụng biện pháp can thiệp.
- Việc tải lại cùng một quảng cáo trong cùng một trang sẽ giúp sự can thiệp đó không bị ảnh hưởng. Việc xoá nhật ký duyệt web và mở trang trong một thẻ mới có thể giúp ích cho trường hợp này.
- Đảm bảo trang vẫn nằm trong tâm điểm – chạy nền trang (chuyển sang cửa sổ khác) sẽ tạm dừng hàng đợi tác vụ cho trang và do đó, sẽ không kích hoạt sự can thiệp của CPU.
- Hãy đảm bảo bạn không nhấn hoặc nhấp vào nội dung quảng cáo trong khi thử nghiệm. Biện pháp can thiệp sẽ không được áp dụng cho nội dung nhận được bất kỳ lượt tương tác nào của người dùng.
Việc bạn cần làm
Bạn hiển thị quảng cáo từ nhà cung cấp bên thứ ba trên trang web của mình
Bạn không cần làm gì cả. Bạn chỉ cần lưu ý rằng người dùng có thể thấy quảng cáo vượt quá giới hạn đã xoá khi hiển thị trên trang web của bạn.
Bạn hiển thị quảng cáo của bên thứ nhất trên trang web của mình hoặc bạn cung cấp quảng cáo cho quảng cáo hiển thị của bên thứ ba
Hãy tiếp tục đọc để đảm bảo bạn triển khai hoạt động theo dõi cần thiết thông qua API Báo cáo cho các biện pháp can thiệp vào Quảng cáo nặng.
Bạn tạo nội dung quảng cáo hoặc duy trì một công cụ để tạo nội dung quảng cáo
Hãy tiếp tục đọc để đảm bảo rằng bạn nắm rõ cách kiểm thử nội dung để biết các vấn đề về hiệu suất và mức sử dụng tài nguyên. Bạn cũng nên tham khảo hướng dẫn về các nền tảng quảng cáo mà bạn chọn vì các nền tảng này có thể cung cấp thêm lời khuyên hoặc quy định hạn chế về kỹ thuật, ví dụ: xem Nguyên tắc về mẫu quảng cáo hiển thị của Google. Hãy cân nhắc việc trực tiếp đưa các ngưỡng có thể định cấu hình vào các công cụ biên soạn để ngăn những quảng cáo hoạt động kém hiệu quả thoát ra ngoài tự nhiên.
Điều gì xảy ra khi một quảng cáo bị xoá?
Một sự can thiệp trong Chrome được báo cáo thông qua API Báo cáo được đặt tên hợp lý với loại báo cáo intervention. Bạn có thể sử dụng API Báo cáo để nhận thông báo về các biện pháp can thiệp theo yêu cầu của POST tới điểm cuối báo cáo hoặc trong JavaScript của bạn.
Các báo cáo này được kích hoạt trên iframe gốc gắn thẻ quảng cáo cùng với tất cả các phần tử con cháu, tức là mọi khung hình đã bị huỷ tải bằng sự can thiệp. Điều này có nghĩa là nếu một quảng cáo đến từ nguồn của bên thứ ba, tức là iframe trên nhiều trang web, thì bên thứ ba đó (ví dụ: nhà cung cấp quảng cáo) sẽ phụ trách xử lý báo cáo.
Để định cấu hình trang cho các báo cáo HTTP, phản hồi phải bao gồm tiêu đề Report-To:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Yêu cầu POST được kích hoạt sẽ bao gồm một báo cáo như sau:
POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report
[{
"type": "intervention",
"age": 60,
"url": "https://example.com/url/of/ad.html",
"body": {
"sourceFile": null,
"lineNumber": null,
"columnNumber": null,
"id": "HeavyAdIntervention",
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
}
}]
API JavaScript cung cấp cho ReportingObserver một phương thức observe() có thể dùng để kích hoạt lệnh gọi lại được cung cấp cho các biện pháp can thiệp. Thao tác này có thể hữu ích nếu bạn muốn đính kèm thông tin bổ sung vào báo cáo để hỗ trợ quá trình gỡ lỗi.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json via your own reporting process
navigator.sendBeacon('https://report.example/your-endpoint', report);
}
}
// create the observer with the callback
const observer = new ReportingObserver(
(reports, observer) => {
sendReports(reports);
},
{ buffered: true }
);
// start watching for interventions
observer.observe();
Tuy nhiên, vì biện pháp can thiệp này sẽ xoá trang khỏi iframe, nên bạn phải thêm tính năng dự phòng để đảm bảo báo cáo chắc chắn được thu thập trước khi trang biến mất hoàn toàn (ví dụ: quảng cáo trong iframe). Để làm được việc này, bạn có thể nối lệnh gọi lại đó vào sự kiện pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Hãy nhớ rằng để bảo vệ trải nghiệm người dùng, sự kiện pagehide sẽ hạn chế lượng công việc có thể diễn ra trong sự kiện đó. Ví dụ: việc cố gắng gửi một yêu cầu fetch() kèm theo các báo cáo sẽ dẫn đến việc yêu cầu đó bị huỷ.
Bạn nên sử dụng navigator.sendBeacon() để gửi báo cáo đó, thậm chí ngay cả khi đó, việc này chỉ là nỗ lực tốt nhất của trình duyệt chứ không đảm bảo.
JSON thu được từ JavaScript tương tự như JSON được gửi trong yêu cầu POST:
[
{
type: 'intervention',
url: 'https://example.com/url/of/ad.html',
body: {
sourceFile: null,
lineNumber: null,
columnNumber: null,
id: 'HeavyAdIntervention',
message:
'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
},
},
];
Chẩn đoán nguyên nhân của một biện pháp can thiệp
Nội dung quảng cáo chỉ là nội dung trên web. Vì vậy, hãy sử dụng các công cụ như Lighthouse để kiểm tra hiệu suất tổng thể của nội dung của bạn. Các kết quả kiểm tra cung cấp hướng dẫn nội tuyến về việc cải thiện. Bạn cũng có thể tham khảo tập hợp web.dev/fast.
Bạn có thể thấy hữu ích khi thử nghiệm quảng cáo của mình trong ngữ cảnh tách biệt hơn. Bạn có thể sử dụng tuỳ chọn URL tuỳ chỉnh trên https://utm-ads.glitch.me để kiểm tra điều này bằng iframe tạo sẵn, có gắn thẻ quảng cáo. Bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển để xác thực nội dung đã được gắn thẻ là quảng cáo. Trong bảng điều khiển Hiển thị (có thể truy cập qua trình đơn ba dấu chấm ⋮, sau đó chọn Công cụ khác > Kết xuất), hãy chọn "Làm nổi bật khung quảng cáo". Nếu kiểm thử nội dung trong cửa sổ cấp cao nhất hoặc ngữ cảnh khác mà không được gắn thẻ là quảng cáo, thì biện pháp can thiệp sẽ không được kích hoạt, nhưng bạn vẫn có thể tự kiểm tra các ngưỡng.
Trạng thái quảng cáo của một khung cũng hiển thị trong ngăn Phần tử, trong đó chú giải ad sẽ được thêm vào sau thẻ mở <iframe>. Bạn cũng có thể thấy trạng thái này trong bảng điều khiển Ứng dụng trong mục Khung, tại đó khung được gắn thẻ quảng cáo sẽ có thuộc tính "Trạng thái quảng cáo".
Mức sử dụng mạng
Hiển thị bảng Mạng trong Công cụ của Chrome cho nhà phát triển để xem hoạt động mạng tổng thể cho quảng cáo. Bạn nên nhớ đánh dấu tuỳ chọn "Tắt bộ nhớ đệm" để nhận được kết quả nhất quán qua các lần tải lặp lại.
Giá trị được chuyển ở cuối trang sẽ cho bạn biết số tiền đã chuyển cho toàn bộ trang. Hãy cân nhắc sử dụng phương thức nhập Bộ lọc ở trên cùng để chỉ hiện các yêu cầu có liên quan đến quảng cáo.
Nếu tìm thấy yêu cầu ban đầu cho quảng cáo (chẳng hạn như nguồn cho iframe), bạn cũng có thể sử dụng thẻ Trình khởi tạo trong yêu cầu để xem tất cả các yêu cầu mà quảng cáo kích hoạt.
Sắp xếp danh sách yêu cầu chung theo kích thước là một cách hay để phát hiện các tài nguyên quá lớn. Các nguyên nhân phổ biến bao gồm hình ảnh và video chưa được tối ưu hoá.
Ngoài ra, sắp xếp theo tên có thể là cách hay để phát hiện các yêu cầu lặp lại. Đó có thể không phải là một tài nguyên lớn kích hoạt biện pháp can thiệp, mà một số lượng lớn các yêu cầu lặp lại ngày càng tăng vượt quá giới hạn.
Mức sử dụng CPU
Bảng điều khiển Hiệu suất trong Công cụ cho nhà phát triển sẽ giúp chẩn đoán các vấn đề về mức sử dụng CPU. Bước đầu tiên là mở trình đơn Capture Settings (Cài đặt ghi). Sử dụng trình đơn thả xuống CPU (CPU) để làm chậm CPU nhiều nhất có thể. Các can thiệp cho CPU có nhiều khả năng sẽ kích hoạt trên các thiết bị công suất thấp hơn so với các máy phát triển cao cấp.
Tiếp theo, hãy nhấp vào nút Record (Ghi) để bắt đầu ghi lại hoạt động. Bạn nên thử nghiệm thời điểm và khoảng thời gian ghi lại, vì một dấu vết dài có thể mất khá nhiều thời gian để tải. Sau khi bản ghi được tải, bạn có thể sử dụng tiến trình trên cùng để chọn một phần của bản ghi. Tập trung vào các vùng trên biểu đồ bằng màu vàng, tím hoặc xanh lục đồng nhất thể hiện việc viết tập lệnh, kết xuất và tô màu.
Khám phá các thẻ Từ dưới lên, Cây cuộc gọi và Nhật ký sự kiện ở dưới cùng. Việc sắp xếp các cột đó theo Thời gian tự động và Tổng thời gian có thể giúp xác định nút thắt cổ chai trong mã.
Tệp nguồn được liên kết cũng được liên kết ở đó, vì vậy, bạn có thể theo dõi tệp đó đến bảng điều khiển Nguồn để kiểm tra chi phí của mỗi dòng.
Các vấn đề thường gặp cần xem xét ở đây là ảnh động được tối ưu hoá kém đang kích hoạt bố cục và vẽ liên tục hoặc các thao tác tốn kém bị ẩn trong một thư viện đi kèm.
Cách báo cáo các biện pháp can thiệp không chính xác
Chrome gắn thẻ nội dung dưới dạng quảng cáo bằng cách so khớp các yêu cầu về tài nguyên với danh sách bộ lọc. Nếu nội dung không phải quảng cáo đã được gắn thẻ, hãy cân nhắc thay đổi mã đó để tránh khớp với các quy tắc lọc. Nếu nghi ngờ một biện pháp can thiệp đã được áp dụng không chính xác, bạn có thể nêu rõ vấn đề thông qua mẫu này. Hãy đảm bảo rằng bạn đã chụp ảnh ví dụ về báo cáo can thiệp và có một URL mẫu để tái hiện vấn đề.