Cara Platform Pengelolaan Izin PubTech mengurangi INP di situs pelanggan mereka hingga 64%, sekaligus meningkatkan visibilitas iklan hingga 1,5%

Cara CMP PubConsent mengurangi INP untuk pelanggan mereka hingga 64% menggunakan strategi hasil yang menggunakan Scheduler API browser untuk memperbaiki masalah responsivitas yang diidentifikasi menggunakan Chrome DevTools.

Marco Prontera

Gilberto Cocchi

Platform Pengelolaan Izin (CMP) adalah alat yang membantu situs mematuhi peraturan privasi dengan mendapatkan izin pengguna untuk penggunaan cookie dan teknologi pelacakan. Selain tujuan utamanya untuk memastikan kepatuhan hukum, CMP, sebagai skrip pihak ketiga, juga harus memastikan dampak minimal pada performa dan pengalaman pengguna.

PubConsent CMP adalah produk terbaru dari PubTech. Dirancang dengan fokus utama pada performa, CMP PubConsent didesain agar ringan, memastikan pengalaman pengguna yang optimal, dan dampak minimal pada performa situs secara keseluruhan.

Dengan diperkenalkannya metrik Interaction to Next Paint (INP), PubTech dapat menemukan masalah terkait responsivitas CMP kami. Dalam studi kasus ini, PubTech menunjukkan cara mereka memecahkan masalah responsivitas di platform CMP PubConsent, dan cara mereka meningkatkan INP sebelum menjadi salah satu Core Web Vital pada Maret 2024, yang menunjukkan komitmen yang tidak tergoyahkan untuk memberikan performa terbaik dalam produk CMP.

Mengapa PubTech peduli dengan performa?

CMP PubConsent—seperti sebagian besar CMP—menawarkan fungsi pengelolaan izinnya yang diterapkan sebagai skrip pihak ketiga di halaman situs. Mitigasi dampak performa penawaran CMP kami—termasuk pada responsivitas—sangat penting untuk menjamin keberhasilan integrasi CMP.

Dengan memprioritaskan performa dan menjaga agar skrip CMP PubConsent tetap ringan, pemilik situs dapat mencapai keseimbangan yang sulit antara menggabungkan fungsi Pengelolaan Izin yang berharga sekaligus mempertahankan kualitas pengalaman pengguna.

Mengingat pentingnya fungsi yang diberikan CMP—dan dampaknya terhadap performa—PubTech menetapkan tujuan berikut:

1. Meminimalkan dampak produk CMP PubConsent terhadap INP.
2. Mengurangi tugas yang lama yang disebabkan oleh produk CMP.
3. Mengurangi Total Blocking Time (TBT), yang dapat berdampak negatif pada INP halaman.

Cara INP diukur

PubTech menggunakan Chrome DevTools untuk melakukan analisis awal dan mendiagnosis interaksi lambat secara manual. Alur kerja ini memungkinkan PubTech mengidentifikasi masalah tertentu yang memengaruhi responsivitas halaman. Misalnya, interaksi klik dalam produk CMP untuk menerima semua cookie dan kemudian menutup dialog izin cookie menyebabkan tugas yang lama yang menunda pembaruan rendering ke antarmuka pengguna. Seperti yang dapat Anda lihat dari gambar berikut, antarmuka pengguna tidak diperbarui untuk menunjukkan bahwa dialog telah ditutup hingga tugas lama selesai.

Seperti tombol untuk menerima semua cookie, tombol untuk menolak semua cookie atau menyesuaikan preferensi cookie semuanya mengikuti alur kerja yang sama dalam arsitektur CMP PubConsent. Oleh karena itu, peningkatan yang dijelaskan dalam studi kasus ini memengaruhi serangkaian interaksi pengguna dalam produk CMP.

Penundaan ini menyebabkan persepsi visual panel berada dalam status terkunci selama tugas. Karena memblokir pembaruan rendering selama jangka waktu yang cukup lama, INP halaman terpengaruh secara negatif.

Cara PubTech mengoptimalkan INP untuk tombol dan link

Untuk meningkatkan INP, berbagai strategi hasil diadopsi di CMP PubConsent.

Hasilkan tugas berprioritas tinggi

Metode yieldToMainUiBlocking yang ditampilkan dalam cuplikan kode berikut dirancang untuk mengoptimalkan tugas JavaScript prioritas tinggi dengan menghasilkan scheduler.yield jika tersedia, tetapi melakukan fallback ke postTask dengan prioritas user-blocking (tinggi) jika postTask tersedia, yang akhirnya menghasilkan nol.

setTimeout dihindari di sini karena metode yieldToMainUiBlocking dirancang untuk menangani operasi setelan CMP internal dan pekerjaan prioritas tinggi yang harus mempertahankan prioritas tersebut saat menghasilkan. Hal ini berarti bahwa hanya browser yang menerapkan API penjadwalan ini—yang saat ini hanya tersedia di browser berbasis Chromium pada saat penulisan—yang mendapatkan manfaat dari peningkatan yang dijelaskan dalam studi kasus ini. Meskipun demikian, pendekatan ini dianggap sebagai progressive enhancement yang dapat diterima untuk tugas prioritas tinggi ini.

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

Hasil pada tugas sedang dan latar belakang

