Çerez bildirimleri için en iyi uygulamalar

Performans ve kullanılabilirlik açısından çerez bildirimlerini optimize edin.

Bu belgede, çerez bildirimlerinin performansı, performans ölçümünü ve kullanıcı deneyimini nasıl etkileyebileceği açıklanmaktadır.

Performans

Çerez bildirimleri, genellikle sayfa yükleme sürecinin erken bir aşamasında yüklenir, tüm kullanıcılara gösterilir ve reklamlar ile diğer sayfa içeriklerinin yüklenmesini potansiyel olarak etkileyebildiğinden sayfa performansı üzerinde önemli bir etkiye sahip olabilir.

Çerez bildirimlerinin Web Vitals metriklerini nasıl etkileyebileceği aşağıda açıklanmıştır:

• Largest Contentful Paint (LCP): Çoğu çerez izni bildirimi oldukça küçüktür ve bu nedenle genellikle bir sayfanın LCP öğesini içermez. Ancak bu durum özellikle mobil cihazlarda yaşanabilir. Mobil cihazlarda, bir çerez bildirimi genellikle ekranın daha büyük bir kısmını kaplar. Bu durum genellikle bir çerez bildirimi büyük bir metin bloğu içerdiğinde ortaya çıkar (metin blokları da LCP öğeleri olabilir).

• Sonraki Boyamayla Etkileşim (INP): Kabul edildiğinde çok sayıda üçüncü taraf komut dosyası ekleyen çerez bildirimleri, çoğu zaman yüksek INP'ye yol açabilir. Temel sorun genellikle Kabul Et etkileşiminin yapılmasıdır. Bu etkileşim, bu üçüncü taraf komut dosyalarının hepsini aynı anda eklemek için çok fazla işlem yapılmasına neden olur. Bu sorunun nasıl azaltılacağını öğrenmek için aşağıdaki En İyi Uygulamalar bölümünü inceleyin.

• Cumulative Layout Shift (CLS): Çerez izni bildirimleri, düzen kaymalarının çok yaygın bir kaynağıdır.

Genel anlamda, üçüncü taraf sağlayıcılardan gelen çerez bildirimlerinin, kendi oluşturduğunuz çerez bildirimlerinden daha fazla performansa sahip olmasını bekleyebilirsiniz. Bu, çerez bildirimlerine özgü bir sorun değil, genel olarak üçüncü taraf komut dosyalarının doğasıyla ilgilidir.

En iyi uygulamalar

Bu bölümdeki en iyi uygulamalar, üçüncü taraf çerez bildirimlerine odaklanmıştır. Bu en iyi uygulamaların tümü olmasa da bazıları birinci taraf çerez bildirimleri için de geçerlidir.

Çerez bildirimlerinin INP etkisini anlama

Daha önce de belirtildiği gibi, Kabul Et düğmesi tıklandığında gerçekleşen büyük işleme miktarından dolayı genellikle INP sorunlarının belirli bir nedeni vardır.

Chrome ekibi, tarayıcının bir sonraki boyamada kabulü hızlı bir şekilde onaylaması için Kabul et'i tıkladıktan sonra ortaya çıkacak olan çeşitli Kullanıcı Rızası Yönetim Platformları (CMP) ile birlikte çalıştı. Örnek olarak bu PubTech örnek olayını inceleyin.

CMP'niz bu durumdan etkileniyorsa CMP'yi yerleştiren siteler için INP sorunlarından benzer şekilde kaçınıp kaçınamayacaklarını öğrenmek üzere kendileriyle iletişime geçmeyi deneyin. Getiri taktikleriyle ilgili yol gösterici bilgiler için Uzun Görevleri optimize etme makalesine bakın.

Çerez bildirimleri komut dosyalarını eşzamansız olarak yükleme

Çerez bildirimi komut dosyaları eşzamansız olarak yüklenmelidir. Bunu yapmak için komut dosyası etiketine async özelliğini ekleyin.

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

Eşzamansız olmayan komut dosyaları tarayıcı ayrıştırıcıyı engeller. Bu, sayfa yüklemesini ve LCP'yi geciktirir. Daha fazla bilgi için Üçüncü taraf JavaScript'ini etkili bir şekilde yükleme başlıklı makaleyi inceleyin.

