Praktik terbaik untuk pemberitahuan cookie

Optimalkan pemberitahuan cookie untuk performa dan kegunaan.

Katie Hempenius

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

Performa

Pemberitahuan cookie dapat memiliki dampak yang signifikan terhadap performa halaman karena pemberitahuan cookie biasanya dimuat di awal proses pemuatan halaman, ditampilkan kepada semua pengguna, serta berpotensi memengaruhi pemuatan iklan dan konten halaman lainnya.

Berikut pengaruh pemberitahuan cookie terhadap metrik Data Web:

• Largest Contentful Paint (LCP): Sebagian besar pemberitahuan izin cookie cukup kecil, sehingga biasanya tidak berisi elemen LCP halaman. Namun, hal ini dapat terjadi—terutama di perangkat seluler. Pada perangkat seluler, pemberitahuan cookie biasanya menempati bagian layar yang lebih besar. Hal ini biasanya terjadi saat notifikasi cookie berisi blok teks yang besar (blok teks juga dapat berupa elemen LCP).

• Penundaan Input Pertama (FID): Secara umum, solusi izin cookie Anda sendiri seharusnya memiliki dampak minimal terhadap FID—izin cookie memerlukan sedikit eksekusi JavaScript. Namun, teknologi yang diaktifkan cookie ini—yaitu skrip iklan dan pelacakan—mungkin memiliki dampak yang signifikan terhadap interaktivitas halaman. Menunda skrip ini hingga penerimaan cookie dapat berfungsi sebagai teknik untuk mengurangi Penundaan Input Pertama (FID).

• 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 terhadap performa daripada pemberitahuan cookie yang Anda buat sendiri. Masalah ini tidak hanya terjadi pada 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.

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. Tindakan ini akan menunda pemuatan halaman dan LCP. Untuk mengetahui informasi selengkapnya, lihat Memuat JavaScript pihak ketiga secara efisien.

Catatan: Jika Anda harus menggunakan skrip sinkron (misalnya, beberapa pemberitahuan cookie mengandalkan skrip sinkron untuk menerapkan pemblokiran cookie), Anda harus memastikan bahwa permintaan ini dimuat secepat mungkin. Salah satu cara untuk melakukannya adalah dengan menggunakan petunjuk resource.

Memuat skrip pemberitahuan cookie secara langsung

Skrip pemberitahuan cookie harus dimuat "secara langsung" dengan menempatkan tag skrip dalam 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: hal ini akan mengaburkan skrip dari parser tampilan browser browser dan mencegah skrip dimuat sebelum eksekusi JavaScript.

Buat koneksi awal dengan asal pemberitahuan cookie

Semua situs yang memuat skrip pemberitahuan cookie mereka dari lokasi pihak ketiga harus menggunakan petunjuk resource dns-prefetch atau preconnect untuk membantu menyambung 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/">

Catatan: Biasanya pemberitahuan cookie memuat resource dari beberapa asal— misalnya, memuat resource dari www.cookie-notice.com dan cdn.cookie-notice.com. Asal yang terpisah memerlukan koneksi terpisah, sehingga petunjuk resource terpisah.

Pramuat pemberitahuan cookie sebagaimana mestinya

