Çerez bildirimleri için en iyi uygulamalar

Performans ve kullanılabilirlik için çerez bildirimlerini optimize edin.

Katie Hempenius
Katie Hempenius
X

Bu makalede, çerez bildirimlerinin performansı, performans ölçümünü ve kullanıcı deneyimini nasıl etkileyebileceği anlatılmaktadır.

Performans

Çerez bildirimleri, genellikle sayfa yükleme sürecinin başlarında yüklenmeleri, tüm kullanıcılara gösterilmesi ve reklamların ve diğer sayfa içeriklerinin yüklenmesini etkileme potansiyeli nedeniyle sayfa performansı üzerinde önemli bir etki yaratabilir.

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

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

  • İlk Giriş Gecikmesi (FID): Genel olarak, çerez izni çözümünüzün tek başına FID üzerinde minimum bir etkisi olmalıdır. Çerez izni, çok az JavaScript yürütme işlemi gerektirir. Ancak bu çerezlerin sağladığı teknolojilerin (yani reklam ve izleme komut dosyaları) sayfa etkileşimi üzerinde önemli bir etkisi olabilir. Bu komut dosyalarını çerez kabulüne kadar ertelemek, İlk Giriş Gecikmesini (FID) azaltmaya yönelik bir teknik olarak kullanılabilir.

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

Genel anlamda, üçüncü taraf sağlayıcılardan gelen çerez bildirimlerinin performans üzerinde kendi oluşturduğunuz bir çerez bildiriminden daha büyük bir etkiye sahip olmasını bekleyebilirsiniz. Bu, çerez bildirimlerine özel bir sorun değildir. Daha ziyade, genel olarak üçüncü taraf komut dosyalarının doğasını yansıtır.

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çerli olacaktır.

Ç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 da sayfa yüklemesini ve LCP'yi geciktirir. Daha fazla bilgi için Üçüncü taraf JavaScript'i verimli bir şekilde yükleme konusuna bakın.

Çerez bildirimi komut dosyaları, komut dosyası etiketinin bir etiket yöneticisi veya başka bir komut dosyası tarafından değil, ana belgenin HTML'sine yerleştirilerek "doğrudan" yüklenmesi gerekir. Çerez bildirimi komut dosyasını yerleştirmek için bir etiket yöneticisi veya ikincil komut dosyası kullanmak, çerez bildirimi komut dosyasının yüklenmesini geciktirir: Komut dosyasının tarayıcının ön izleme ayrıştırıcısından görünmesini engeller ve komut dosyasının JavaScript çalıştırılmadan önce yüklenmesini engeller.

Ç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ı kurmaya yardımcı olmak için dns-prefetch veya preconnect kaynak ipuçlarını kullanmalıdır. Daha fazla bilgi edinmek için Algılanan sayfa hızını iyileştirmek için ağ bağlantılarını erkenden kurma konusuna bakın.

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

Bazı siteler çerez bildirimi komut dosyasını yüklemek için preload kaynak ipucundan yararlanabilir. preload kaynak ipucu, tarayıcıya belirtilen kaynak için erken bir istek başlatmasını bildirir.

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

preload en çok, sayfa başına birkaç anahtar kaynak getirmekle sınırlı olduğunda etkili olur. Bu nedenle, çerez bildirimi komut dosyasını önceden yüklemenin faydası, duruma bağlı olarak değişir.

Üçüncü taraf çerez bildirimlerinin görünümünü ve kullanımını özelleştirmek ek performans maliyetlerine neden olabilir. Örneğin, üçüncü taraf çerez bildirimleri, sayfanın başka bir yerinde kullanılan kaynakları (örneğin web yazı tipleri) her zaman yeniden kullanamaz. Ayrıca, üçüncü taraf çerez bildirimlerinin stil özelliklerini uzun istek zincirlerinin sonunda yükleme eğilimindedir. Sürprizlerle karşılaşmamak için çerez bildiriminizin nasıl yüklendiğine, ayrıca stil 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ında çerez bildirimleri: Ekranın üst kısmında çerez bildirimleri, düzen kaymasının çok yaygın bir kaynağıdır. Çevreleyen sayfa oluşturulduktan sonra DOM'a bir çerez bildirimi eklenirse altındaki sayfa öğelerini sayfanın daha aşağısına iter. Bu tür bir düzen kayması, izin bildirimi için DOM'da 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 sabit bir altbilgi veya modal kullanmayı düşünün. Bu alternatif yaklaşımların her ikisinde de çerez bildirimi sayfanın geri kalanının üzerinde "yer paylaşımı" olarak görüntülendiğinden, çerez bildirimi yüklendiğinde içerik kaymasına neden olmamalıdır.
  • Animasyonlar: Birçok çerez bildirimi animasyon kullanır. Örneğin, bir çerez bildirimini "içeri kaydırma" yaygın bir tasarım kalıbıdır. Bu efektlerin uygulanma şekline 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 fenomen, yavaş bağlantılarda daha belirgindir.