Çerez bildirimi komut dosyalarını doğrudan yükle

Çerez bildirimi komut dosyaları, komut dosyası etiketi bir etiket yöneticisi veya başka bir komut dosyası tarafından yüklenmek yerine, ana belgenin HTML'sine yerleştirilerek "doğrudan" yüklenmelidir. Çerez bildirimi komut dosyasını yerleştirmek için bir etiket yöneticisi veya ikincil komut dosyasının kullanılması, çerez bildirimi komut dosyasının yüklenmesini geciktirir: Bu işlem, komut dosyasının tarayıcının ileriyi gösteren ayrıştırıcısından geçmesini engeller ve komut dosyasının JavaScript yürütülmeden önce yüklenmesini engeller.

Çerez bildirimi kaynağıyla erken bağlantı oluşturma

Çerez bildirimi komut dosyalarını üçüncü taraf bir konumdan yükleyen tüm siteler, çerez bildirimi kaynaklarını barındıran kaynakla erken bağlantı kurulmasına yardımcı olması için dns-prefetch veya preconnect kaynak ipuçlarını kullanmalıdır. Daha fazla bilgi için Algılanan sayfa hızını artırmak için ağ bağlantılarını erkenden kurma bölümüne bakın.

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

Çerez bildirimlerini uygun şekilde önceden yükle

Bazı siteler, çerez bildirimi komut dosyasını yüklemek için preload kaynak ipucunu kullanmanın avantajlarından yararlanabilir. preload kaynak ipucu, tarayıcıyı belirtilen kaynak için erken bir istek başlatması için bilgilendirir.

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

preload, kullanımı sayfa başına birkaç önemli kaynak getirmekle sınırlı olduğunda en güçlü sonucu verir. Dolayısıyla, çerez bildirimi komut dosyasını önceden yüklemenin faydası duruma göre değişir.

Çerez bildirimlerinin stilini belirlerken performanstan ödün vermeyin

Üçüncü taraf çerezlerinin görünümünü ve tarzını özelleştirmek, ek performans maliyetlerine neden olabilir. Örneğin, üçüncü taraf çerez bildirimleri, sayfanın başka bir yerinde kullanılan kaynakları (ör. web yazı tipleri) her zaman yeniden kullanamaz. Ayrıca, üçüncü taraf çerez bildirimleri, stil özelliklerini uzun istek zincirlerinin sonunda yükleme eğilimindedir. Sürprizlerle karşılaşmamak için, çerez bildiriminizin nasıl yüklendiğine, stil özelliklerini ve ilgili kaynakları nasıl uyguladığına dikkat edin.

Düzen kaymalarından kaçının

Çerez bildirimleriyle ilişkili en yaygın düzen kayması sorunlarından bazıları şunlardır:

• Ekranın üst kısmındaki çerez bildirimleri: Ekranın üst kısmındaki çerez bildirimleri, düzen kaymasının çok yaygın bir kaynağıdır. Çevreleyen sayfa oluşturulduktan sonra DOM'ye bir çerez bildirimi eklenirse bunun altındaki sayfa öğeleri sayfanın daha alt kısımlarına doğru itilir. Bu tür bir düzen kayması, rıza bildirimi için DOM'de alan ayrılarak ortadan kaldırılabilir. Bu uygun bir çözüm değilse (örneğin, çerez bildiriminizin boyutları coğrafyaya göre değişiyorsa çerez bildirimini görüntülemek için yapışkan bir alt bilgi veya kalıcı kopya kullanabilirsiniz.) Bu alternatif yaklaşımların her ikisi de çerez bildirimini sayfanın geri kalanının üzerinde bir "yer paylaşımı" olarak gösterdiğinden, çerez bildirimi yüklendiğinde içerik kaymalarına neden olmamalıdır.
• Animasyonlar: Birçok çerez bildirimi animasyon kullanır. Örneğin, bir çerez bildiriminin "içine kayma" yaygın bir tasarım kalıbıdır. Bu efektlerin nasıl uygulandığına bağlı olarak, düzen kaymalarına neden olabilirler. Daha fazla bilgi için Düzen kaymalarında hata ayıklama bölümüne bakın.
• Yazı tipleri: Geç yüklenen yazı tipleri, oluşturmayı engelleyebilir ve düzen kaymalarına neden olabilir. Bu olgu, yavaş bağlantılarda daha belirgindir.

