Boyut: Tarayıcı (browser)
Tarayıcı 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 özel yazılım (ör. Chrome, Firefox, Safari, Edge, Samsung Internet) merceğinden denetlemenize olanak tanır.
Tarayıcı boyutu yazılım kısıtlamalarını, işleme motoru farklılıklarını (Blink, Gecko, WebKit) ve üçüncü taraf skript uyumluluğunu ayrıştırır.
RUM ve CrUX Karşılaştırması
Doğru mühendislik analizi için verilerinizin kaynağını anlamak önemlidir.
- CrUX (Chrome Kullanıcı Deneyimi Raporu): Bu veri kümesi, özel olarak Chrome (ve bazı Chromium türevleri) üzerinden veri paylaşımına izin veren kullanıcılardan veri toplar. Firefox (Gecko motoru) ve Safari (WebKit motoru) trafiğini tamamen dışarıda bırakır.
- CoreDash RUM: JavaScript snippet'ini çalıştıran her tarayıcıdan veri toplar.
Pek çok web sitesi için Chrome dışı tarayıcılar trafiğin %30-50'sini temsil eder. Yalnızca CrUX'e güvenmek kör bir nokta oluşturur: Hedef kitlenizin devasa bir kesimi tarafından kullanılan SpiderMonkey (Firefox) ve JavaScriptCore (Safari) motorlarını ihmal ederken yalnızca Google'ın V8 motoru için optimizasyon yapmış olursunuz.Metrik Bazlı Tanılama
Farklı tarayıcı motorları kaynakları yönetir, JavaScript'i derler ve layout geometrisini farklı şekilde hesaplar. Motora özgü hataları belirlemek 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) planlamasıyla doğrudan ilişkilidir.
- Firefox (SpiderMonkey): Firefox, görev önceliklendirmesini Chrome'dan farklı şekilde yönetir. Chrome'da sorunsuz çalışan ağır bir event listener, ana iş parçacığının devretme (yield) biçimindeki farklılıklar nedeniyle Firefox'ta fark edilir bir giriş gecikmesine neden olabilir.
- Safari (JavaScriptCore): Mobil cihazlarda "dokunma" (tap) gecikmesi konusunda genellikle farklı davranışlar sergiler. Android'de (Chrome) anlık hissettiren hidrasyon mantığı, farklı olay yayılım (event propagation) 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'leri için destek verilmediğine işaret eder.
- Format Anlaşması (Format Negotiation): 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 geri dönüyor (fallback) olabilirsiniz.
- Priority Hints: Chrome, fetchpriority="high" özelliğine agresif bir şekilde uyar. Bu özniteliği görmezden gelen tarayıcılar, LCP kaynağına standart öncelikle yaklaşarak Yükleme Gecikmesini (Load Delay) yapay olarak şişirir.
- Bağlantı Protokolleri: Edge ve Firefox, kurumsal veya kısıtlı ağ ortamlarında HTTP\/3 (QUIC) bağlantıları için farklı şekilde anlaşabilir ve bu durum LCP'nin TTFB bileşenini etkileyebilir.
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 biraz farklı şekilde işler. Yedek yazı tipi (fallback font) metriklerinizi mükemmel şekilde eşleştirmezseniz, web yazı tipi yüklendiğinde metin bloğu yeniden boyutlandırılır ve bu durum 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ı içerik üzerine bindirir. Bu fark, genellikle Mac'te geliştirme sırasında görünmeyen ancak Windows kullanıcıları için belirgin olan genişlik tabanlı layout kaymalarına neden olur.
İş Akışı: Motor Bazlı Gerilemeleri Ayrıştırma
Bu boyutun birincil kullanım durumu "Motor Doğrulaması"dır.
- Aykırı Değeri Belirleyin: Tarayıcı tablonuzu Etki veya Hacim'e göre sıralayın. Temel değerden (Chrome Mobil) önemli ölçüde daha kötü puana sahip belirli bir tarayıcı (örneğin Firefox Mobil) arayın.
- Ortamı Doğrulayın: Sorunun doğrudan 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: Edge yavaş ancak Chrome hızlıysa (ikisi de Blink kullanır), Edge kullanıcılarında yaygın olan ve DOM'a skript enjekte eden üçüncü taraf uzantıları veya kurumsal güvenlik yazılımlarını inceleyin. Firefox yavaşsa, CSS'inizi Gecko'nun Blink'ten daha ağır cezalandırdığı standart dışı özellikler veya layout thrashing açısından denetleyin.
Eski ve Gömülü Tarayıcılar
"Long Tail" performans yüklerini belirlemek için Tarayıcı 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üncel olmayan tarayıcı sürümlerinden gelen trafikle karşılaşabilirsiniz. Bunlar yüksek INP oluşturuyorsa, derleme araçlarınızı (Babel\/PostCSS) ya gerekli polyfill'leri sunacak şekilde yapılandırın ya da hacim önemsizse modern kullanıcılar için paket boyutunu azaltmak amacıyla desteği kesme yönünde stratejik bir karar alın..
[include]sidebarcoredash.html[\/include]