Iklan yang menggunakan sejumlah besar resource di perangkat akan berdampak negatif pada pengalaman pengguna—mulai dari efek yang jelas seperti penurunan performa hingga konsekuensi yang kurang terlihat seperti menguras baterai atau menghabiskan alokasi bandwidth. Iklan ini berkisar dari yang aktif berbahaya, seperti penambang mata uang kripto, hingga konten asli dengan bug atau masalah performa yang tidak disengaja.
Chrome menetapkan batas pada resource yang dapat digunakan iklan dan membongkar iklan tersebut jika batas terlampaui. Anda dapat membaca pengumuman di blog Chromium untuk mengetahui detail selengkapnya. Mekanisme yang digunakan untuk membatalkan pemuatan iklan adalah Intervensi Iklan Berat.
Kriteria Iklan Berat
Iklan dianggap berat jika pengguna belum berinteraksi dengannya (misalnya, belum mengetuk atau mengkliknya) dan memenuhi salah satu kriteria berikut:
- Menggunakan thread utama selama lebih dari 60 detik secara total
- Menggunakan thread utama selama lebih dari 15 detik dalam jangka waktu 30 detik
- Menggunakan lebih dari 4 megabyte bandwidth jaringan
Semua resource yang digunakan oleh iframe turunan dari frame iklan dihitung terhadap batas untuk melakukan intervensi pada iklan tersebut. Perlu diperhatikan bahwa batas waktu thread utama tidak sama dengan waktu yang berlalu sejak memuat iklan. Batasnya adalah berapa lama CPU menjalankan kode iklan.
Menguji intervensi
Intervensi ini dikirimkan di Chrome 85, tetapi secara default ada beberapa derau dan variabilitas yang ditambahkan ke nilai minimum untuk melindungi privasi pengguna.
Menetapkan chrome://flags/#heavy-ad-privacy-mitigations ke Nonaktif akan menghapus
perlindungan tersebut, yang berarti batasan diterapkan secara deterministik,
murni sesuai dengan batasnya. Hal ini akan mempermudah proses debug dan pengujian.
Saat intervensi dipicu, Anda akan melihat konten di iframe untuk iklan berat diganti dengan pesan Iklan dihapus. Jika Anda mengikuti link Detail yang disertakan, Anda akan melihat pesan yang menjelaskan: "Iklan ini menggunakan terlalu banyak resource untuk perangkat Anda, sehingga Chrome menghapusnya."
Anda dapat melihat intervensi yang diterapkan pada contoh konten di heavy-ads.glitch.me Anda juga dapat menggunakan situs pengujian ini untuk memuat URL arbitrer sebagai cara cepat untuk menguji konten Anda sendiri.
Saat melakukan pengujian, perhatikan bahwa ada sejumlah alasan yang dapat mencegah penerapan intervensi.
- Memuat ulang iklan yang sama dalam halaman yang sama akan mengecualikan kombinasi tersebut dari intervensi. Menghapus histori penjelajahan dan membuka halaman di tab baru dapat membantu.
- Pastikan halaman tetap dalam fokus - memindahkan halaman ke latar belakang (beralih ke jendela lain) akan menjeda antrean tugas untuk halaman tersebut, dan tidak akan memicu intervensi CPU.
- Pastikan Anda tidak mengetuk atau mengklik konten iklan saat melakukan pengujian - intervensi tidak akan diterapkan pada konten yang menerima interaksi pengguna.
Apa yang perlu Anda lakukan?
Anda menampilkan iklan dari penyedia pihak ketiga di situs Anda
Tidak ada tindakan yang diperlukan, cukup ketahui bahwa pengguna mungkin melihat iklan yang melebihi batas yang dihapus saat berada di situs Anda.
Anda menampilkan iklan pihak pertama di situs Anda atau Anda menyediakan iklan untuk tampilan pihak ketiga
Lanjutkan membaca untuk memastikan Anda menerapkan pemantauan yang diperlukan melalui Reporting API untuk intervensi Iklan Berat.
Anda membuat konten iklan atau Anda mengelola alat untuk membuat konten iklan
Lanjutkan membaca untuk memastikan Anda mengetahui cara menguji konten terkait masalah performa dan penggunaan resource. Anda juga harus membaca panduan di platform iklan pilihan Anda karena mereka dapat memberikan saran atau batasan teknis tambahan. Misalnya, lihat Pedoman untuk materi iklan Display Google. Pertimbangkan untuk membuat nilai minimum yang dapat dikonfigurasi langsung ke alat penulisan Anda untuk mencegah iklan berperforma buruk ditayangkan.
Apa yang terjadi jika iklan dihapus?
Intervensi di Chrome dilaporkan melalui
Reporting API
dengan jenis laporan intervention. Anda dapat menggunakan Reporting API untuk mendapatkan notifikasi tentang intervensi baik dengan permintaan POST ke endpoint pelaporan atau dalam JavaScript Anda.
Laporan ini dipicu di iframe yang diberi tag iklan root beserta semua turunannya, yaitu setiap frame yang dibongkar oleh intervensi. Artinya, jika iklan berasal dari sumber pihak ketiga, yaitu iframe lintas situs, maka pihak ketiga tersebut (misalnya, penyedia iklan) yang akan menangani laporan.
Untuk mengonfigurasi halaman untuk laporan HTTP, respons harus menyertakan header
Report-To:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Permintaan POST yang dipicu akan menyertakan laporan seperti ini:
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"
}
}]
JavaScript API menyediakan ReportingObserver dengan metode observe()
yang dapat digunakan untuk memicu callback yang disediakan pada intervensi. Hal ini dapat berguna jika Anda ingin melampirkan informasi tambahan ke laporan untuk membantu proses debug.
// 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();
Namun, karena intervensi akan benar-benar menghapus halaman dari iframe, Anda harus menambahkan mekanisme keamanan untuk memastikan bahwa laporan pasti diambil sebelum halaman benar-benar hilang, misalnya, iklan dalam iframe. Untuk melakukannya, Anda dapat mengaitkan callback yang sama ke peristiwa pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Ingatlah bahwa, untuk melindungi pengalaman pengguna, peristiwa pagehide membatasi jumlah pekerjaan yang dapat terjadi di dalamnya. Misalnya, mencoba mengirim permintaan
fetch() dengan laporan akan menyebabkan permintaan tersebut dibatalkan.
Anda harus menggunakan navigator.sendBeacon() untuk mengirim laporan tersebut dan meskipun demikian, hal ini hanya upaya terbaik oleh browser, bukan jaminan.
JSON yang dihasilkan dari JavaScript mirip dengan yang dikirim pada POST
permintaan:
[
{
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',
},
},
];
Mendiagnosis penyebab intervensi
Konten iklan hanyalah konten web, jadi gunakan alat seperti Lighthouse untuk mengaudit keseluruhan performa konten Anda. Audit yang dihasilkan memberikan panduan inline tentang peningkatan. Anda juga dapat melihat koleksi web.dev/fast.
Anda mungkin merasa perlu menguji iklan dalam konteks yang lebih terisolasi. Anda dapat menggunakan opsi URL kustom di https://heavy-ads.glitch.me untuk mengujinya dengan iframe yang sudah dibuat dan diberi tag iklan. Anda dapat menggunakan Chrome DevTools untuk memvalidasi bahwa konten telah diberi tag sebagai iklan. Di panel Rendering (dapat diakses melalui menu tiga titik ⋮, lalu More Tools > Rendering), pilih "Highlight Ad Frames". Jika menguji konten di jendela tingkat teratas atau konteks lain yang tidak menandainya sebagai iklan, intervensi tidak akan dipicu, tetapi Anda masih dapat memeriksa secara manual terhadap nilai minimum.
Status iklan frame juga ditampilkan di panel Elemen tempat anotasi ad
ditambahkan setelah tag <iframe> pembuka. Hal ini juga dapat dilihat di
panel Application di bagian Frames, tempat frame yang diberi tag iklan
akan menyertakan atribut "Ad Status".
Penggunaan jaringan
Buka panel Jaringan di Chrome DevTools untuk melihat keseluruhan aktivitas jaringan iklan. Anda harus memastikan opsi "Nonaktifkan cache" dicentang untuk mendapatkan hasil yang konsisten selama pemuatan berulang.
Nilai yang ditransfer di bagian bawah halaman akan menunjukkan jumlah yang ditransfer untuk seluruh halaman. Sebaiknya gunakan input Filter di bagian atas untuk membatasi permintaan hanya pada permintaan yang terkait dengan iklan.
Jika Anda menemukan permintaan awal untuk iklan, misalnya, sumber untuk iframe, Anda juga dapat menggunakan tab Pemrakarsa dalam permintaan untuk melihat semua permintaan yang dipicu.
Mengurutkan keseluruhan daftar permintaan berdasarkan ukuran adalah cara yang baik untuk menemukan resource yang terlalu besar. Penyebab umumnya adalah gambar dan video yang belum dioptimalkan.
Selain itu, mengurutkan menurut nama dapat menjadi cara yang baik untuk menemukan permintaan yang berulang. Intervensi mungkin tidak dipicu oleh satu resource besar, tetapi oleh sejumlah besar permintaan berulang yang secara bertahap melebihi batas.
Penggunaan CPU
Panel Performa di DevTools akan membantu mendiagnosis masalah penggunaan CPU. Langkah pertama adalah membuka menu Setelan pengambilan gambar. Gunakan dropdown CPU untuk memperlambat CPU sebanyak mungkin. Intervensi untuk CPU jauh lebih mungkin dipicu pada perangkat yang menggunakan lebih sedikit daya daripada mesin pengembangan kelas atas.
Selanjutnya, klik tombol Rekam untuk mulai merekam aktivitas. Anda dapat bereksperimen dengan waktu dan durasi perekaman, karena rekaman aktivitas yang panjang dapat memakan waktu cukup lama untuk dimuat. Setelah rekaman dimuat, Anda dapat menggunakan linimasa atas untuk memilih bagian rekaman. Berfokus pada area pada grafik berwarna kuning, ungu, atau hijau solid yang merepresentasikan pembuatan skrip, rendering, dan menggambar.
Jelajahi tab Bottom-Up, Call Tree, dan Event Log di bagian bawah. Mengurutkan kolom tersebut menurut Waktu Mandiri dan Total Waktu dapat membantu mengidentifikasi hambatan dalam kode.
File sumber terkait juga ditautkan di sana, sehingga Anda dapat membukanya melalui panel Sumber untuk memeriksa biaya setiap baris.
Masalah umum yang perlu dicari di sini adalah animasi yang tidak dioptimalkan dengan baik yang memicu tata letak dan gambar berkelanjutan atau operasi mahal yang tersembunyi dalam library yang disertakan.
Cara melaporkan intervensi yang tidak tepat
Chrome memberi tag pada konten sebagai iklan dengan mencocokkan permintaan resource dengan daftar filter. Jika konten non-iklan telah diberi tag, pertimbangkan untuk mengubah kode tersebut agar tidak cocok dengan aturan pemfilteran. Jika Anda menduga intervensi telah diterapkan secara keliru, Anda dapat mengajukan masalah melalui template ini. Pastikan Anda telah mengambil contoh laporan intervensi dan memiliki contoh URL untuk mereproduksi masalah tersebut.