Praktik terbaik untuk pemberitahuan cookie

Optimalkan pemberitahuan cookie untuk performa dan kegunaan.

Dokumen ini membahas bagaimana pemberitahuan cookie dapat memengaruhi performa, pengukuran performa, dan pengalaman pengguna.

Performa

Pemberitahuan cookie dapat berdampak signifikan pada performa halaman karena notifikasi tersebut biasanya dimuat lebih awal dalam proses pemuatan halaman, ditampilkan kepada semua pengguna, dan berpotensi memengaruhi pemuatan iklan dan konten halaman lainnya.

Berikut cara pemberitahuan cookie dapat memengaruhi metrik Data Web:

• Largest Contentful Paint (LCP): Sebagian besar pemberitahuan izin cookie berukuran cukup kecil, sehingga biasanya tidak berisi elemen LCP halaman. Namun, hal ini dapat terjadi—terutama di perangkat seluler. Di perangkat seluler, pemberitahuan cookie biasanya memenuhi sebagian besar layar. Hal ini biasanya terjadi saat pemberitahuan cookie berisi blok teks besar (blok teks juga dapat menjadi elemen LCP).

• Interaction to Next Paint (INP): Pemberitahuan cookie sering kali dapat menjadi penyebab INP tinggi karena biasanya menambahkan banyak skrip pihak ketiga saat diterima. Masalah utamanya sering kali adalah melakukan interaksi Accept karena mengakibatkan banyak pemrosesan untuk menambahkan skrip pihak ketiga tersebut sekaligus. Lihat bagian Praktik Terbaik di bawah tentang cara memitigasi hal ini.

• Pergeseran Tata Letak Kumulatif (CLS): Pemberitahuan izin cookie adalah sumber pergeseran tata letak yang sangat umum.

Secara umum, notifikasi cookie dari penyedia pihak ketiga akan memiliki dampak yang lebih besar pada performa daripada pemberitahuan cookie yang Anda build sendiri. Ini bukanlah masalah khusus pemberitahuan cookie, melainkan sifat skrip pihak ketiga secara umum.

Praktik terbaik

Praktik terbaik di bagian ini berfokus pada pemberitahuan cookie pihak ketiga. Beberapa, tetapi tidak semua, praktik terbaik ini juga akan berlaku untuk pemberitahuan cookie pihak pertama.

Memahami dampak INP dari pemberitahuan cookie

Seperti yang disebutkan sebelumnya, tombol Setuju sering kali menjadi penyebab khusus masalah INP karena banyaknya pemrosesan yang terjadi saat diklik.

Tim Chrome telah bekerja sama dengan sejumlah Platform Pengelolaan Izin (CMP) untuk memberikan hasil setelah mengklik setuju agar browser dapat mengonfirmasi penerimaan tersebut dengan cepat pada gambar berikutnya. Lihat studi kasus PubTech ini sebagai contoh.

Jika CMP Anda terpengaruh oleh hal ini, coba hubungi mereka untuk mencari tahu apakah mereka juga dapat menghindari masalah INP untuk situs yang menyematkannya. Lihat artikel Mengoptimalkan Tugas Panjang untuk mendapatkan panduan tentang taktik menghasilkan.

Memuat skrip pemberitahuan cookie secara asinkron

Skrip pemberitahuan cookie harus dimuat secara asinkron. Untuk melakukannya, tambahkan atribut async ke tag skrip.

<script src="https://cookie-notice.com/script.js" async>

Skrip yang tidak asinkron akan memblokir parser browser. Hal ini akan menunda pemuatan halaman dan LCP. Untuk informasi selengkapnya, lihat Memuat JavaScript pihak ketiga secara efisien.

Memuat skrip pemberitahuan cookie secara langsung

Skrip pemberitahuan cookie harus dimuat "secara langsung" dengan menempatkan tag skrip di HTML dokumen utama, bukan dimuat oleh tag manager atau skrip lainnya. Penggunaan tag manager atau skrip sekunder untuk memasukkan skrip pemberitahuan cookie akan menunda pemuatan skrip pemberitahuan cookie: mengaburkan skrip dari parser Lookahead browser dan mencegah skrip dimuat sebelum eksekusi JavaScript.

Membuat koneksi awal dengan asal notifikasi cookie

Semua situs yang memuat skrip pemberitahuan cookie mereka dari lokasi pihak ketiga harus menggunakan petunjuk resource dns-prefetch atau preconnect untuk membantu membangun koneksi awal dengan origin yang menghosting resource pemberitahuan cookie. Untuk mengetahui informasi selengkapnya, lihat Membuat koneksi jaringan lebih awal untuk meningkatkan kecepatan halaman yang dirasakan.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Pramuat pemberitahuan cookie yang sesuai