Beberapa situs akan mendapatkan manfaat jika menggunakan 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 berfungsi paling efektif jika penggunaannya dibatasi untuk mengambil beberapa resource utama 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 pada halaman. Selain itu, pemberitahuan cookie pihak ketiga cenderung memuat gaya di akhir rantai permintaan yang panjang. Untuk menghindari hal yang tidak diinginkan, perhatikan cara notifikasi cookie dimuat 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 adalah sumber pergeseran tata letak yang sangat umum. Jika pemberitahuan cookie dimasukkan ke dalam DOM setelah halaman sekitarnya dirender, pemberitahuan cookie akan mendorong elemen halaman di bawahnya ke bagian bawah halaman. Jenis pergeseran tata letak ini dapat dihapus dengan mereservasi ruang di DOM untuk notifikasi izin. Jika ini bukan solusi yang memungkinkan—misalnya, jika dimensi pemberitahuan cookie Anda bervariasi menurut geografi, sebaiknya gunakan footer atau modal melekat untuk menampilkan pemberitahuan cookie. Karena kedua pendekatan alternatif ini menampilkan pemberitahuan cookie sebagai "overlay" di atas halaman lainnya, pemberitahuan cookie tidak boleh menyebabkan perubahan konten saat dimuat.
• Animasi: Banyak pemberitahuan cookie menggunakan animasi—misalnya, "menggeser" pemberitahuan cookie adalah pola desain umum. Bergantung pada cara efek ini diterapkan, efek tersebut dapat menyebabkan pergeseran tata letak. Untuk informasi selengkapnya, lihat Men-debug pergeseran tata letak.
• Font: Font yang lambat dimuat dapat memblokir perenderan dan atau menyebabkan pergeseran tata letak. Fenomena ini lebih terlihat 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 ke dalam cache dan menayangkan skrip pemberitahuan cookie pihak ketiga dari server Anda sendiri dapat meningkatkan kecepatan pengiriman resource tersebut.
• Dengan menggunakan pekerja layanan, Anda dapat lebih mengontrol pengambilan dan penyimpanan skrip pihak ketiga seperti skrip pemberitahuan cookie.

Pengukuran performa

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

Pemantauan Pengguna Asli (RUM)

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

Situs harus menyadari fenomena ini. Selain itu, sebaiknya pahami juga mekanisme yang digunakan alat RUM Anda untuk mengumpulkan datanya. Namun, untuk situs standar, perbedaan ini mungkin bukan penyebab alarm mengingat arah dan besarnya kemiringan data. Penggunaan cookie bukan merupakan 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 atau tidak), serta perundang-undangan yang bersangkutan, penggunaan cookie untuk pengukuran performa mungkin tidak tunduk pada persyaratan legislatif yang sama seperti 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, variasi status cache (misalnya, kunjungan awal versus kunjungan berulang) tidak hanya perlu dipertimbangkan saat mengumpulkan data performa, tetapi juga variasi status penerimaan cookie—diterima, ditolak, atau tidak direspons.

Bagian berikut membahas setelan WebPageTest dan Lighthouse yang dapat berguna untuk menyertakan pemberitahuan cookie ke dalam alur kerja pengukuran performa. Namun, cookie dan pemberitahuan cookie hanyalah salah satu dari banyak faktor yang mungkin sulit disimulasikan dengan sempurna di lingkungan lab. Karena alasan ini, penting untuk menjadikan data RUM sebagai landasan benchmark performa Anda, bukan alat sintetis.

Menguji pemberitahuan cookie dengan WebPageTest

Pembuatan Naskah

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

Tambahkan skrip dengan membuka tab Script. Skrip di bawah akan membuka URL yang akan diuji, lalu mengklik elemen DOM dengan ID cookieButton.

Perhatian: Skrip WebPageTest dibatasi tab.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Saat menggunakan skrip ini, perhatikan bahwa:

• combineSteps memberi tahu WebPageTest untuk "menggabungkan" hasil dari langkah-langkah pembuatan skrip yang mengikuti satu kumpulan pelacakan dan pengukuran. Menjalankan skrip ini tanpa combineSteps juga dapat berguna. Rekaman aktivitas terpisah memudahkan 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 aktivitas browser berikutnya selesai. Ini mengikuti format clickAndWait attribute=Value.

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

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

Setel cookie

Untuk menjalankan WebPageTest dengan cookie yang ditetapkan, buka tab Advanced dan tambahkan header cookie ke kolom Header kustom:

Mengubah lokasi pengujian

Untuk mengubah lokasi pengujian yang digunakan oleh WebPageTest, klik dropdown Test Location yang terletak di tab Advanced Testing.

Menguji pemberitahuan cookie dengan Lighthouse

Menetapkan cookie pada saat Lighthouse dijalankan dapat berfungsi sebagai mekanisme untuk membuat halaman menjadi status tertentu untuk pengujian oleh Lighthouse. Perilaku cookie Lighthouse sedikit berbeda berdasarkan konteks (DevTools, CLI, atau PageSpeed Insights).

DevTools

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

CLI

