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 atas penggunaan cookie dan teknologi pelacakan. Selain tujuan utama untuk memastikan kepatuhan hukum, CMP, sebagai skrip pihak ketiga, juga harus memastikan dampak minimal terhadap performa dan pengalaman pengguna.

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

Pengenalan metrik Interaction to Next Paint (INP) memungkinkan PubTech menemukan masalah terkait responsivitas CMP kami. Dalam studi kasus ini, PubTech menunjukkan cara mereka menyelesaikan masalah terkait responsivitas di platform CMP PubConsent, dan cara mereka meningkatkan INP sebelum menjadi salah satu Core Web Vitals pada Maret 2024, yang menunjukkan komitmen yang teguh 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. Mengurangi dampak performa dari penawaran CMP kami—termasuk pada tingkat respons—sangat penting untuk menjamin keberhasilan integrasi CMP.

Dengan memprioritaskan performa dan menjaga agar skrip CMP PubConsent tetap ringan, pemilik situs dapat mencapai keseimbangan yang tepat antara menerapkan fungsi Pengelolaan Izin yang berharga sekaligus menjaga 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 panjang yang dapat diatribusikan ke produk CMP.
3. Mengurangi Total Waktu Pemblokiran (TBT), yang dapat memberikan dampak 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 menentukan masalah tertentu yang memengaruhi responsivitas halaman. Misalnya, interaksi klik dalam produk CMP untuk menyetujui semua cookie lalu menutup dialog izin cookie menyebabkan tugas panjang yang menunda update 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 di arsitektur CMP PubConsent. Oleh karena itu, peningkatan yang dijelaskan dalam studi kasus ini memengaruhi serangkaian interaksi pengguna dalam produk CMP.

Keterlambatan ini menyebabkan persepsi visual panel berada dalam status terkunci selama pelaksanaan tugas. Karena memblokir update rendering selama jangka waktu yang terlihat lama, INP halaman terkena dampak negatif.

Cara PubTech mengoptimalkan INP untuk tombol dan link

Untuk meningkatkan INP, berbagai strategi hasil digunakan 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, sehingga akhirnya beralih kembali ke tidak ada.

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 ini—mendapatkan manfaat dari peningkatan yang dijelaskan dalam studi kasus ini. Meski begitu, pendekatan ini dianggap sebagai {i>progressive enhancement<i} yang dapat diterima untuk tugas-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 memecah 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 pada 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 semakin 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 didesain untuk menghapus elemen dari DOM. Hal ini menimbulkan tantangan, terutama di situs yang memiliki banyak node DOM, yang mengakibatkan peningkatan yang tidak terduga dalam tugas rendering.

Untuk mengatasi peningkatan jumlah pekerjaan rendering yang diperlukan untuk menghapus elemen dari DOM, sebuah solusi diperkenalkan yang disebut "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 dalam salah satu dependensi utamanya: library Transparency and Consent Framework (TCF) IAB.

Komponen yang paling mahal secara komputasi dari library ini adalah "string build" dan "izin akses pengiriman". Komponen ini merupakan 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 "string build" komponen. Faktanya, pengoptimalan ini memungkinkan pengurangan hingga 60% loop yang dijalankan setiap kali pengguna menyatakan izin.

Hasil

Dengan menerapkan strategi yang dibuat sebelumnya dan pengoptimalan tata letak rendering baru, INP CMP mengalami peningkatan hingga 65%. Hasilnya, responsivitas pengalaman pengguna CMP PubConsent meningkat secara signifikan, dan untuk beberapa iklan, visibilitasnya bahkan meningkat sebesar 1,5% dengan melakukan pengoptimalan saat iklan diminta.

Selain peningkatan ini, pada library TCF IAB, kami mengamati bahwa 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 secara signifikan setiap callback pihak ketiga yang dijalankan selama seluruh siklus proses halaman.

Jumlah origin yang lulus 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 dapat dengan cepat mengenali performa INP positif dan hasil metrik bisnis yang dihasilkan dari upaya pengoptimalan kami. Peningkatan performa lebih lanjut untuk CMP PubConsent sedang dipertimbangkan, sehingga memanfaatkan data Pemantauan Pengguna Nyata (RUM) yang sangat berharga dari pelanggan mereka. Data ini melacak dengan cermat regresi dan kemajuan, yang 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 banyak kepada Luca Coppola, CTO PubTech untuk mendukung upaya inovasi ini, serta kepada Jeremy Wagner, Michal Mocny, dan Rick Viscomi dari Google.