Core/Dash Metric Breakdown Dashboard'larını Anlamak

Metric Breakdown Dashboard'ını Anlamak

LCP ve INP gibi bileşik metrikler, birden fazla farklı zamanlama olayını bir araya getirir. Toplam skoru optimize etmek, bu temel bileşenlerin izole edilmesini gerektirir. Metric Breakdown dashboard'ı, belirli darboğazı belirlemek için performansı granüler aşamalara ayırır.

Bu araç, genel optimizasyonu hassas mühendislik hedefleriyle değiştirir. Gecikmeyi sunucuya, ağa veya istemci yürütmesine atfeder.

Breakdown Dashboard'ının Anatomisi

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

• Contribution Donut: Her bir 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 backend kaynaklı olduğunu bilirsiniz.
• Historical Timeline: Her bileşenin mutlak değerlerini zaman içinde trend olarak gösterir. Bunu, performans değişimlerini deployment'lar gibi belirli olaylarla ilişkilendirmek için kullanın.
• Segmented Data Table: Metriği boyuta (URL, Cihaz vb.) göre ayırır. Her satır, o segmentin 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 edge caching eksikliğini gösterir.
• Load Delay: İlk HTML yanıtı ile LCP kaynağının indirilmeye başlanması arasındaki boşluk. Bu, kaynak keşif gecikmesini ölçer.
• Load Time: LCP varlığını (görüntü veya yazı tipi) ağ üzerinden indirmek için gereken süre. Bu, dosya boyutu ve bant genişliği ile ilişkilidir.
• Render Delay: Kaynağın indirilmesinin bitmesi ile ekrana çizilmesi arasındaki süre. Yüksek Render Delay genellikle JavaScript tarafından main thread engellemesini gösterir.

TTFB Bileşenleri (Time to First Byte)

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

• Waiting: Tarayıcının sunucunun bir yanıt oluşturmasını beklediği süre (Backend işleme).
• Cache: Yerel veya ara önbellekleri kontrol etmek için harcanan süre.
• DNS: Domain Name System sorgusunun süresi.
• Connection: TCP bağlantısını kurmak için geçen süre.
• 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. Main thread engellemesini tam olarak belirlemek için etkileşim yaşam döngüsünü segmentlere ayırıyoruz:

• Input Delay: Kullanıcı etkileşimi ile event handler yürütmesi arasındaki süre. Yüksek Input Delay, main thread'in meşgul olduğu anlamına gelir.
• Processing: Event callback'lerini yürütmek için geçen süre. Bu, JavaScript mantığınızın verimliliğini temsil eder.
• Presentation: Tarayıcının layout hesaplaması ve bir sonraki kareyi boyaması için geçen süre.

Tanılama İş Akışı

Bir gerilemeyi (regression) teşhis etmek için bu sırayı izleyin:

• Darboğazı Ölçün: Baskın alt parçayı bulmak için 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.
• Nedensellik Kurun: Ani artışı belirli bir deployment veya içerik güncellemesiyle ilişkilendirmek için 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 Data Table'ı kullanın. Modeli bulmak, ölçeklenebilir bir düzeltme dağıtmanın anahtarıdır.

Core Web Vitals Optimizasyonu

Bu dökümleri, biletleri doğru mühendislik ekibine yönlendirmek için kullanın. TTFB sorunlarını Backend'e atayın. Load Delay ve Render Delay'i Frontend'e atayın. DNS/Connection gecikmesini Altyapı (Infrastructure) ekibine atayın. Bu akıcı hale getirilmiş triyaj süreci, inceleme süresini azaltır ve çözümü hızlandırır.