Core/Dash Boyutu: Tarayıcı

Boyut: Tarayıcı (browser)

Tarayıcı boyutu, performans verilerini istemci tarafından gönderilen User Agent dizesine göre gruplar. Bu sayede Core Web Vitals performansını, uygulamanı render eden özel yazılımın gözünden (ör. Chrome, Firefox, Safari, Edge, Samsung Internet) denetleyebilirsin.

Tarayıcı boyutu; yazılım kısıtlamalarını, render motoru farklılıklarını (Blink, Gecko, WebKit) ve üçüncü taraf betik uyumluluğunu izole eder.

RUM vs. CrUX

Doğru bir mühendislik analizi için veri kaynağını anlaman önemlidir.

• CrUX (Chrome User Experience Report): Bu veri kümesi, yalnızca Chrome (ve bazı Chromium türevleri) üzerindeki veri paylaşımına izin vermiş kullanıcılardan veri toplar. Firefox (Gecko motoru) ve Safari (WebKit motoru) trafiğini körüökörüne hariç tutar.
• CoreDash RUM: JavaScript kod parçacığını çalıştıran her tarayıcıdan veri toplar.

Birçok web sitesi için Chrome dışındaki tarayıcılar trafiğin %30-50'sini oluşturur. Sadece CrUX'a güvenmek bir kör nokta yaratır: Hedef kitlenin büyük bir bölümünün kullandığı SpiderMonkey (Firefox) ve JavaScriptCore (Safari) motorlarını göz ardı edip, yalnızca Google'ın V8 motoru için optimizasyon yaparsın.

Metriğe Özel Teşhisler

Farklı tarayıcı motorları kaynakları farklı yönetir, JavaScript'i farklı derler ve yerleşim geometrisini farklı hesaplar. Motora özel hataları nokta atışı tespit etmek için bu boyutu kullan.

Interaction to Next Paint (INP)

INP sorunları, tarayıcının JavaScript motorunun verimliliği ve main thread planlamasıyla doğrudan ilişkilidir.

• Firefox (SpiderMonkey): Firefox, görev önceliklendirmesini Chrome'dan farklı yönetir. Chrome'da sorunsuz çalışan ağır bir olay dinleyicisi, main thread'in yielding sürecindeki farklılıklar nedeniyle Firefox'ta belirgin bir girdi gecikmesine yol açabilir.
• Safari (JavaScriptCore): Mobil cihazlarda "tap" gecikmesi konusunda genellikle farklı davranışlar sergiler. Android'de (Chrome) anlık hissettiren hydration mantığı, farklı olay yayılımı modelleri nedeniyle iOS'ta gecikmeleri tetikleyebilir.

Largest Contentful Paint (LCP)

LCP farklılıkları genellikle özellik eşitliği eksikliğine veya modern optimizasyon API'lerine destek verilmemesine işaret eder.

• Format Anlaşması: Chrome hızlı bir LCP raporlarken Firefox geride kalıyorsa, görsel formatı stratejini kontrol et. Chrome'a AVIF servis ederken, destek sunmayan eski tarayıcı sürümleri için daha büyük JPEG'lere fallback yapıyor olabilirsin.
• Priority Hints: Chrome, fetchpriority="high" özniteliğini agresif bir şekilde dikkate alır. Bu özniteliği göz ardı eden tarayıcılar, LCP kaynağına standart öncelikle davranarak Load Delay değerini 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ı kurabilir ve bu da LCP'nin TTFB bileşenini etkiler.

Cumulative Layout Shift (CLS)

Render motorları, piksel geometrisini farklı alt piksel mantığı kullanarak hesaplar.

• Font Rendering (Gecko vs. Blink): Firefox (Gecko) ve Chrome (Blink), font baseline ve tracking değerlerini biraz farklı render eder. Fallback font metriklerini birebir eşleştirmezsen, web font yüklendiğinde metin bloğu yeniden boyutlanır ve bir tarayıcıda kaymaya neden olurken diğerinde olmaz.
• Scrollbar Rezervasyonu: Windows tarayıcıları (Edge/Firefox/Chrome) kaydırma çubukları için fiziksel yer ayırırken, macOS tarayıcıları bunları üstte (overlay) gösterir. Bu fark, genellikle Mac üzerinde geliştirme yaparken görünmeyen fakat Windows kullanıcılarında belirgin olan genişlik kaynaklı yerleşim kaymalarına neden olur.

İş Akışı: Motora Özel Performans Düşüşlerini İzole Etmek

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

• Aykırı Değeri Belirle: Tarayıcı tablonu Etki (Impact) veya Hacim (Volume) değerine göre sırala. Referans değerden (Chrome Mobile) belirgin şekilde daha kötü skora sahip spesifik bir tarayıcı (ör. Firefox Mobile) olup olmadığına bak.
• Ortamı Doğrula: Sorunun yalnızca tarayıcıdan mı kaynaklandığını yoksa tarayıcı ile işletim sistemi kombinasyonundan mı (ör. Android'de Edge ve Windows'ta Edge) oluştuğunu kontrol et.
• Hata Ayıkla: Edge yavaş ama Chrome hızlıysa (her ikisi de Blink kullanır), Edge kullanıcılarında yaygın olan ve DOM'a betik enjekte eden üçüncü taraf uzantıları veya kurumsal güvenlik yazılımlarını incele. Firefox yavaşsa, Gecko'nun Blink'e göre daha ağır cezalandırdığı standart dışı özellikleri veya layout thrashing durumlarını tespit etmek için CSS'ini denetle.

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

Performansı aşağı çeken "Long Tail" (uzun kuyruk) unsurlarını belirlemek için Tarayıcı boyutunu kullan.

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

Eski Sürümler: Güncel olmayan tarayıcı sürümlerinden gelen trafikle karşılaşabilirsin. Bunlar yüksek INP üretiyorsa, derleme araçlarını (Babel/PostCSS) ya gerekli polyfill'leri sunacak şekilde yapılandır ya da hacim ihmal edilebilir düzeydeyse, modern kullanıcılar için bundle boyutunu küçültmek amacıyla desteği sonlandırma kararı al..