Core/Dash Metrik Kırılımı Kontrol Panellerini Anlamak

Metrik Kırılımı Kontrol Panelini Anlamak

LCP ve INP gibi bileşik metrikler, birden fazla farklı zamanlama olayını bir araya getirir. Toplam puanı optimize etmek, bu temel bileşenleri izole etmeyi gerektirir. Metrik Kırılımı kontrol paneli, belirli darboğazı belirlemek için performansı ayrıntılı aşamalara böler.

Bu araç, geniş kapsamlı optimizasyonun yerini kesin mühendislik hedefleriyle değiştirir. Gecikmeyi sunucuya, ağa veya istemci yürütmesine bağlar.

Kırılım Kontrol Panelinin Anatomisi

Kontrol paneli, gecikmenin kök nedenini izole etmek için senkronize edilmiş üç görünüm sağlar:

• Katkı Halkası (Contribution Donut): Her alt parçanın göreceli ağırlığını görselleştirir. "En büyük faktör nedir?" sorusunu yanıtlar. Eğer `Time to First Byte` grafiğin %70'ini kaplıyorsa, sorunun arka uçla ilgili olduğunu bilirsiniz.
• Geçmiş Zaman Çizelgesi (Historical Timeline): Her bileşenin zaman içindeki mutlak değerlerinin eğilimini gösterir. Performans değişikliklerini dağıtımlar gibi belirli olaylarla ilişkilendirmek için bunu kullanın.
• Bölümlenmiş Veri Tablosu (Segmented Data Table): Metriği boyutlara (URL, Cihaz vb.) göre ayırır. Her satır, o bölümün benzersiz profilini ortaya çıkaran ve aykırı değerleri tespit etmenize yardımcı olan bir dağılım çubuğu içerir.

LCP Bileşenleri (Largest Contentful Paint)

LCP yükleme performansını ölçer. Bu metriği dört aşamaya ayırıyoruz:

• TTFB (Time to First Byte): Sunucu yanıt süresi. Yüksek TTFB, yavaş veritabanı sorgularını veya uç (edge) önbellekleme eksikliğini gösterir.
• Yükleme Gecikmesi (Load Delay): Başlangıç HTML yanıtı ile LCP kaynağı indirmesinin başlangıcı arasındaki boşluk. Bu, kaynak keşfi gecikmesini ölçer.
• Yükleme Süresi (Load Time): LCP varlığını (görsel veya yazı tipi) ağ üzerinden indirmek için gereken süre. Bu, dosya boyutu ve bant genişliği ile ilişkilidir.
• Oluşturma Gecikmesi (Render Delay): Kaynağın indirilmesinin bitmesi ile ekrana çizilmesi arasındaki süre. Yüksek Render Delay genellikle JavaScript tarafından ana iş parçacığının engellendiğini gösterir.

TTFB Bileşenleri (Time to First Byte)

TTFB, sunucu yanıt verebilirliği için bir vekil (proxy) görevi görür. Bu kırılım, ağ bağlantısı aşamalarını izole eder:

• Bekleme (Waiting): Tarayıcının, sunucunun bir yanıt üretmesini beklerken geçirdiği süre (Arka uç işleme).
• Önbellek (Cache): Yerel veya ara önbellekleri kontrol etmek için harcanan süre.
• DNS: Alan Adı Sistemi (DNS) sorgulamasının süresi.
• Bağlantı (Connection): TCP bağlantısını kurmak için geçen süre.
• İstek (Request): HTTP istek başlıklarını göndermek için geçen süre.

INP Bileşenleri (Interaction to Next Paint)

INP etkileşimi ölçer. Ana iş parçacığı engellemesini (main thread blocking) tam olarak belirlemek için etkileşim yaşam döngüsünü bölümlere ayırıyoruz:

• Giriş Gecikmesi (Input Delay): Kullanıcı etkileşimi ile olay işleyicisinin (event handler) yürütülmesi arasındaki süre. Yüksek Input Delay, ana iş parçacığının meşgul olduğu anlamına gelir.
• İşleme (Processing): Olay geri çağırmalarını (event callbacks) yürütmek için geçen süre. Bu, JavaScript mantığınızın verimliliğini temsil eder.
• Sunum (Presentation): Tarayıcının düzeni hesaplaması ve bir sonraki kareyi çizmesi için geçen süre.

Teşhis İş Akışı

Bir gerilemeyi teşhis etmek için bu diziyi izleyin:

• Darboğazı Sayısallaştırın: Baskın alt parçayı bulmak için Halka (Donut) grafiğine bakın. Eğer `TTFB` yüksekse, sunucunuzu kontrol edin. Eğer `Resource Load Delay` yüksekse, varlık önceliğinizi kontrol edin.
• Nedenselliği Kurun: Artışı belirli bir dağıtım veya içerik güncellemesi ile ilişkilendirmek için Zaman Çizelgesini (Timeline) kontrol edin.
• Bağlamı İzole Edin: Bu modelin tüm sayfalarda geçerli olup olmadığını veya belirli bir şablona özgü olup olmadığını görmek için Veri Tablosunu (Data Table) kullanın. Modeli bulmak, ölçeklenebilir bir düzeltme dağıtmanın anahtarıdır.

Core Web Vitals Optimizasyonu

Biletleri doğru mühendislik ekibine yönlendirmek için bu kırılımları kullanın. TTFB sorunlarını Arka Uca (Backend) atayın. Load Delay ve Render Delay sorunlarını Ön Yüze (Frontend) atayın. DNS/Connection gecikmesini Altyapıya (Infrastructure) atayın. Bu kolaylaştırılmış önceliklendirme süreci, araştırma süresini azaltır ve çözümü hızlandırır.