Gelişmiş yükleme optimizasyonları

Bu tekniklerin uygulanması daha fazla çalışma gerektirir, ancak çerez bildirimi komut dosyalarının yüklenmesini daha da optimize edebilir:

• Üçüncü taraf çerez bildirimi komut dosyalarını kendi sunucularınızdan önbelleğe almak ve sunmak, bu kaynakların teslim hızını artırabilir.
• Hizmet çalışanları'nı kullanmak, çerez bildirimi komut dosyaları gibi üçüncü taraf komut dosyalarının getirilmesi ve önbelleğe alınması üzerinde daha fazla kontrol sahibi olmanızı sağlayabilir.

Performans ölçümü

Çerez bildirimleri, performans ölçümlerini etkileyebilir. Bu bölümde söz konusu olumsuzlukların bazılarını ve etkilerini hafifletmeye yönelik teknikler ele alınmaktadır.

Gerçek Kullanıcı İzleme (RUM)

Bazı analiz ve RUM araçları, performans verilerini toplamak için çerezlerden yararlanır. Bir kullanıcının çerez kullanımını reddetmesi durumunda, bu araçlar performans verilerini yakalayamaz.

Siteler bu olgunun farkında olmalıdır. RUM araçlarınızın bu verileri toplamak için kullandığı mekanizmaları anlamak da önemlidir. Ancak veri sapmasının yönü ve büyüklüğü düşünüldüğünde, tipik bir sitede bu tutarsızlık endişeye neden olmaz. Çerez kullanımı, performans ölçümü için teknik bir gereklilik değildir. Web-vitals JavaScript kitaplığı, çerez kullanmayan bir kitaplığa örnek olarak verilebilir.

Sitenizin performans verilerini toplamak için çerezleri nasıl kullandığına (yani çerezlerin kişisel bilgiler içerip içermediğine) ve ilgili mevzuata bağlı olarak, performans ölçümü için çerezlerin kullanımı, sitenizde reklam çerezleri gibi başka amaçlarla kullanılan bazı çerezlerle aynı yasal şartlara tabi olmayabilir. Bazı siteler, kullanıcı izni isterken performans çerezlerini ayrı bir çerez kategorisi olarak ayırmayı tercih eder.

Sentetik izleme

Özel yapılandırma olmadan, çoğu sentetik araç (Lighthouse ve WebPageTest gibi), yalnızca çerez izin bildirimine yanıt vermeyen ilk kez gelen kullanıcıların deneyimini ölçer. Bununla birlikte, performans verilerini toplarken yalnızca önbellek durumundaki varyasyonların (örneğin, ilk ziyaret veya tekrar eden ziyaret) değil, aynı zamanda çerez kabul durumundaki değişimleri de (kabul edilen, reddedilen veya yanıtlanmadı) dikkate alması gerekir.

WebPageTest ile çerez bildirimlerini test etme

Aşağıdaki bölümlerde, çerez bildirimlerini performans ölçümü iş akışlarına dahil etmeye yardımcı olabilecek WebPageTest ve Lighthouse ayarları ele alınmaktadır. Bununla birlikte çerezler ve çerez bildirimleri, laboratuvar ortamlarında kusursuz şekilde simüle edilmesi zor olabilen pek çok faktörden yalnızca biridir. Bu nedenle, RUM verilerini performans karşılaştırmanızın temel taşı haline getirmek, yapay araçlar yerine önemlidir.

Komut dosyası çalıştırma

İzleme toplarken WebPageTest'in çerez izni banner'ını "tıklaması" için komut dosyası kullanmayı kullanabilirsiniz.

Komut Dosyası sekmesine giderek bir komut dosyası ekleyin. Aşağıdaki komut dosyası test edilecek URL'ye gidip id=cookieButton öğesini içeren DOM öğesini tıklar.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Bu komut dosyasını kullanırken aşağıdakilere dikkat edin:

