Core/Dash Teşhis

CoreDash Teşhis: Kök Neden Motoru

Real User Monitoring sana yaşamsal belirtileri verir. LCP'n 3,2 saniye. CLS'in 0,25. INP'n başarısız. RUM tam da bunun için tasarlanmıştır. Önemli metrikleri gösterir. Sana performansın düştüğünü ve nereye odaklanman gerektiğini söyler. Core Web Vitals'ı düzeltmenin ilk ve temel adımı budur.

Ancak veriye sahip olduğunda asıl iş başlar. Başarısız bir LCP; yavaş bir sunucu, aşırı büyük bir görsel, render-blocking bir script veya bunların üçü birden olabilir. RUM sana semptomu gösterir. Sonraki mantıklı adım ise teşhistir.

CoreDash Teşhis, metrikleri çözümlere dönüştüren zeka katmanıdır. Tam darboğazı tespit etmek ve CMS'ine özel çözümü üretmek için tarayıcıdan detaylı çalışma profilleri yakalayarak RUM verini otomatik performans analizleriyle genişletir!.

Ölçümden Kök Nedene

Panelin var. LCP: 3,2 s. Sorunun nerede olduğunu biliyorsun. Şimdi nedenini bilmen gerek. Hero görsel mi? Üçüncü taraf script'ler mi? Sunucu yanıt süresi mi? Waterfall'u analiz etmekle, main thread profilini çıkarmakla ve teorileri test etmekle saatler harcayabilirsin. Ya da teşhis motorunun bunu senin yerine yapmasına izin verebilirsin.

CoreDash Teşhis bir sonraki mantıklı adımı atar. Sadece performansı ölçmez. Başarısızlığı tersine mühendislikle analiz eder.

LCP Teşhisi: Dört Aşama, Tek Yanıt

Largest Contentful Paint'i kendini oluşturan dört aşamaya ayırıyoruz: TTFB, Load Delay, Load Duration ve Render Delay. Bir aşama başarısız olduğunda, bunu sadece işaretlemekle kalmıyoruz. Açıklıyoruz.

• Sağlayıcı İlişkilendirmesi: "Yüksek scripting süresi" raporlamıyoruz. HubSpot'un takip script'inin paint'i 150 ms bloke ettiğini veya Google Tag Manager'ın render'ı 300 ms geciktirdiğini bildiriyoruz. Sağlayıcıyı, maliyeti ve etkiyi görürsün.
• Anti-Pattern Tespiti: 14 spesifik mimari hatayı tarıyoruz: LCP görselinin lazy-loading ile yüklenmesi, CSS arka planında gizlenmesi, optimize edilmemiş bir CDN'den yüklenmesi. Denetimlerin kaçırdığı hataları yakalıyoruz.
• Kod Seviyesinde Çözüm: Çözümü üretiyoruz. Eğer LCP görselinde priority hint yoksa, senin için <link rel="preload"> tag'ini yazıyoruz. Bir script render'ı engelliyorsa, defer özniteliğini nereye ekleyeceğini gösteriyoruz. Çözüm kopyala-yapıştır yapmaya hazır.

CLS Teşhisi: Hayalet Hatayı Yakala

Layout shift'ler, yeniden üretilmesi en zor hatalardır. Bir font bir bağlantıda geç yüklenir. Bir reklam mobilde daha yavaş render edilir. Kayma bir kez gerçekleşir ve onu bir daha asla göremezsin.

CoreDash Teşhis her kareyi yakalar. Kaymayı kaydeder, elementi tespit eder ve kök nedenin izini süreriz.

• Element: Sana tam olarak hangi DOM node'unun hareket ettiğini söyleriz. "Header'da bir yerde" değil. Belirli bir class'a sahip belirli <div>.
• Tetikleyici: Neden hareket ettiğini söyleriz. Bir web font, fallback tanımı olmadan swap edildi. Bir banner reklamı, alan ayrılmadan araya girdi. Bir görsel boyutları belirtilmeden yüklendi.
• Çözüm: CSS'i biz yazıyoruz. Görsele aspect-ratio: 16/9 ekle. Font face için font-display: swap ayarla. Reklam kapsayıcısı için min-height: 250px ayır. Kayma bir daha asla gerçekleşmez.

INP Teşhisi: Donmayı Bul

Interaction to Next Paint arayüz tepkiselliğini ölçer. Başarısız olduğunda arayüz donar. Kullanıcı bir butona tıklar ve hiçbir şey olmaz.

RUM verisi sana "INP is poor." uyarısını ve ziyaretçilerin sayfanla nerede etkileşime girdiğini söyler.  Biz ise hangi fonksiyonun main thread'i bloke ettiğini ve bunu nasıl düzelteceğini söyleriz!

• Etkileşimi İzole Et: Tam input event'ini tespit ederiz: bir buton tıklaması, bir form gönderimi, bir tuşa basılması. Hangi etkileşimin başarısız olduğunu biliriz.
• Handler Profilini Çıkar: Event listener'ını ölçeriz. Kendi kodunun çalışma süresini tek bir fonksiyona kadar indirgeyerek gösteririz. Eğer tıklama handler'ın 200 ms'lik senkron bir işlem çalıştırıyorsa, sana bu 200 ms'yi gösteririz.
• Çakışmaları Tespit Et: Bazen kendi kodun hızlıdır, tarayıcı sadece meşguldür. Üçüncü taraf bir analitik kütüphanesi veri işliyor veya bir takip pikseli network isteği tetikliyordur. Kullanıcının etkileşiminden çevrim çalan arka plan görevini işaretleriz.

Körlemesine optimize etmeyi bırakırsın. Gerçekten donmaya neden olan fonksiyonu optimize edersin.

Platforma Özel Çözümler

Genel öneriler faydasızdır.

"Görselleri yeni nesil formatlarda sunun" önerisi, CDN'i kontrol edemeyen bir Shopify satıcısının işine yaramaz. "JavaScript yürütme süresini azaltın" önerisi, sorunun hangi eklentiden kaynaklandığını bilmeyen bir WordPress site sahibine yardımcı olmaz.

CoreDash Teşhis teknoloji yığınını tespit eder ve yerel kod üretir.

WordPress mi? Sana PHP kod parçacığını (snippet) veya değiştirilecek özel eklenti ayarını veririz.
Next.js mi? Sana next.config.js düzenlemesini veririz.
Shopify mı? Hangi Liquid şablonunu düzenleyeceğini söyler ve eklemen gereken satırı tam olarak gösteririz.

Shopify, WordPress, WooCommerce, Magento, Drupal, Squarespace, Wix, Next.js, React, Vue.js ve Nuxt.js platformlarını destekliyoruz.

Tavsiyeler teorik değildir, uygulanabilirdir.

Görmek ve Çözmek Arasındaki Fark

RUM sana sitenin yavaş olduğunu söyler.

CoreDash Teşhis ise Intercom sohbet widget'ının ilk paint sırasında main thread'i 200 ms bloke ettiğini söyler ve yüklemeyi ertelemek için değiştirmen gereken script etiketini verir.

Metrik ile çözüm arasındaki fark işte budur.