Gelişmiş yükleme optimizasyonları

Bu tekniklerin uygulanması daha fazla zaman alır ancak çerez bildirimi komut dosyalarının yüklenmesini daha da optimize edebilir:

Performans ölçümü

Çerez bildirimleri, performans ölçümlerini etkileyebilir. Bu bölümde, söz konusu etkileri azaltmaya yönelik bazı uygulamalar ve teknikler anlatılmaktadır.

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

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

Siteler bu durumun farkında olmalıdır. RUM araçlarınızın veri toplamak için kullandığı mekanizmaları anlamak da önemlidir. Ancak, verilerin sapması ve boyutu düşünüldüğünde, söz konusu farklılık normalde site için alarma neden olmaz. Çerez kullanımı, performans ölçümü için teknik bir gereklilik değildir. web-vitals JavaScript kitaplığı, çerez kullanmayan bir kitaplık örneğidir.

Sitenizin performans verilerini toplamak için çerezleri nasıl kullandığına (yani çerezlerin kişisel bilgileri içerip içermediğine) ve söz konusu mevzuata bağlı olarak, performans ölçümü için çerezlerin kullanımı, sitenizde reklam çerezleri gibi başka amaçlar için kullanılan bazı çerezlerle aynı yasa gereksinimlerine tabi olmayabilir. Bazı siteler, kullanıcılardan izin isterken performans çerezlerini ayrı bir çerez kategorisi olarak ayırmayı seçer.

Sentetik izleme

Özel yapılandırma olmadan, çoğu sentetik araç (Lighthouse ve WebPageTest gibi) yalnızca çerez izin bildirimine yanıt vermeyen yeni kullanıcıların deneyimini ölçer. Bununla birlikte, performans verilerini toplarken yalnızca önbellek durumundaki varyasyonların (örneğin, ilk ziyaret ve tekrarlanan ziyaret) değil, çerez kabul durumundaki (kabul edilen, reddedilen veya yanıtlanmayan) varyasyonların da dikkate alınması gerekir.

Aşağıdaki bölümlerde, çerez bildirimlerini performans ölçümü iş akışlarına dahil etmek için yararlı olabilecek WebPageTest ve Lighthouse ayarları ele alınmaktadır. Ancak çerezler ve çerez bildirimleri, laboratuvar ortamlarında mükemmel şekilde simüle edilmesi zor olabilen birçok faktörden yalnızca biridir. Bu nedenle, RUM verilerini sentetik araçlar yerine performans karşılaştırmanızın temel taşı yapmak önemlidir.

Senaryo Yazma

Bir iz toplarken WebPageTest'in çerez izni banner'ını "tıklamasını" sağlamak için komut dosyası kullanabilirsiniz.

Komut Dosyası sekmesine giderek bir komut dosyası ekleyin. Aşağıdaki komut dosyası, test edilecek URL'ye gider ve ardından cookieButton kimliğine sahip DOM öğesini tıklar.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Bu komut dosyasını kullanırken şunlara dikkat edin:

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

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

WebPageTest komut dosyası hakkında daha fazla bilgi için WebPageTest belgelerine bakı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:

WebPageTest&#39;teki &quot;Özel üstbilgiler&quot; alanını gösteren ekran görüntüsü

Test konumunu değiştirin

WebPageTest tarafından kullanılan test konumunu değiştirmek için Gelişmiş Test sekmesinde bulunan Test Konumu açılır listesini tıklayın.

WebPageTest&#39;teki &#39;Test Konumu&#39; açılır listesinin ekran görüntüsü

Lighthouse çalıştırmasında çerez ayarlamak, bir sayfayı Lighthouse tarafından test edilmek üzere belirli bir duruma getirmek için kullanılan bir mekanizma olabilir. Lighthouse'un çerez davranışı, bağlama (DevTools, CLI veya PageSpeed Insights) göre biraz farklılık gösterir.

DevTools

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

Lighthouse &quot;Depolama Alanını Temizle&quot; seçeneğini vurgulayan ekran görüntüsü

CLI

Lighthouse'u KSA'dan çalıştırmak yeni bir Chrome örneği kullandığından varsayılan olarak çerez ayarlanmaz. KSA'dan Lighthouse'u 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 CLI'da özel istek üstbilgileri ayarlama hakkında daha fazla bilgi için Kimlik Doğrulaması Yapılmış Sayfalarda Lighthouse'u Çalıştırma bölümüne bakın.