• combineSteps, WebPageTest'e, izleyen komut dosyası adımlarının sonuçlarını tek bir iz ve ölçüm kümesinde "birleştirmesini" söyler. Bu komut dosyasını combineSteps olmadan çalıştırmak da faydalı olabilir. Ayrı izler, kaynakların çerez kabulünden önce mi yoksa sonra mı yüklendiğini görmeyi kolaylaştırır.
• %URL%, test edilmekte olan URL'yi belirten bir WebPageTest kuralıdır.
• clickAndWait, WebPageTest'e attribute=value ile belirtilen öğeyi tıklamalarını ve sonraki tarayıcı etkinliğinin tamamlanmasını beklemesini söyler. clickAndWait attribute=Value biçimine uygun.

Bu komut dosyasını doğru şekilde yapılandırdıysanız, WebPageTest tarafından alınan ekran görüntüsünde çerez bildirimi gösterilmeyecektir (çerez bildirimi kabul edilmiştir).

WebPageTest komut dosyası hakkında daha fazla bilgi için WebPageTest belgelerine göz atın.

Çerezleri ayarlayın

WebPageTest'i bir çerez grubuyla çalıştırmak için Gelişmiş sekmesine gidin ve çerez başlığını Özel üstbilgiler alanına ekleyin:

Test konumunu değiştirin

WebPageTest tarafından kullanılan test konumunu değiştirmek için Gelişmiş Test sekmesindeki Konumu Test Et açılır menüsünü tıklayın.

Çerez bildirimlerini Lighthouse ile test etme

Lighthouse çalıştırmasında çerezler ayarlamak, bir sayfayı Lighthouse tarafından test etmek üzere belirli bir duruma getiren bir mekanizma olarak kullanılabilir. Lighthouse'un çerez davranışı, bağlama (Geliştirici Araçları, KSA veya PageSpeed Insights) göre biraz değişiklik gösterir.

DevTools

Lighthouse, Geliştirici Araçları'ndan çalıştırıldığında çerezler temizlenmez. Ancak diğer depolama türleri varsayılan olarak temizlenir. Bu çalışma biçimi, Lighthouse ayarlar panelindeki Depolama Alanını Temizle seçeneği kullanılarak değiştirilebilir.

CLI

Lighthouse, CLI'dan çalıştırıldığında yeni bir Chrome örneği kullanıldığı için varsayılan olarak hiçbir çerez ayarlanmaz. Lighthouse'u KSA'dan belirli bir çerez grubuyla çalıştırmak için aşağıdaki komutu kullanın:

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

Lighthouse KSA'da özel istek başlıklarını ayarlama hakkında daha fazla bilgi için Kimlik Doğrulaması Yapılmış Sayfalarda Lighthouse'u Çalıştırma konusuna bakın.

PageSpeed Insights

Lighthouse'u PageSpeed Insights'tan çalıştırdığınızda yeni bir Chrome örneği kullanılır ve çerez ayarlanmaz. PageSeed Insights, belirli çerezleri ayarlayacak şekilde yapılandırılamaz.

Kullanıcı deneyimi

Farklı çerez izni bildirimlerinin kullanıcı deneyimi (UX) temel olarak iki kararın sonucudur: çerez bildiriminin sayfadaki konumu ve kullanıcının bir sitenin çerez kullanımını ne ölçüde özelleştirebileceği. Bu bölümde, bu iki karara yönelik olası yaklaşımlar anlatılmaktadır.

Kurabiye bildiriminiz için olası tasarımları değerlendirirken şunları göz önünde bulundurmalısınız:

• UX: Bu iyi bir kullanıcı deneyimi mi? Bu tasarım mevcut sayfa öğelerini ve kullanıcı akışlarını nasıl etkileyecek?
• İşletme: Sitenizin çerez stratejisi nedir? Çerez bildirimiyle ilgili hedefleriniz nelerdir?
• Yasal: Bu içerik yasal şartlara uygun mu?
• Mühendislik: Bunun uygulanması ve sürdürülmesi ne kadar bir çalışma gerektirir? Bu değişiklik ne kadar zor olabilirdi?

Yerleşim

Çerez bildirimleri üstbilgi, satır içi öğe veya altbilgi olarak görüntülenebilir. Ayrıca, bir kalıcı öğe kullanılarak sayfa içeriğinin üstünde görüntülenebilir veya geçiş reklamı olarak sunulabilir.

