Menangani Intervensi Iklan Berat

Rowan Merewood

Twitter GitHub Glitch Mastodon

Iklan yang menggunakan jumlah resource yang tidak proporsional pada perangkat berdampak negatif pada pengalaman pengguna—mulai dari efek nyata penurunan performa hingga konsekuensi yang kurang terlihat seperti menguras baterai atau menghabiskan kuota bandwidth. Iklan ini bervariasi, mulai dari iklan yang aktif berbahaya, seperti penambang mata uang kripto, hingga konten asli dengan bug yang tidak disengaja atau masalah performa.

Chrome menetapkan batas resource yang dapat digunakan iklan dan menghapus muatan iklan tersebut jika batas terlampaui. Anda dapat membaca pengumumannya di blog Chromium untuk mengetahui detail selengkapnya. Mekanisme yang digunakan untuk menghapus muatan 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 total lebih dari 60 detik
• Menggunakan thread utama selama lebih dari 15 detik dalam setiap periode 30 detik
• Menggunakan lebih dari 4 megabyte bandwidth jaringan

Semua resource yang digunakan oleh iframe turunan mana pun dari frame iklan dihitung terhadap batas untuk mengintervensi iklan tersebut. Perlu diperhatikan bahwa batas waktu thread utama tidak sama dengan waktu yang berlalu sejak pemuatan iklan. Batasannya adalah durasi waktu yang diperlukan CPU untuk mengeksekusi kode iklan.

Menguji intervensi

Intervensi ini disertakan dalam Chrome 85, tetapi secara default ada beberapa derau dan variasi yang ditambahkan ke nilai minimum untuk melindungi privasi pengguna.

Menyetel chrome://flags/#heavy-ad-privacy-mitigations ke Nonaktif akan menghapus perlindungan tersebut, yang berarti pembatasan akan diterapkan secara deterministik, murni sesuai dengan batas. Hal ini akan mempermudah proses debug dan pengujian.

Catatan: Versi Chrome sebelumnya menyertakan flag #heavy-ad-privacy-mitigations-opt-out dan #enable-heavy-ad-intervention untuk pengujian awal. Tanda ini tidak lagi diperlukan dan telah dihapus.

Saat intervensi dipicu, Anda akan melihat konten dalam iframe yang berisi iklan berukuran berat yang 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, jadi Chrome menghapusnya."

Anda dapat melihat intervensi yang diterapkan pada konten contoh di berat-ads.glitch.me. Anda juga dapat menggunakan situs pengujian ini untuk memuat URL arbitrer sebagai cara cepat untuk menguji konten Anda sendiri.

Perlu diketahui saat menguji 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 dengan tag baru dapat membantu mengatasi masalah ini.
• Pastikan halaman tetap dalam fokus - memindahkan halaman ke latar belakang (beralih ke jendela lain) akan menjeda task queue untuk halaman, sehingga tidak akan memicu intervensi CPU.
• Pastikan Anda tidak mengetuk atau mengklik konten iklan saat menguji - 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

Anda tidak perlu melakukan tindakan apa pun, perhatikan bahwa pengguna mungkin melihat iklan yang melebihi batas tersebut dihapus saat berada di situs Anda.

Anda menampilkan iklan pihak pertama di situs atau menyediakan iklan untuk display 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 bahwa Anda mengetahui cara menguji konten untuk menemukan masalah performa dan penggunaan resource. Anda juga harus melihat panduan di platform iklan pilihan Anda karena platform tersebut dapat memberikan saran atau batasan teknis tambahan, misalnya, lihat Panduan Google untuk materi iklan display. Pertimbangkan untuk langsung membuat nilai minimum yang dapat dikonfigurasi ke alat penulisan agar iklan berperforma buruk tidak ditayangkan.

Apa yang terjadi jika iklan dihapus?

Intervensi di Chrome dilaporkan melalui Reporting API yang tepat dengan jenis laporan intervention. Anda dapat menggunakan Reporting API agar diberi tahu tentang intervensi dengan permintaan POST ke endpoint pelaporan atau dalam JavaScript Anda.

Laporan ini dipicu pada iframe yang diberi tag iklan root beserta semua turunannya, yaitu setiap frame yang dibongkar oleh intervensi. Artinya, jika iklan yang berasal dari sumber pihak ketiga, yaitu iframe lintas situs, pihak ketiga tersebut (misalnya, penyedia iklan) akan bertanggung jawab menangani laporan tersebut.

Guna 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"
 }
}]

Catatan: Nilai null adalah yang diharapkan. Intervensi ini akan dipicu jika batas tercapai, tetapi titik tertentu dalam kode tersebut belum tentu menjadi masalah.

JavaScript API menyediakan ReportingObserver dengan metode observe() yang dapat digunakan untuk memicu callback yang diberikan pada intervensi. Tindakan 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 ini secara harfiah akan menghapus halaman dari iframe, Anda harus menambahkan alat pengaman untuk memastikan bahwa laporan benar-benar 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);
});