Metode yieldToMainBackground yang ditampilkan dalam cuplikan kode berikut digunakan untuk membagi tugas panjang yang memiliki prioritas user-visible (sedang) atau background. Logika ini menerapkan scheduler.yield() jika tersedia, tetapi berbeda dengan menggunakan postTask dengan prioritas sedang, dan akhirnya kembali ke setTimeout di Browser non-Chromium.

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};

Cara PubTech lebih lanjut mengurangi TBT dengan pengoptimalan tata letak rendering

Setelah menerapkan strategi hasil, ditemukan bahwa INP telah meningkat secara signifikan untuk CMP. Bahkan, setelah mengurangi durasi pemrosesan pengendali peristiwa secara signifikan, peluang untuk melakukan peningkatan rendering lebih lanjut untuk penggambaran berikutnya untuk tindakan Tutup UI ditemukan. Tindakan ini awalnya dirancang untuk menghapus elemen dari DOM. Hal ini menimbulkan tantangan, terutama di situs dengan jumlah node DOM yang cukup besar, sehingga menyebabkan peningkatan tugas rendering yang tidak terduga.

Untuk mengatasi peningkatan jumlah pekerjaan rendering yang diperlukan untuk menghapus elemen dari DOM, solusi diperkenalkan yang disebut tim sebagai "de-rendering lambat". Pendekatan ini pertama-tama menerapkan aturan CSS display: none ke dialog izin CMP setelah pengguna memberikan izin untuk menyembunyikannya. Kemudian, penghapusan node DOM yang terkait dengan dialog CMP dialihkan ke waktu berikutnya saat browser tidak ada aktivitas dengan menggunakan requestIdleCallback. Pendekatan ini terbukti jauh lebih cepat daripada menghapus node DOM saat pengguna menutup dialog izin.

Cara PubTech semakin mengurangi INP dengan meningkatkan library TCF IAB

Setelah berhasil menyelesaikan sebagian besar masalah responsivitas CMP, peluang peningkatan lebih lanjut diidentifikasi di salah satu dependensi utamanya: library Transparency and Consent Framework (TCF) IAB.

Komponen yang paling mahal secara komputasi dari library ini adalah "build string" dan "dispatch consent". Komponen ini adalah bagian integral dari library TCF IAB. Pengoptimalan berikut untuk komponen ini diterapkan dalam fork terpisah khusus untuk kebutuhan PubTech:

1. Menggunakan kembali hasil yang dihitung untuk proses decoding, yang dijalankan untuk setiap callback pihak ketiga yang perlu membaca izin pengguna.
2. Menghindari dan mengurangi loop yang tidak perlu dalam proses encoding pembatasan penayang, yang dijalankan saat pengguna memberikan izin.

Pengoptimalan pertama ini mengurangi waktu yang dihabiskan oleh CMP pada setiap callback pihak ketiga yang terhubung ke library TCF IAB. Pengoptimalan kedua mengurangi durasi pemrosesan yang ditimbulkan oleh komponen "build string". Bahkan, pengoptimalan ini memungkinkan pengurangan hingga 60% loop yang dijalankan setiap kali pengguna memberikan izin.

Hasil

Dengan strategi yang dibuat sebelumnya dan pengoptimalan tata letak rendering baru, INP CMP mengalami peningkatan hingga 65%. Akibatnya, responsivitas pengalaman pengguna CMP PubConsent sangat meningkat, dan untuk beberapa iklan, keterlihatan bahkan meningkat sebesar 1,5% dengan mengoptimalkan waktu permintaan iklan.

Selain peningkatan ini, pada library TCF IAB, INP meningkat hingga 77% di perangkat seluler untuk pelanggan yang terpengaruh sebagai hasil dari pengurangan tugas panjang yang disebabkan oleh TCF hingga 85%. Hal ini membantu mengurangi overhead setiap callback pihak ketiga yang dieksekusi selama seluruh siklus proses halaman secara signifikan.

Jumlah origin yang meneruskan INP saat menggunakan CMP PubConsent meningkat lebih dari 400%, dari 13% menjadi 55% di perangkat seluler. Untuk beberapa pelanggan, INP halaman berkurang lebih dari setengahnya—dari 470 milidetik menjadi 230 milidetik—karena pengoptimalan PubTech SDK yang dilakukan.

Kesimpulan

Pelanggan PubTech dengan cepat mengenali performa INP yang positif dan hasil metrik bisnis yang dihasilkan dari upaya pengoptimalan kami. Peningkatan performa lebih lanjut untuk CMP PubConsent sedang dipertimbangkan, dengan memanfaatkan data Real User Monitoring (RUM) yang sangat berharga dari pelanggan mereka. Data ini melacak regresi dan kemajuan dengan cermat, sehingga mendorong upaya peningkatan berkelanjutan PubTech.

Sebagai pihak ketiga, PubTech juga menyadari bahwa mereka memiliki peluang untuk meningkatkan performa web dalam skala besar dan memberikan responsivitas yang lebih baik, sekaligus menghindari dampak negatif pada KPI bisnis. Tidak ada kata terlambat untuk mulai menerapkan peningkatan seperti ini.

Terima kasih khusus kepada Luca Coppola, CTO PubTech, yang mendukung pekerjaan inovasi ini, serta kepada Jeremy Wagner, Michal Mocny, dan Rick Viscomi dari Google.