Beberapa situs akan mendapatkan manfaat dari penggunaan petunjuk resource preload untuk memuat skrip pemberitahuan cookie mereka. Petunjuk resource preload memberi tahu browser agar memulai permintaan awal untuk resource yang ditentukan.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

preload akan berfungsi optimal jika penggunaannya terbatas untuk mengambil beberapa resource kunci per halaman. Dengan demikian, kegunaan pramuat skrip pemberitahuan cookie akan bervariasi bergantung pada situasinya.

Waspadai kompromi performa saat menata gaya pemberitahuan cookie

Penyesuaian tampilan dan nuansa pemberitahuan cookie pihak ketiga dapat menimbulkan biaya performa tambahan. Misalnya, pemberitahuan cookie pihak ketiga tidak selalu dapat menggunakan kembali resource yang sama (misalnya, font web) yang digunakan di tempat lain di halaman tersebut. Selain itu, pemberitahuan cookie pihak ketiga cenderung memuat gaya di akhir rantai permintaan yang panjang. Untuk menghindari hal yang tidak diinginkan, perhatikan cara pemuatan pemberitahuan cookie dan menerapkan gaya serta resource terkait.

Menghindari pergeseran tata letak

Berikut adalah beberapa masalah pergeseran tata letak paling umum yang terkait dengan pemberitahuan cookie:

• Pemberitahuan cookie bagian atas layar: Pemberitahuan cookie bagian atas layar merupakan sumber yang sangat umum pergeseran tata letak. Jika pemberitahuan cookie disisipkan ke dalam DOM setelah halaman di sekitarnya dirender, elemen halaman di bawahnya akan didorong ke bagian bawah halaman. Jenis pergeseran tata letak ini dapat dihilangkan dengan mereservasi ruang di DOM untuk pemberitahuan izin. Jika ini bukan solusi yang memungkinkan—misalnya, jika dimensi pemberitahuan cookie bervariasi berdasarkan lokasi geografis, sebaiknya gunakan footer atau modal melekat untuk menampilkan pemberitahuan cookie. Karena kedua pendekatan alternatif ini menampilkan pemberitahuan cookie sebagai "overlay" di bagian atas halaman lainnya, pemberitahuan cookie tidak boleh menyebabkan perubahan konten saat dimuat.
• Animasi: Banyak pemberitahuan cookie menggunakan animasi—misalnya, pemberitahuan cookie "sliding in" adalah pola desain yang umum. Tergantung cara penerapannya, efek ini dapat menyebabkan pergeseran tata letak. Untuk mengetahui informasi selengkapnya, lihat Men-debug pergeseran tata letak.
• Font: Font yang dimuat terlambat dapat memblokir render dan atau menyebabkan pergeseran tata letak. Fenomena ini lebih jelas pada koneksi yang lambat.

Pengoptimalan pemuatan lanjutan

Teknik ini memerlukan lebih banyak upaya untuk diterapkan, tetapi dapat lebih mengoptimalkan pemuatan skrip pemberitahuan cookie:

• Menyimpan skrip pemberitahuan cookie pihak ketiga dari server Anda ke dalam cache dan menyalurkannya dapat meningkatkan kecepatan pengiriman resource ini.
• Dengan menggunakan pekerja layanan, Anda dapat memiliki kontrol yang lebih besar atas pengambilan dan penyimpanan skrip pihak ketiga ke dalam cache, seperti skrip pemberitahuan cookie.

Pengukuran performa

Pemberitahuan cookie dapat memengaruhi pengukuran performa. Bagian ini membahas beberapa implikasi dan teknik tersebut untuk memitigasinya.

Pemantauan Pengguna Nyata (RUM)

Beberapa alat analisis dan RUM menggunakan cookie untuk mengumpulkan data performa. Jika pengguna menolak penggunaan cookie, alat ini tidak dapat mengambil data performa.

Situs harus menyadari fenomena ini; ada baiknya juga untuk memahami mekanisme yang digunakan alat RUM untuk mengumpulkan datanya. Namun, untuk situs standar, perbedaan ini mungkin bukanlah penyebab kekhawatiran mengingat arah dan besarnya penyimpangan data. Penggunaan cookie bukanlah persyaratan teknis untuk pengukuran performa. Library JavaScript web-vitals adalah contoh library yang tidak menggunakan cookie.

Bergantung pada cara situs Anda menggunakan cookie untuk mengumpulkan data performa (yaitu, apakah cookie berisi informasi pribadi), dan juga undang-undang yang dimaksud, penggunaan cookie untuk pengukuran performa mungkin tidak tunduk pada persyaratan legislatif yang sama dengan beberapa cookie yang digunakan di situs Anda untuk tujuan lain—misalnya, cookie iklan. Beberapa situs memilih untuk mengelompokkan cookie performa sebagai kategori cookie terpisah saat meminta izin pengguna.

