Core/Dash Boyutu: Tarayıcı

Boyut: Sayfa & Navigasyon: URL'ler (u)

Browser boyutu, performans verilerini istemci tarafından gönderilen User Agent dizesine göre gruplandırır. Bu, Core Web Vitals performansını uygulamanızı işleyen spesifik yazılım (ör. Chrome, Firefox, Safari, Edge, Samsung Internet) merceğinden denetlemenizi sağlar.

Browser boyutu, yazılım kısıtlamalarını, işleme motoru farklılıklarını (Blink, Gecko, WebKit) ve üçüncü taraf komut dosyası uyumluluğunu izole eder.

RUM vs. CrUX

Verilerinizin kaynağını anlamak, doğru mühendislik analizi için önemlidir.

• CrUX (Chrome User Experience Report): Bu veri seti, yalnızca Chrome (ve bazı Chromium türevleri) üzerindeki izin veren kullanıcılardan veri toplar. Firefox (Gecko motoru) ve Safari'den (WebKit motoru) gelen trafiği körü körüne hariç tutar.
• CoreDash RUM: JavaScript snippet'ını çalıştıran her tarayıcıdan veri toplar.

Birçok web sitesi için Chrome dışı tarayıcılar trafiğin %30-50'sini oluşturur. Yalnızca CrUX'a güvenmek kör bir nokta yaratır: Kitlenizin büyük bir bölümü tarafından kullanılan SpiderMonkey (Firefox) ve JavaScriptCore (Safari) motorlarını ihmal ederken Google'ın V8 motoru için optimizasyon yaparsınız.

Metriğe Özgü Tanılamalar

Farklı tarayıcı motorları kaynakları yönetme, JavaScript derleme ve düzen geometrisini hesaplama konularında farklılık gösterir. Motora özgü hataları tespit etmek için bu boyutu kullanın.

Interaction to Next Paint (INP)

INP sorunları, tarayıcının JavaScript motorunun verimliliği ve ana iş parçacığı (main-thread) zamanlaması ile doğrudan ilişkilidir.

• Firefox (SpiderMonkey): Firefox, görev önceliklendirmesini Chrome'dan farklı ele alır. Chrome'da geçen ağır bir event listener, ana iş parçacığının yield etme şeklindeki farklılıklar nedeniyle Firefox'ta fark edilir bir giriş gecikmesine neden olabilir.
• Safari (JavaScriptCore): Mobil cihazlarda "dokunma" gecikmesi konusunda genellikle belirgin davranışlar sergiler. Android'de (Chrome) anlık hissedilen hidrasyon mantığı, farklı olay yayılma modelleri nedeniyle iOS'ta gecikmeleri tetikleyebilir.

Largest Contentful Paint (LCP)

LCP tutarsızlıkları genellikle özellik eşitliği eksikliğini veya modern optimizasyon API'leri için destek eksikliğini işaret eder.

• Format Müzakeresi: Chrome hızlı bir LCP bildiriyor ancak Firefox geride kalıyorsa, görüntü formatı stratejinizi doğrulayın. Chrome'a AVIF sunarken, desteği olmayan eski tarayıcı sürümleri için daha büyük JPEG'lere fallback yapıyor olabilirsiniz.
• Öncelik İpuçları: Chrome, fetchpriority="high" özniteliğine agresif bir şekilde uyar. Bu özniteliği görmezden gelen tarayıcılar, LCP kaynağını standart öncelikle işleyerek Yükleme Gecikmesini yapay olarak şişirir.
• Bağlantı Protokolleri: Edge ve Firefox, kurumsal veya kısıtlı ağ ortamlarında HTTP/3 (QUIC) bağlantılarını farklı şekilde müzakere edebilir ve bu da LCP'nin TTFB bileşenini etkiler.

Cumulative Layout Shift (CLS)

İşleme motorları, piksel geometrisini farklı alt piksel mantığı kullanarak hesaplar.

• Yazı Tipi İşleme (Gecko vs. Blink): Firefox (Gecko) ve Chrome (Blink), yazı tipi taban çizgilerini ve izlemeyi (tracking) biraz farklı işler. Fallback yazı tipi metriklerinizi mükemmel bir şekilde eşleştirmezseniz, web yazı tipi yüklendiğinde metin bloğu yeniden boyutlandırılır ve bir tarayıcıda kaymaya neden olurken diğerinde olmaz.
• Kaydırma Çubuğu Rezervasyonu: Windows tarayıcıları (Edge/Firefox/Chrome) kaydırma çubukları için fiziksel alan ayırırken, macOS tarayıcıları bunları üst üste bindirir. Bu uyumsuzluk, genellikle Mac üzerinde geliştirme sırasında görünmez olan ancak Windows kullanıcıları için belirgin olan genişlik tabanlı düzen kaymalarına neden olur.

İş Akışı: Motora Özgü Gerilemeleri İzole Etme

Bu boyutun birincil kullanım durumu "Motor Doğrulaması"dır.

• Aykırı Değeri Belirleyin: Browser tablonuzu Etki veya Hacim'e göre sıralayın. Temel çizgiden (Chrome Mobile) önemli ölçüde daha kötü puana sahip belirli bir tarayıcıyı (ör. Firefox Mobile) arayın.
• Ortamı Doğrulayın: Sorunun kesinlikle tarayıcıyla mı yoksa tarayıcı ve işletim sistemi kombinasyonuyla mı (ör. Android'de Edge vs. Windows'ta Edge) ilgili olduğunu kontrol edin.
• Hata Ayıklama (Debug): Edge yavaş ama Chrome hızlıysa (her ikisi de Blink kullanır), DOM'a komut dosyaları enjekte eden Edge kullanıcılarında yaygın olan üçüncü taraf uzantıları veya kurumsal güvenlik yazılımlarını araştırın. Firefox yavaşsa, CSS'nizi standart olmayan özellikler veya Gecko'nun Blink'ten daha ağır cezalandırdığı düzen sarsıntıları açısından denetleyin.

Eski ve Gömülü Tarayıcılar

"Uzun Kuyruk" (Long Tail) performans düşüşlerini belirlemek için Browser boyutunu kullanın.

Uygulama İçi Tarayıcılar: Instagram, LinkedIn veya Facebook'tan gelen trafik genellikle yerel mobil tarayıcıdan farklı davranan kısıtlı WebView'larda çalışır.

Eski Sürümler: Güncelliğini yitirmiş tarayıcı sürümlerinden gelen trafik bulabilirsiniz. Bunlar yüksek INP üretiyorsa, derleme araçlarınızı (Babel/PostCSS) gerekli polyfill'leri sunacak şekilde yapılandırın veya hacim ihmal edilebilir düzeydeyse, modern kullanıcılar için paket boyutunu azaltmak adına desteği bırakma stratejik kararını alın.