2026'daki Üç Core Web Vitals

Google, sayfa deneyimi için üç birincil alan metriği ölçer. Her birinin "İyi" performans için bir eşiği vardır:

• Largest Contentful Paint (LCP) — en büyük görünür öğeyi oluşturma süresi. İyi: 2,5 saniyenin altında.
• Interaction to Next Paint (INP) — tüm kullanıcı etkileşimlerine yanıt verme (Mart 2024'te FID'nin yerini aldı). İyi: 200ms'nin altında.
• Cumulative Layout Shift (CLS) — yükleme sırasında görsel kararlılık. İyi: 0,1'in altında.

Oluşturmayı engelleyen, yüklemede ağır JavaScript çalıştıran veya geç düzen değişiklikleri enjekte eden bir onay banner'ı bunlardan herhangi birini "İyileştirme Gerekiyor" veya "Zayıf" bandına itebilir — ve Google, gerçek Chrome kullanıcılarından 28 günlük alan verisi kullandığından, geçici sorunlar kalıcı sıralama sinyallerine dönüşür.

Onay Banner'ları LCP'yi Nasıl Etkiler

Largest Contentful Paint genellikle bir hero görüntüsü veya başlıkta tetiklenir. Birkaç onay modeli bunu gereksiz yere geciktirir:

Oluşturmayı Engelleyen CMP Komut Dosyaları

CMP'yi belge başından eşzamanlı olarak yüklemek, komut dosyası indirilip çalıştırılana kadar HTML ayrıştırmayı durdurur. CMP yavaş bir CDN'de barındırılıyorsa veya soğuk önbelleğe sahipse, LCP'ye global olarak 200-800ms ekleyebilirsiniz.

LCP Öğesini Kapatan Banner

Onay banner'ı, LCP öğesini kaplayan bir modal katman olarak konumlandırılmışsa, tarayıcılar yine de LCP'yi kaplanan öğeden ölçer. Ancak banner en büyük boyalı öğeyse LCP adayı haline gelir — ve sayfa yüklendikten sonra JavaScript aracılığıyla oluşturulursa LCP yapay olarak yüksek olur.

Düzeltme: Küçük Satır İçi Bootstrap ile Asenkron Yükleme

Tam CMP'yi asenkron (`async` veya `defer`) yükleyin; yalnızca başlangıç banner görüntüsü için küçük bir satır içi komut dosyasıyla. Sıkıştırılmış 5KB'dan küçük bir bootstrap hedefleyin. Tam davranış mantığı, satıcı listeleri ve UI chrome, ilk boyamadan sonra geç yüklenebilir.

Onay Banner'ları INP'yi Nasıl Etkiler

Interaction to Next Paint, bir oturumdaki tüm tıklamalar, dokunmalar ve tuş basışlarındaki en kötü yanıt süresini ölçer. Çerez onayı etkileşimleri genellikle bir kullanıcının yaptığı ilk etkileşimdir — bu yüzden yavaş bir Kabul Et düğmesi puanı mahveder.

Kabulde Ağır İş

Birçok CMP, Kabulde eşzamanlı iş yürütür: 40'tan fazla satıcı komut dosyası yükleme, localStorage'a yazma, dataLayer olaylarını tetikleme, Google Consent Mode güncellemelerini başlatma. Bu 200ms'yi aşarsa INP zarar görür.

Düzeltme: İşi Boyamadan Sonraya Sıraya Koy

Kabul tıklamasında, banner'ı hemen gizleyin ve ağır işi `requestIdleCallback` veya `setTimeout(0)` ile zamanlayın. Kullanıcı banner'ın anında kaybolduğunu görür; satıcı komut dosyaları etkileşimi engellemeden arka planda yüklenir.

Onay Banner'ları CLS'yi Nasıl Etkiler

Cumulative Layout Shift, beklenmedik görsel hareketi izler. Banner'lar, içerik boyandıktan sonra DOM'a enjekte edildiklerinde klasik bir CLS kaynağıdır.

Geç Banner Enjeksiyonu

Banner LCP'den 800ms sonra belirirse, içeriği aşağı iter ve bir düzen kayması oluşturur. Küçük bir banner bile görünüm alanının büyük bir bölümünü etkiliyorsa 0,1+ CLS puanı tetikleyebilir.

Çerez Tercih Widget'ının Yeniden Oluşturulması

Satıcı logolarını asenkron olarak yükleyen alt bilgi tercih widget'ları, tüm alt bilgiyi birden çok kez yeniden akıtabilir ve CLS'yi kötüleştirebilir.

Düzeltme: Alanı Önceden Ayırın

Banner'ın alanını ilk boyamadan itibaren ayırmak için CSS kullanın — sabit yükseklikli yer tutucu, alt bilgide `min-height` veya içeriği itmeyen alt kısma sabitlenmiş banner. Modern CMP'ler kutudan çıktığı gibi CLS olmayan yapılandırma sunmalıdır.

Google Consent Mode V2 ve Performans

Consent Mode V2, Google etiketlerinin onaydan önce çerez olmayan bir durumda çalışmasına izin verir ve sinyalleri `gtag('consent', 'default', {...})` aracılığıyla iletir. Bu, ölçüm sürekliliği için harikadır, ancak gtag.js kütüphanesinin kendisi 50-90KB'dır. Asenkron olarak yükleyin ve yarış koşullarından kaçınmak için varsayılanları mümkün olduğunca erken ayarlayın.

• gtag yüklenmeden önce varsayılanları ayarlayın — onay varsayılan çağrısını gtag.js komut dosyasından önce head bölümüne koyun.
• Varsayılan olarak `analytics_storage: 'denied'` kullanın — onay öncesi toplanan verileri en aza indirir.
• requestIdleCallback aracılığıyla Kabulde güncelleyin — ana iş parçacığı engellemesinden kaçının.

CMP'nin Core Web Vitals Üzerindeki Etkisini Ölçme

Tahmin etmeyin — ölçün. Banner'ınızın etkisini ölçmek için bu araçları kullanın:

• PageSpeed Insights — Chrome UX Report'tan alan verisi ve laboratuvar Lighthouse denetimi. CMP komut dosyasıyla ve olmadan puanları karşılaştırın.
• Web Vitals Chrome extension — yerel test sırasında gerçek zamanlı LCP, INP, CLS katmanı.
• WebPageTest.org — banner'ın tam olarak ne zaman oluşturulduğunu ve neyi engellediğini gösteren filmstrip ve şelale görünümü.
• Search Console Core Web Vitals report — URL düzenine göre gruplandırılmış 28 günlük alan verisi. Banner'ınızı içeren açılış sayfalarının banner'sız sayfalardan farklı puan alıp almadığını kontrol edin.

FlexyConsent Nasıl Hızlı Kalır