Ingat bahwa untuk melindungi pengalaman pengguna, peristiwa pagehide membatasi jumlah pekerjaan yang dapat terjadi di dalamnya. Misalnya, jika Anda mencoba mengirim permintaan fetch() dengan laporan, permintaan tersebut akan dibatalkan. Anda harus menggunakan navigator.sendBeacon() untuk mengirim laporan tersebut, meskipun demikian, ini hanya upaya terbaik oleh browser, bukan jaminan.

Perhatian: Jangan gunakan peristiwa unload dan beforeunload di sini. Tindakan ini secara aktif akan mengganggu performa dan cache halaman Anda di beberapa browser.

JSON yang dihasilkan dari JavaScript serupa dengan yang dikirim pada permintaan 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',
    },
  },
];

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 merujuk ke koleksi web.dev/fast.

Menguji iklan dalam konteks yang lebih terpisah mungkin akan berguna bagi Anda. Anda dapat menggunakan opsi URL kustom di https://berat-ads.glitch.me untuk mengujinya dengan iframe siap pakai dengan 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 Alat Lainnya > Rendering), pilih "Highlight Ad Frames". Jika menguji konten di jendela tingkat atas atau konteks lain yang tidak diberi tag sebagai iklan, intervensi tidak akan dipicu, tetapi Anda masih dapat memeriksa secara manual terhadap nilai minimum.

Status iklan frame juga ditampilkan di panel Elements tempat anotasi ad ditambahkan setelah tag <iframe> pembuka. Hal ini juga terlihat di panel Application pada bagian Frames, tempat frame yang diberi tag iklan akan menyertakan atribut "Ad Status".

Penggunaan jaringan

Tampilkan panel Jaringan di Chrome DevTools untuk melihat aktivitas jaringan secara keseluruhan untuk iklan. Sebaiknya pastikan opsi "Disable cache" dicentang untuk mendapatkan hasil yang konsisten pada pemuatan berulang.

Panel jaringan di DevTools.

Nilai yang ditransfer di bagian bawah halaman akan menampilkan jumlah yang ditransfer untuk seluruh halaman. Sebaiknya gunakan input Filter di bagian atas untuk membatasi permintaan hanya ke permintaan yang terkait dengan iklan.

Jika Anda menemukan permintaan awal untuk iklan, misalnya, sumber untuk iframe, Anda juga dapat menggunakan tab Inisiator dalam permintaan untuk melihat semua permintaan yang dipicu.

Tab inisiator untuk permintaan.

Mengurutkan daftar keseluruhan permintaan berdasarkan ukuran adalah cara yang baik untuk menemukan resource yang terlalu besar. Penyebab umumnya mencakup gambar dan video yang belum dioptimalkan.

Mengurutkan permintaan berdasarkan ukuran respons.

Selain itu, mengurutkan berdasarkan nama dapat menjadi cara yang baik untuk menemukan permintaan berulang. Objek ini mungkin bukan satu resource besar yang memicu intervensi, tetapi sejumlah besar permintaan berulang yang secara bertahap melampaui batas.

Penggunaan CPU

Panel Performa di DevTools akan membantu mendiagnosis masalah penggunaan CPU. Langkah pertama adalah membuka menu Setelan Tangkapan. Gunakan menu drop-down CPU untuk memperlambat CPU sebanyak mungkin. Intervensi untuk CPU jauh lebih mungkin dipicu pada perangkat dengan daya yang lebih rendah daripada mesin pengembangan kelas atas.

Aktifkan throttling jaringan dan CPU di panel Performa.

Selanjutnya, klik tombol Record untuk mulai merekam aktivitas. Anda mungkin ingin bereksperimen dengan waktu dan durasi pencatatan, karena pelacakan yang panjang bisa memakan waktu cukup lama untuk dimuat. Setelah rekaman dimuat, Anda dapat menggunakan linimasa atas untuk memilih bagian rekaman. Fokus pada area pada grafik dengan warna kuning solid, ungu, atau hijau yang merepresentasikan pembuatan skrip, rendering, dan penggambaran.

Ringkasan trace di panel Performa.

Pelajari tab Bottom-Up, Call Tree, dan Log Peristiwa di bagian bawah. Mengurutkan kolom tersebut menurut Self Time dan Total Time dapat membantu mengidentifikasi bottleneck dalam kode.

Urutkan menurut Waktu Mandiri di tab Bottom-Up.

File sumber terkait juga ditautkan di sana, sehingga Anda dapat mengikutinya hingga panel Sources untuk memeriksa biaya setiap baris.

Waktu eksekusi ditampilkan di panel Sumber.

Catatan: DevTools mungkin tidak selalu menampilkan informasi pengaturan waktu jika frame telah dibongkar, jadi Anda mungkin perlu menangkap rekaman aktivitas dengan iklan terisolasi atau dengan intervensi dinonaktifkan.

Masalah umum yang harus dicari di sini adalah animasi yang kurang dioptimalkan yang memicu tata letak dan paint berkelanjutan atau operasi mahal yang tersembunyi dalam library yang disertakan.

Cara melaporkan intervensi yang salah

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 mencurigai bahwa intervensi salah diterapkan, Anda dapat melaporkan masalah melalui template ini. Pastikan Anda telah mengambil contoh laporan intervensi dan memiliki URL contoh untuk mereproduksi masalah.