Üstbilgi, altbilgi ve satır içi çerez bildirimleri

Çerez bildirimleri genellikle üstbilgi veya altbilgiye yerleştirilir. Bu iki seçenek arasında göze batmadığı, banner reklamlarla ya da bildirimlerle dikkat çekmek için rekabet etmemesi ve genellikle CLS'ye neden olmaması nedeniyle altbilgi yerleşimi genellikle tercih edilir. Ayrıca, gizlilik politikalarının ve kullanım şartlarının yerleştirildiği ortak bir yerdir.

Satır içi çerez bildirimleri bir seçenek olsa da, mevcut kullanıcı arayüzlerine entegre edilmesi zor olabilir ve bu nedenle yaygın değildir.

Kalıcı iletişim kutuları

Kalıcı çerezler, sayfa içeriğinin üst kısmında görüntülenen çerez izni bildirimleridir. Kalıcı görünüm ve performans, boyutlarına bağlı olarak oldukça farklı olabilir.

Daha küçük, kısmi ekran kalıcı modları, çerez bildirimlerini düzen kaymalarına neden olmayacak şekilde uygulamakta zorlanan siteler için iyi bir alternatif olabilir.

Diğer yandan, sayfa içeriğinin çoğunu gizleyen büyük kalıcı öğeler dikkatli kullanılmalıdır. Özellikle, daha küçük siteler, kullanıcıların anlaşılması güç bir siteye ait çerez bildirimini kabul etmek yerine siteden hemen çıktığını görebilir. Bunlar aynı anlama gelen kavramlar olmasa da tam ekran çerez izni kalıcı modeli kullanmayı düşünüyorsanız çerez duvarlarıyla ilgili yasaları bilmeniz gerekir.

Yapılandırılabilirlik

Çerez bildirimi arayüzleri, kullanıcılara hangi çerezleri kabul edecekleri konusunda çeşitli düzeylerde kontrol sağlar.

Yapılandırılabilirlik yok

Bu bildirim stili çerez banner'ları, kullanıcılara çerezleri devre dışı bırakmak için doğrudan kullanıcı deneyimi kontrolleri sunmaz. Bunun yerine, genellikle kullanıcılara web tarayıcılarını kullanarak çerezleri yönetme hakkında bilgi verebilecek sitenin çerez politikasına bir bağlantı içerir. Bu bildirimler genellikle "Kapat" ve "Kabul Et" düğmelerini içerir.

Biraz yapılandırılabilirlik

Bu çerez bildirimleri, kullanıcıya çerezleri reddetme seçeneği sunar ancak daha ayrıntılı kontrolleri desteklemez. Çerez bildirimlerine bu yaklaşım daha az uygulanır.

Tam yapılandırılabilirlik

Bu çerez bildirimleri, kullanıcılara kabul ettikleri çerez kullanımını yapılandırmaları için daha ayrıntılı denetimler sağlar.

• Kullanıcı deneyimi: Çerez kullanımının yapılandırılmasına yönelik kontroller, genellikle kullanıcı ilk çerez izni bildirimine yanıt verdiğinde başlatılan ayrı bir kalıcı mod kullanılarak görüntülenir. Ancak, yer kalırsa bazı siteler bu kontrolleri ilk çerez izni bildiriminde satır içinde görüntüler.

• Ayrıntı düzeyi: Çerez yapılandırılabilirliğine yönelik en yaygın yaklaşım, kullanıcıların çerez "kategorisine" göre çerezleri etkinleştirmesine olanak tanımaktır. Yaygın çerez kategorilerine örnek olarak işlevsel, hedefleme ve sosyal medya çerezleri verilebilir.

  Ancak bazı siteler bunu bir adım öteye taşıyarak kullanıcıların çerez başına kaydolmasına izin verir. Alternatif olarak, kullanıcılara daha belirli kontroller sunmanın bir başka yolu, "reklamcılık" gibi çerez kategorilerini belirli kullanım alanlarına ayırmaktır. Örneğin, kullanıcıların "temel reklamları" ve "kişiselleştirilmiş reklamları" ayrı ayrı etkinleştirmelerine izin verme.