Pemantauan sintetis

Tanpa konfigurasi kustom, sebagian besar alat sintetis (seperti Lighthouse dan WebPageTest) hanya akan mengukur pengalaman pengguna pertama kali yang belum merespons pemberitahuan izin cookie. Namun, tidak hanya variasi status cache (misalnya, kunjungan awal versus kunjungan berulang) yang perlu dipertimbangkan saat mengumpulkan data performa, melainkan juga variasi dalam status penerimaan cookie—diterima, ditolak, atau tidak direspons.

Menguji pemberitahuan cookie dengan WebPageTest

Bagian berikut membahas setelan WebPageTest dan Lighthouse yang dapat berguna untuk menerapkan pemberitahuan cookie ke dalam alur kerja pengukuran performa. Namun, notifikasi cookie dan cookie hanyalah salah satu dari banyak faktor yang mungkin sulit untuk disimulasikan secara sempurna di lingkungan lab. Oleh karena itu, penting untuk menjadikan data RUM sebagai landasan tolok ukur performa Anda, bukan alat sintetis.

Menggunakan skrip

Anda dapat menggunakan pembuatan skrip agar WebPageTest "mengklik" banner izin cookie saat mengumpulkan trace.

Tambahkan skrip dengan membuka tab Script. Skrip berikut membuka URL yang akan diuji, lalu mengklik elemen DOM dengan id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Saat menggunakan skrip ini, perhatikan bahwa:

• combineSteps memberi tahu WebPageTest untuk "menggabungkan" hasil langkah pembuatan skrip yang diikuti menjadi satu kumpulan rekaman aktivitas dan pengukuran. Menjalankan skrip ini tanpa combineSteps juga dapat berguna—pelacakan terpisah akan mempermudah untuk melihat apakah resource dimuat sebelum atau setelah penerimaan cookie.
• %URL% adalah konvensi WebPageTest yang mengacu pada URL yang sedang diuji.
• clickAndWait memberi tahu WebPageTest untuk mengklik elemen yang ditunjukkan oleh attribute=value dan menunggu hingga aktivitas browser berikutnya selesai. Formatnya mengikuti format clickAndWait attribute=Value.

Jika Anda telah mengonfigurasi skrip ini dengan benar, screenshot yang diambil oleh WebPageTest tidak boleh menampilkan pemberitahuan cookie (pemberitahuan cookie telah diterima).

Untuk mengetahui informasi selengkapnya tentang pembuatan skrip WebPageTest, lihat dokumentasi WebPageTest.

Setel cookie

Untuk menjalankan WebPageTest dengan kumpulan cookie, buka tab Lanjutan dan tambahkan header cookie ke kolom Header kustom:

Mengubah lokasi pengujian

Untuk mengubah lokasi pengujian yang digunakan oleh WebPageTest, klik drop-down Lokasi Pengujian yang terletak di tab Pengujian Lanjutan.

Menguji pemberitahuan cookie dengan Lighthouse

Menetapkan cookie saat menjalankan Lighthouse dapat berfungsi sebagai mekanisme untuk memindahkan halaman ke dalam status tertentu untuk diuji oleh Lighthouse. Perilaku cookie Lighthouse sedikit bervariasi berdasarkan konteks (DevTools, CLI, atau PageSpeed Insights).

DevTools

Cookie tidak dihapus saat Lighthouse dijalankan dari DevTools. Namun, jenis penyimpanan lainnya dihapus secara default. Perilaku ini dapat diubah menggunakan opsi Clear Storage di panel setelan Lighthouse.

CLI

Menjalankan Lighthouse dari CLI akan menggunakan instance Chrome baru, sehingga tidak ada cookie yang ditetapkan secara default. Untuk menjalankan Lighthouse dari CLI dengan kumpulan cookie tertentu, gunakan perintah berikut:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Untuk mengetahui informasi lebih lanjut terkait cara menyetel header permintaan kustom di CLI Lighthouse, baca Menjalankan Lighthouse di Halaman yang Diautentikasi.

PageSpeed Insights

Menjalankan Lighthouse dari PageSpeed Insights menggunakan instance Chrome baru dan tidak menetapkan cookie apa pun. PageSeed Insights tidak dapat dikonfigurasi untuk menetapkan cookie tertentu.

Pengalaman pengguna

Pengalaman pengguna (UX) dari pemberitahuan izin cookie yang berbeda pada dasarnya merupakan hasil dari dua keputusan: lokasi pemberitahuan cookie di dalam halaman dan sejauh mana pengguna dapat menyesuaikan penggunaan cookie di situs. Bagian ini membahas pendekatan potensial terhadap dua keputusan tersebut.

