Sayfa Performansı herhangi bir web sayfasının anında performans genel bakışını sağlar — yükleme zamanlama metrikleri (FCP, DOMContentLoaded, tam yükleme, TTI), DOM istatistikleri (öğe sayısı, iç içe geçme derinliği, olay dinleyicileri) ve JavaScript, CSS, resimler, yazı tipleri ve diğer varlıkların sayısını ve boyutunu gösteren kaynak dökümü. Renk kodlu bir performans puanı hızlı bir sağlık göstergesi verir.
Lighthouse veya WebPageTest ile performans profillemesi derin analiz sağlar ancak çalıştırılması zaman alır ve ezici raporlar üretir. Bazen sadece hızlı bir yanıta ihtiyacınız vardır: "Bu sayfa hızlı mı yoksa yavaş mı? En büyük sorun nedir?" Sayfa Performansı size bu anında genel bakışı verir. Tarayıcının Performance API ve Navigation Timing API'sinden zamanlama verilerini okur (zaten toplanmış veriler — ek sayfa yükleme gerekmez) ve bunları temiz, görsel bir panoda sunar. Üst bölüm anahtar zamanlama metriklerini gösterir: First Contentful Paint (ilk içerik göründüğünde), DOMContentLoaded (HTML tam olarak ayrıştırıldığında), Tam Yükleme (tüm kaynaklar bittiğinde) ve Time to Interactive (sayfa yanıt verir hale geldiğinde). Her metrik renk kodludur — hızlı için yeşil, orta için sarı, yavaş için kırmızı — Web Vitals eşiklerine dayalı. Aşağıda, bir kaynak dökümü, JavaScript, CSS, resimler, yazı tipleri ve diğer kaynak türlerine ne kadar bant genişliği harcandığını, kolay karşılaştırma için görsel çubuk grafiklerle gösterir. DOM istatistikleri bölümü toplam öğe sayısını, maksimum iç içe geçme derinliğini ve olay dinleyici sayısını gösterir — işleme performansını etkileyen DOM karmaşıklığı göstergeleri.
First Contentful Paint (FCP), DOMContentLoaded, Tam Sayfa Yükleme ve Time to Interactive (TTI) — en önemli dört performans metriğini gösterir. Her biri yerleşik Web Vitals eşiklerine dayalı olarak renk kodludur: yeşil (hızlı), sarı (orta), kırmızı (yavaş).
Her kaynak türünün sayısını ve toplam boyutunu gösteren görsel çubuk grafik: JavaScript dosyaları, CSS stil sayfaları, resimler, yazı tipleri ve diğer varlıklar. Hangi kaynak türünün sayfa ağırlığına en çok katkıda bulunduğunu anında görün.
Toplam DOM öğe sayısını, maksimum iç içe geçme derinliğini ve toplam olay dinleyici sayısını gösterir. Büyük DOM boyutları (2000+ öğe) ve derin iç içe geçme (15+ seviye) potansiyel performans darboğazları olarak işaretlenir.
Tek bir 0-100 puanı sayfanın performans sağlığını özetler, renk kodlu yeşil (85+), sarı (50-84) veya kırmızı (0-49). Zamanlama metriklerinin ve kaynak verimliliğinin ağırlıklı kombinasyonuna dayanır.
İndirilen tüm kaynakların birleşik boyutunu MB olarak gösterir. Kategoriye göre ayrılmıştır, böylece 842 KB'ın JavaScript olduğunu, 245 KB'ın resimler olduğunu ve 128 KB'ın CSS olduğunu görebilirsiniz — en ağır katkıda bulunanları belirliyor.
Performans verilerini tarayıcının Performance API'sinden okur — normal sayfa yüklemesi sırasında zaten toplanan veriler. Sentetik yeniden test yok, ek ağ istekleri yok ve aracı çalıştırmaktan performans etkisi yok.
Herhangi bir sayfayı açın ve anında performans genel bakışı alın. Hızlı mı (yeşil puan), orta mı (sarı) yoksa yavaş mı (kırmızı)? Pano buna bir saniyeden kısa sürede yanıt verir — Lighthouse'un çalışmasını beklemeden.
Sayfa yavaşsa, kaynak dökümü nedenini gösterir. 1.2 MB JavaScript mi? İşte darboğaz. 800 KB optimize edilmemiş resim mi? İşte düzeltme. Görsel döküm en ağır katkıda bulunanları belirgin kılar.
Optimizasyonlar yapmadan önce Sayfa Performansını çalıştırın, metrikleri not edin. Değişikliklerinizi yapın, yeniden yükleyin ve tekrar çalıştırın. Optimizasyonlarınızın beklenen etkiye sahip olduğunu doğrulamak için FCP, yükleme süresi ve toplam sayfa ağırlığını karşılaştırın.
Sitenizde ve rakiplerinizin sitelerinde Sayfa Performansını çalıştırın. Yükleme sürelerini, sayfa ağırlıklarını ve kaynak dağılımlarını karşılaştırın. Rakipler daha az JavaScript mi gönderiyor? Resimleri daha iyi optimize edilmiş mi?
Geliştirme sırasında aracı anahtar sayfalarda düzenli olarak çalıştırın. Performans puanı düşerse veya sayfa ağırlığı aniden artarsa, bir geriye gidiş getirdiniz — üretime ulaşmadan önce yakalayın.
DevSuite Pro yüzen yuvasını açın ve Sayfa Performansı simgesine tıklayın. Pano mevcut sayfa yüklemesi için performans verileriyle anında görünür.
Üstteki dört anahtar zamanlama metriğini kontrol edin: FCP, DOMContentLoaded, Tam Yükleme ve TTI. Yeşil değerler hızlı, sarı orta, kırmızı iyileştirmeye ihtiyaç duyar.
Hangi varlık türünün en ağır olduğunu görmek için kaynak çubuk grafiğine bakın. JavaScript genellikle en büyük katkıda bulunandır — JS 500 KB'ın üzerindeyse, kod bölümleme veya tembel yükleme düşünmeye değer olabilir.
DOM istatistiklerini inceleyin. Öğe sayısı 1500'ü aşıyorsa veya iç içe geçme derinliği 15'i aşıyorsa, işleme performansını iyileştirmek için biçimlendirmeyi basitleştirmeyi düşünün.
Genel puan hızlı bir karşılaştırma sağlar. İyileştirmeyi ölçmek için optimizasyonlardan önce ve sonra aracı çalıştırın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