Menjalankan Lighthouse dari CLI 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 selengkapnya tentang cara menyetel header permintaan kustom di CLI Lighthouse, lihat Menjalankan Lighthouse pada 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 berbagai pemberitahuan izin cookie pada dasarnya merupakan hasil dari dua keputusan: lokasi pemberitahuan cookie di dalam halaman dan sejauh mana pengguna dapat menyesuaikan penggunaan cookie situs. Bagian ini membahas pendekatan potensial untuk kedua keputusan tersebut.

Perhatian: UX pemberitahuan cookie sering kali sangat dipengaruhi oleh legislasi yang dapat sangat bervariasi di setiap area geografis. Dengan demikian, beberapa pola desain yang dibahas dalam bagian ini mungkin tidak relevan dengan situasi khusus Anda. Artikel ini tidak boleh dianggap sebagai pengganti nasihat hukum.

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

• UX: Apakah ini pengalaman pengguna yang baik? Bagaimana desain tertentu ini akan mempengaruhi elemen halaman yang ada dan alur pengguna?
• Bisnis: Apa strategi cookie situs Anda? Apa sasaran Anda untuk notifikasi cookie?
• Hukum: Apakah ini mematuhi persyaratan hukum?
• Rekayasa: Berapa banyak pekerjaan yang perlu dilakukan untuk menerapkan dan memeliharanya? Seberapa sulit untuk mengubahnya?

Penempatan

Pemberitahuan cookie dapat ditampilkan sebagai header, elemen inline, atau footer. Iklan ini juga dapat ditampilkan di bagian 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 disukai karena tidak mengganggu, tidak bersaing mendapatkan perhatian dengan iklan banner atau notifikasi, dan biasanya tidak menyebabkan CLS. Selain itu, ini adalah tempat yang umum untuk menempatkan kebijakan privasi dan persyaratan penggunaan.

Meskipun pemberitahuan cookie inline merupakan salah satu opsi, pemberitahuan ini bisa jadi sulit diintegrasikan ke dalam antarmuka pengguna yang sudah ada, sehingga jarang dilakukan.

Jendela bantuan

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

Modal layar parsial yang lebih kecil dapat menjadi alternatif yang baik bagi situs yang bermasalah dalam menerapkan pemberitahuan cookie tanpa 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, bukan menerima pemberitahuan cookie dari situs yang tidak dikenal dengan konten yang dikaburkan. Meskipun keduanya belum tentu merupakan konsep yang identik, jika Anda mempertimbangkan untuk menggunakan modal izin cookie layar penuh, Anda harus mengetahui legislasi terkait penghalang cookie.

Catatan: Modal besar dapat dianggap sebagai jenis interstisial. Google Penelusuran tidak menghukum penggunaan interstisial jika digunakan untuk mematuhi peraturan hukum seperti dalam kasus banner cookie. Namun, penggunaan interstisial dalam konteks lain—terutama jika mengganggu atau menciptakan pengalaman pengguna yang buruk—dapat dikenai sanksi.

Dapat dikonfigurasi

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

Tidak ada kemampuan konfigurasi

Banner cookie bergaya pemberitahuan ini tidak memberikan kontrol UX langsung kepada pengguna untuk memilih tidak ikut menggunakan cookie. Namun, cookie tersebut biasanya menyertakan link ke kebijakan cookie situs yang dapat memberi informasi kepada pengguna tentang cara mengelola cookie menggunakan browser web mereka. Pemberitahuan ini biasanya menyertakan tombol "tutup" dan/atau "Terima".

Beberapa kemampuan konfigurasi

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

Kemampuan konfigurasi penuh

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

• UX: Kontrol untuk mengonfigurasi penggunaan cookie biasanya ditampilkan menggunakan modal terpisah yang diluncurkan saat pengguna merespons pemberitahuan izin cookie awal. Namun, jika ruang memungkinkan, beberapa situs akan menampilkan kontrol ini sebagai bagian dari pemberitahuan izin cookie awal.

• Perincian: Pendekatan yang paling umum untuk konfigurasi cookie adalah mengizinkan pengguna memilih ikut serta dalam cookie menurut "kategori" cookie. Contoh kategori cookie yang umum mencakup cookie fungsional, penargetan, dan media sosial.

  Namun, beberapa situs akan selangkah lebih maju dan memungkinkan pengguna memilih ikut serta 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 ikut serta secara terpisah untuk mengaktifkan "iklan dasar" dan "iklan yang dipersonalisasi".