Quảng cáo tiêu thụ một lượng tài nguyên không cân xứng 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 như làm giảm hiệu suất đến những hậu quả ít rõ ràng hơn như làm tiêu hao pin hoặc làm hao tổn hạn mức băng thông. Loại quảng cáo này có thể là nội dung độc hại chủ động (chẳng hạn như khai thác tiền mã hoá) cho đến nội dung chân thực nhưng vô tình gặp lỗi hoặc vấn đề về hiệu suất.
Chrome đặt giới hạn về tài nguyên mà 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 Chromium để biết thêm thông tin chi tiết. Cơ chế dùng để tải quảng cáo xuống là Can thiệp vào quảng cáo tiêu tốn dung lượ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 trong tổng cộng hơn 60 giây
- Sử dụng luồng chính trong hơn 15 giây trong bất kỳ khoảng thời gian 30 giây nào
- Sử dụng hơn 4 megabyte băng thông mạng
Tất cả tài nguyên mà bất kỳ iframe con nào của khung quảng cáo sử dụng đều được tính vào giới hạn can thiệp vào quảng cáo đó. Điều quan trọng 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 này là về thời gian CPU cần để thực thi mã của quảng cáo.
Kiểm thử biện pháp can thiệp
Biện pháp can thiệp này được đưa vào Chrome 85, nhưng theo mặc định, các ngưỡng này sẽ có thêm một số độ nhiễu và biến đổi để 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 Tắt sẽ xoá các biện pháp bảo vệ đó, nghĩa là các hạn chế được áp dụng một cách tất định, hoàn toàn theo giới hạn. Thao tác 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 của một quảng cáo nặng được thay thế bằng thông báo Đã loại bỏ quảng cáo. Nếu truy cập vào đườ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 trang web heavy-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ỳ ý làm cách nhanh chóng để kiểm thử nội dung của riêng mình.
Xin lưu ý rằng khi kiểm thử, có một số lý do có thể khiến hệ thống không á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ẽ miễn trừ tổ hợp đó khỏi biện pháp can thiệp. Việc xoá nhật ký duyệt web và mở trang trong một thẻ mới có thể giúp ích cho bạn ở đây.
- Đảm bảo trang luôn nằm trong tiêu điểm – việc chạy trang ở chế độ nền (chuyển sang một cửa sổ khác) sẽ tạm dừng hàng đợi tác vụ cho trang, do đó sẽ không kích hoạt CPU can thiệp.
- Đả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ỳ hoạt động 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 của 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ả, 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 đã bị xoá khi truy cập vào 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 màn hình của bên thứ ba
Hãy tiếp tục đọc để đảm bảo bạn triển khai hoạt động giám sát cần thiết thông qua API Báo cáo cho các biện pháp can thiệp liên quan đến quảng cáo nhiều.
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 bạn nắm được cách kiểm thử nội dung của mình về 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 trên 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ể đưa ra thêm các quy định hạn chế hoặc lời khuyên kỹ thuật, ví dụ: hãy xem Hướng dẫn của Google về mẫu quảng cáo hiển thị. Hãy cân nhắc việc tạo các ngưỡng có thể định cấu hình ngay trong các công cụ tạo của bạn để ngăn quảng cáo hoạt động kém xuất hiện.
Điều gì sẽ xảy ra khi quảng cáo bị xoá?
Một biện pháp can thiệp vào Chrome được báo cáo thông qua API Báo cáo có tên phù hợp với loại báo cáo intervention. Bạn có thể sử dụng API Báo cáo để được thông báo về các biện pháp can thiệp thông qua yêu cầu POST đến một điểm cuối báo cáo hoặc trong JavaScript.
Các báo cáo này được kích hoạt trên iframe gốc được gắn thẻ quảng cáo cùng với tất cả các khung con của iframe đó, tức là mọi khung được giải phóng tải bằng biện pháp can thiệp. Điều này có nghĩa là nếu một quảng cáo đến từ nguồn bên thứ ba, tức là một iframe trên nhiều trang web, thì bên thứ ba đó (ví dụ: nhà cung cấp quảng cáo) sẽ xử lý báo cáo.
Để định cấu hình trang cho 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 phương thức observe() có thể dùng để kích hoạt lệnh gọi lại được cung cấp đối với các biện pháp can thiệp. Điều này có thể hữu ích nếu bạn muốn đính kèm thêm thông tin vào báo cáo để hỗ trợ 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 sẽ xoá trang khỏi khung hiển thị nội tuyến, nên bạn nên thêm một biện pháp bảo vệ an toàn để đảm bảo rằng báo cáo được ghi lại trước khi trang biến mất hoàn toàn, ví dụ: quảng cáo trong khung hiển thị nội tuyến. Để thực hiện việc này, bạn có thể nối cùng một 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ể xảy ra trong sự kiện đó. Ví dụ: việc cố gắng gửi yêu cầu fetch() cùng với các báo cáo sẽ khiến yêu cầu đó bị huỷ.
Bạn nên sử dụng navigator.sendBeacon() để gửi báo cáo đó. Mặc dù vậy, đây chỉ là nỗ lực tốt nhất của trình duyệt chứ không phải sự đảm bảo.
JSON thu được từ JavaScript tương tự như JSON được gửi trên 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 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ác lần kiểm tra kết quả cung cấp hướng dẫn cùng dòng về cách cải thiện. Bạn cũng có thể tham khảo bộ sưu tậ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://heavy-ads.glitch.me để kiểm thử điều này bằng một iframe được tạo sẵn và đượ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 Rendering (Hiển thị), bạn có thể truy cập thông qua trình đơn ⋮ có ba dấu chấm, sau đó chọn More Tools (Công cụ khác) > Rendering (Hiển thị). Sau đó, hãy chọn "Highlight Ad Frames" (Ghi chú khung quảng cáo). Nếu thử nghiệm nội dung trong cửa sổ cấp cao nhất hoặc ngữ cảnh khác mà nội dung đó 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ể kiểm tra theo ngưỡng theo cách thủ công.
Trạng thái quảng cáo của khung cũng hiển thị trong ngăn Elements (Thành phần), trong đó chú thích ad được thêm vào sau thẻ <iframe> mở. Thông tin này cũng xuất hiện trong bảng điều khiển Application (Ứng dụng) trong mục Frames (Khung), trong đó các khung được gắn thẻ quảng cáo sẽ bao gồm thuộc tính "Ad Status" (Trạng thái quảng cáo).
Sử dụng mạng
Mở bảng điều khiển Mạng trong Công cụ của Chrome cho nhà phát triển để xem hoạt động mạng tổng thể của quảng cáo. Bạn cần đảm bảo rằng bạn đã đánh dấu vào tuỳ chọn "Tắt bộ nhớ đệm" để nhận được kết quả nhất quán qua nhiều lần tải.
Giá trị đã chuyển ở cuối trang sẽ cho bạn biết số lượng đã chuyển cho toàn bộ trang. Hãy cân nhắc sử dụng đầu vào Bộ lọc ở trên cùng để hạn chế các yêu cầu chỉ với những yêu cầu 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 khung hiển thị nội tuyến, bạn cũng có thể sử dụng thẻ Trình kích hoạt trong yêu cầu đó để xem tất cả các yêu cầu mà nó kích hoạt.
Sắp xếp danh sách tổng thể các yêu cầu theo kích thước là một cách hay để phát hiện các tài nguyên quá lớn. Nguyên nhân thường gặp là hình ảnh và video chưa được tối ưu hoá.
Ngoài ra, việc sắp xếp theo tên có thể là một 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 duy nhất kích hoạt biện pháp can thiệp, mà là một số lượng lớn các yêu cầu lặp lại 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 Cài đặt chụp. Sử dụng trình đơn thả xuống CPU để làm chậm CPU nhiều nhất có thể. Các biện pháp can thiệp cho CPU có nhiều khả năng kích hoạt trên các thiết bị có công suất thấp hơn so với máy phát triển cao cấp.
Tiếp theo, 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, 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 tải xong, bạn có thể sử dụng dòng thời gian trên cùng để chọn một phần của bản ghi. Tập trung vào các khu vực trên biểu đồ có 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à vẽ.
Khám phá các thẻ Dưới lên, Cây lệnh gọi và Nhật ký sự kiện ở dưới cùng. Việc sắp xếp các cột đó theo Self Time (Thời gian tự thực thi) và Total Time (Tổng thời gian thực thi) có thể giúp xác định nút thắt cổ chai trong mã.
Tệp nguồn liên kết cũng được liên kết ở đó, vì vậy, bạn có thể theo dõi tệp này trong bảng điều khiển Sources (Nguồn) để kiểm tra chi phí của từng dòng.
Các vấn đề thường gặp cần lưu ý ở đâ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 biện pháp can thiệp không chính xác
Chrome gắn thẻ nội dung là quảng cáo bằng cách so khớp các yêu cầu 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ể gửi vấn đề thông qua mẫu này. Vui lòng đảm bảo bạn đã chụp một ví dụ về báo cáo can thiệp và có một URL mẫu để tái hiện vấn đề.