Saat mempertimbangkan desain potensial untuk pemberitahuan cookie Anda, berikut beberapa hal yang perlu dipikirkan:

• UX: Apakah ini pengalaman pengguna yang baik? Bagaimana desain khusus ini akan memengaruhi elemen halaman dan alur pengguna yang ada?
• Bisnis: Apa strategi cookie situs Anda? Apa sasaran Anda untuk pemberitahuan cookie?
• Hukum: Apakah produk ini mematuhi persyaratan hukum?
• Engineering: Berapa banyak pekerjaan yang harus diimplementasikan dan dipelihara? Seberapa sulitkah untuk mengubahnya?

Penempatan

Pemberitahuan cookie dapat ditampilkan sebagai header, elemen inline, atau footer. Iklan ini juga dapat ditampilkan di atas konten halaman menggunakan modal atau berfungsi sebagai interstisial.

Pemberitahuan cookie header, footer, dan inline

Pemberitahuan cookie biasanya ditempatkan di header atau footer. Dari kedua opsi tersebut, penempatan footer umumnya lebih disarankan karena tidak mengganggu, tidak bersaing mendapatkan perhatian dengan iklan banner atau notifikasi, dan biasanya tidak menyebabkan CLS. Kebijakan privasi dan persyaratan penggunaan juga sering digunakan.

Meskipun pemberitahuan cookie inline bisa jadi sulit diintegrasikan dengan antarmuka pengguna yang sudah ada, hal ini jarang dilakukan.

Jendela bantuan

Modal adalah pemberitahuan izin cookie yang ditampilkan di bagian atas konten halaman. Tampilan dan performa modal dapat sangat berbeda bergantung pada ukurannya.

Modal layar parsial yang lebih kecil dapat menjadi alternatif yang baik untuk situs yang berupaya menerapkan pemberitahuan cookie dengan cara yang tidak menyebabkan perubahan tata letak.

Di sisi lain, modal besar yang mengaburkan sebagian besar konten halaman harus digunakan dengan hati-hati. Secara khusus, situs yang lebih kecil mungkin mendapati bahwa pengguna terpantul daripada menerima pemberitahuan cookie situs asing dengan konten yang dikaburkan. Meskipun keduanya bukan konsep yang sama, jika Anda mempertimbangkan untuk menggunakan modal izin cookie layar penuh, Anda harus mengetahui legislasi tentang penghalang cookie.

Kemampuan konfigurasi

Antarmuka pemberitahuan cookie memberi pengguna berbagai tingkat kontrol atas cookie mana yang mereka terima.

Tidak ada kemampuan konfigurasi

Banner cookie bergaya pemberitahuan ini tidak memberi pengguna kontrol UX langsung untuk memilih tidak ikut cookie. Sebagai gantinya, biasanya cookie akan menyertakan link ke kebijakan cookie situs yang dapat memberi pengguna informasi tentang cara mengelola cookie menggunakan browser web. Pemberitahuan ini biasanya menyertakan tombol "Tutup" dan "Terima".

Beberapa kemampuan konfigurasi

Pemberitahuan cookie ini memberi pengguna opsi untuk menolak cookie, tetapi tidak mendukung kontrol yang lebih terperinci. Pendekatan terhadap pemberitahuan cookie ini kurang umum.

Kemampuan konfigurasi penuh

Pemberitahuan cookie ini memberi pengguna kontrol yang lebih terperinci untuk mengonfigurasi penggunaan cookie yang mereka terima.

• UX: Kontrol untuk mengonfigurasi penggunaan cookie paling sering ditampilkan menggunakan modal terpisah yang diluncurkan saat pengguna merespons pemberitahuan izin cookie awal. Namun, jika ruangnya memungkinkan, beberapa situs akan menampilkan kontrol ini secara inline dalam pemberitahuan izin cookie awal.

• Perincian: Pendekatan yang paling umum untuk kemampuan konfigurasi cookie adalah mengizinkan pengguna mengaktifkan cookie menurut "kategori" cookie. Contoh kategori cookie yang umum meliputi cookie fungsional, penargetan, dan media sosial.

  Namun, beberapa situs akan selangkah lebih maju dan mengizinkan pengguna untuk memilih ikut serta berbasis per cookie. Atau, cara lain untuk memberikan kontrol yang lebih spesifik kepada pengguna adalah dengan mengelompokkan kategori cookie seperti "iklan" ke dalam kasus penggunaan tertentu, misalnya, memungkinkan pengguna memilih untuk ikut serta secara terpisah pada "iklan dasar" dan "iklan yang dipersonalisasi".