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ẽ ảnh hưở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 những hậu quả ít thấy hơn như hao pin hoặc tiêu tốn hạn mức băng thông. Những quảng cáo này có thể là quảng cáo độc hại (chẳng hạn như trình khai thác tiền mã hoá) cho đến nội dung chân thực có lỗi hoặc vấn đề về hiệu suất ngoài ý muốn.
Chrome đặt giới hạn về tài nguyên mà một quảng cáo có thể sử dụng và sẽ 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ế được dùng để gỡ quảng cáo là Hoạt động can thiệp vào quảng cáo tiêu tốn dung lượng.
Tiêu chí về Quảng cáo tiêu tốn tài nguyên
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 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 giới hạn can thiệp vào quảng cáo đó. Xin lưu ý rằng 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. Giới hạn này là về thời gian CPU 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 triển khai trong Chrome 85, nhưng theo mặc định, có một số nhiễu và độ biến thiên được thêm vào các ngưỡng để bảo vệ quyền riêng tư của người dùng.
Khi bạn đặt chrome://flags/#heavy-ad-privacy-mitigations thành Đã tắt, các biện pháp bảo vệ đó sẽ bị xoá, tức là các hạn chế được áp dụng một cách xác định, hoàn toàn theo 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 có kích thước lớn được thay thế bằng thông báo Quảng cáo đã bị xoá. Nếu nhấp vào đường liên kết Chi tiết, bạn sẽ thấy một thông báo giải thích: "Quảng cáo này sử dụng quá nhiều tài nguyên của thiết bị, nên Chrome đã xoá quảng cáo này."
Bạn có thể xem biện pháp can thiệp được áp dụng cho nội dung mẫu trên heavy-ads.glitch.me. Bạn cũng có thể sử dụng trang web kiểm thử này để tải một URL tuỳ ý như một cách nhanh chóng để kiểm thử nội dung của riêng bạn.
Xin lưu ý rằng khi kiểm thử, có một số lý do có thể ngăn chặ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ẽ loại trừ tổ hợp đó khỏi biện pháp can thiệp. Xoá nhật ký duyệt web và mở trang trong một thẻ mới có thể giúp ích trong trường hợp này.
- Đảm bảo trang vẫn ở chế độ lấy tiêu điểm – việc chuyển trang xuống 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 và do đó sẽ không kích hoạt sự can thiệp của CPU.
- Đảm bảo bạn không nhấn hoặc nhấp vào nội dung quảng cáo trong khi kiểm thử – 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 mộ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ả, chỉ cần lưu ý rằng người dùng có thể thấy những 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 cung cấp quảng cáo cho bên thứ ba hiển thị
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 Reporting API cho các biện pháp can thiệp đối với 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 bạn biết cách kiểm thử nội dung của mình để phát hiện 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ể cung cấp thêm lời khuyên kỹ thuật hoặc quy định hạn chế, ví dụ: hãy 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 tạo các ngưỡng có thể định cấu hình ngay trong công cụ soạn thảo để ngăn quảng cáo hoạt động kém hiệu quả xuất hiện tràn lan.
Điều gì sẽ xảy ra khi một quảng cáo bị xoá?
Một biện pháp can thiệp trong Chrome được báo cáo thông qua Reporting API (API Báo cáo) với loại báo cáo intervention. Bạn có thể sử dụng Reporting API để được thông báo về các biện pháp can thiệp bằng cách gửi yêu cầu POST đến một đ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 được gắn thẻ quảng cáo gốc cùng với tất cả các thành phần con của iframe đó, tức là mọi khung hình do biện pháp can thiệp này huỷ tải. Điều này có nghĩa là nếu quảng cáo đến từ một nguồn 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ẽ 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 ReportingObserver bằng phương thức observe() mà bạn có thể dùng để kích hoạt một lệnh gọi lại được cung cấp trên 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 này sẽ thực sự xoá trang khỏi iframe, nên bạn cần thêm một cơ chế an toàn để đảm bảo rằng báo cáo chắc chắn được ghi lại trước khi trang biến mất hoàn toàn, ví dụ: một quảng cáo trong iframe. Để làm việc này, bạn có thể liên kết lệnh gọi lại tương tự 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 đó. 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 dùng navigator.sendBeacon() để gửi báo cáo đó và ngay cả khi đó, trình duyệt cũng chỉ có thể cố gắng hết sức chứ không đảm bảo được.
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 yếu tố 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ác hoạt động kiểm tra này sẽ cung cấp hướng dẫn cùng dòng về những điểm cần 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 trong một bối cảnh biệt lập hơn. Bạn có thể sử dụng lựa chọn URL tuỳ chỉnh trên https://heavy-ads.glitch.me để kiểm thử tính năng này bằng một iframe được gắn thẻ quảng cáo và có sẵn. Bạn có thể sử dụng Chrome DevTools để xác thực nội dung đã được gắn thẻ là quảng cáo. Trong bảng điều khiển Rendering (Kết xuất) (có thể truy cập thông qua trình đơn ba dấu chấm ⋮, sau đó chọn More Tools (Công cụ khác) > Rendering (Kết xuất)), hãy chọn "Highlight Ad Frames" (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à 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 cách thủ công dựa trên các ngưỡng.
Trạng thái quảng cáo của khung hình cũng xuất hiện trong ngăn Elements (Phần tử) khi chú thích ad được thêm sau thẻ mở <iframe>. Bạn cũng có thể thấy thông tin này trong bảng Ứng dụng ở mục Khung hình, trong đó các khung hình được gắn thẻ quảng cáo sẽ có thuộc tính "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ể cho quảng cáo. Bạn nên đảm bảo chọn mục "Tắt bộ nhớ đệm" để nhận được kết quả nhất quán trong 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 được 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 để chỉ giới hạn các yêu cầu đối 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 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à yêu cầu đó kích hoạt.
Sắp xếp danh sách yêu cầu tổng thể theo kích thước là một cách hay để phát hiện các tài nguyên có kích thước quá lớn. Nguyên nhân thường gặp là do 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 trùng lặp. 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 tăng dần 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 để giảm tốc độ CPU nhiều nhất có thể. Các biện pháp can thiệp đối với 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 các máy phát triển cao cấp.
Tiếp theo, hãy nhấp vào nút Ghi để bắt đầu ghi lại hoạt động. Bạn có thể thử nghiệm thời điểm và thời lượng 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 được tải, bạn có thể 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 vùng trên biểu đồ có màu vàng, tím hoặc xanh lục liền nét, thể hiện hoạt động tập lệnh, kết xuất và vẽ.
Khám phá các thẻ Từ 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 Thời gian tự thực hiện và Tổng thời gian có thể giúp xác định các nút thắt cổ chai trong mã.
Tệp nguồn được liên kết cũng nằm ở đó, vì vậy, bạn có thể theo dõi tệp đó thông qua bảng Nguồn để kiểm tra chi phí của từng dòng.
Các vấn đề thường gặp cần tìm ở đây là ảnh động được tối ưu hoá kém đang kích hoạt bố cục và hoạt động 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 thông tin 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 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 việc thay đổi mã đó để tránh trùng khớp với các quy tắc lọc. Nếu nghi ngờ rằng biện pháp can thiệp được áp dụng không chính xác, bạn có thể báo cáo vấn đề thông qua mẫu này. Vui lòng đảm bảo bạn đã chụp ảnh màn hình ví dụ về báo cáo can thiệp và có một URL mẫu để tái hiện vấn đề.