PageSpeed Insights

Lighthouse'u PageSpeed Insights'tan çalıştırmak yeni bir Chrome örneği kullanır ve herhangi bir çerez ayarlamaz. PageSeed Insights belirli çerezleri ayarlamak için yapılandırılamaz.

Kullanıcı deneyimi

Farklı çerez izin bildirimlerine ilişkin kullanıcı deneyimi (UX) esasen 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 açıklanmaktadır.

Çerez bildiriminiz için olası tasarımları değerlendirirken dikkate almanız gereken bazı şeyler şunlardır:

  • 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 bildirimi hedefleriniz nedir?
  • Yasal: Bu uygulama yasal şartlara uygun mu?
  • Mühendislik: Uygulama ve bakım ne kadar sürer? Değişim ne kadar zor olabilirdi?

Yerleşim

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

Çerez bildirimleri için farklı yerleştirme seçeneği örneklerinin gösterildiği şema

Çerez bildirimleri genellikle üstbilgi veya altbilgiye yerleştirilir. Bu iki seçenekte alt bilgi yerleşimi, göze batmayan olması, banner reklamlar ya da bildirimlerle dikkat çekmek için rekabet etmemesi ve genellikle CLS'ye yol açmaması nedeniyle genellikle tercih edilir. Ayrıca, gizlilik politikaları ve kullanım şartları yaygın bir şekilde yerleştirilir.

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ı iletişim kutuları, sayfa içeriğinin üzerinde görüntülenen çerez izin bildirimleridir. Modlar, boyutlarına bağlı olarak oldukça farklı görünüm ve performans gösterebilir.

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

Diğer yandan, sayfa içeriğinin büyük kısmını gizleyen büyük modlar dikkatli bir şekilde kullanılmalıdır. Özellikle, küçük siteler, karışık içeriğe sahip bilinmedik bir sitenin çerez bildirimini kabul etmek yerine kullanıcıların siteden hemen çıktığını fark edebilir. Bunlar eşanlamlı kavramlar olmasa da tam ekran çerez izni kalıcı iletişim kutusunu kullanmayı düşünüyorsanız çerez duvarları ile ilgili yasaları bilmeniz gerekir.

Yapılandırılabilirlik

Çerez bildirimi arayüzleri, kullanıcılara hangi çerezleri kabul edecekleri konusunda farklı düzeylerde kontrol sunar.

Yapılandırılabilirlik yok

Bildirim stilindeki bu çerez banner'ları, kullanıcılara çerezleri devre dışı bırakmaya yönelik doğrudan kullanıcı deneyimi kontrolleri sunmaz. Bunun yerine, genellikle sitenin çerez politikasına bir bağlantı içerirler. Bu bağlantı, kullanıcılara web tarayıcılarını kullanarak çerezleri yönetme konusunda bilgi sağlayabilir. Bu bildirimler genellikle bir "kapat" ve/veya "Kabul et" düğmesi içerir.

Çerez yapılandırılabilirliği olmayan çerez bildirimi örneklerinin gösterildiği şema

Bir miktar 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 yönelik bu yaklaşım daha az yaygındır.

Bir miktar çerez yapılandırılabilirliğine sahip çerez bildirimi örneklerinin gösterildiği şema

Tam yapılandırılabilirlik

Bu çerez bildirimleri, kullanıcılara kabul ettikleri çerez kullanımını yapılandırma konusunda daha ayrıntılı denetimler sunar.

Tam çerez yapılandırılabilirliğiyle chookie bildirimi örneklerinin gösterildiği şema

  • UX: Çerez kullanımını yapılandırma kontrolleri genellikle kullanıcı ilk çerez izni bildirimine yanıt verdiğinde başlatılan ayrı bir modal kullanılarak gösterilir. Ancak yer varsa bazı siteler bu kontrolleri ilk çerez izin bildiriminde satır içi olarak gösterir.

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

    Ancak, bazı siteler bir adım daha ileri giderek kullanıcıların çerez bazında kaydolmalarına izin verir. Alternatif olarak, kullanıcılara daha spesifik kontroller sağlamanın bir başka yolu da, "reklam" gibi çerez kategorilerini belirli kullanım alanlarına ayırmaktır. Örneğin, kullanıcıların "temel reklamlar" ve "kişiselleştirilmiş reklamlar" için ayrı ayrı etkinleştirmelerine izin verilir.

Tam çerez yapılandırılabilirliğine sahip çerez bildirimi örneklerinin gösterildiği şema