Chrome Performans Metrikleri
Chrome’un Performans paneli, uygulamalarımızın çalışma zamanı performansını analiz etmemize yardımcı olacak araçlar sağlar. Herhangi bir uygulamanın performansını analiz ederken, en iyi yöntem tarayıcının gizli modunda yapılır. Bunun nedeni, performans ölçümünün kurulu eklentiler gibi diğer faktörlerden etkilenmemesini sağlamaktır. Tabi bunun için eklentilerin gizli modda aktif olmaması gerekir. Varsayılan olarak aktif değildirler fakat aktif edilebilirler.
Performans panelini kullanarak web sitesinin ilk açılışı hakkında detaylı bilgiye sahip olunabilir. Kayıtların anlık görüntülerini inceleyerek bunlarla ilgili aksiyon alınabilir. Bu ekran görüntüleri, bir sayfanın kayıt işleminin farklı aşamalarında nasıl göründüğünü gösterir. Ayrıca, hangi bilgileri içermesi gerektiğini seçerek kayıtlar özelleştirilebilir.
Profil Oluşturma Sonucunun Analizi
Yukarıdaki resimde icsdefense.net adresinin performans analizi sonucu var. Burada Network, Frames, Main ve başka konular hakkında bilgiler var. Her veri ayrı bir bölümdedir ve bir bölümü genişletmek size ilişkili verileri daha ayrıntılı gösterir.
Uygulamanızdaki animasyonların performansını ölçmek için en önemli metriklerden birine ait veriler içerir. Önerilen hız 60 FPS'dir (saniyedeki kare sayısı) ve üstündeki her şey düşük performansa yol açar. Frames bölümündeki yeşil çubukların üzerine gelindiğinde, belirli bir karenin kare hızı gösterilir ve 60 FPS'nin üzerindeki herhangi bir kare, performans optimizasyonunun yapılacağı anlamına gelir:
Ana iş parçacığındaki etkinlikle ilgili veriler içerir. Bu veriler bir flame şeması şeklinde sunulmaktadır. X ekseni zaman içindeki kaydı temsil eder, Y ekseni ise çağrı yığınını temsil eder. Grafikteki her çubuk bir etkinliği temsil eder ve sürenin uzunluğu çubuğun genişliği gösterir. Üst üste gözüken olaylar, yukarıdan aşağı birbirini tetikleyen olayları gösterir.
First Contentful Paint (FCP): Sayfanın yüklenmeye başlamasından sayfa içeriğinin herhangi bir bölümünün ekranda görüntülenmesine kadar geçen süreyi ölçer. Bu metrik için metin, resimler, <svg> öğeleri veya <canvas> öğeleri ifade eder.
Largest Contentful Paint (LCP): Görünüm (viewport) alanında görünen en büyük içerik öğesinin oluşturma süresini bildirir. İlk 2.5 saniye içinde en büyük içeriğin yüklenmesi tavsiye edilir.
Time to Interactive (TTI): Bu metrik bir sayfanın etkileşimli hale gelmesinin ne kadar sürdüğünü ölçer. Etkileşimli hale gelmesi için:
First Contentful Paint ile ölçülen ilk görüntülenen bölümün yüklenmesi,
Olay işleyicileri (event listeners) en görünür sayfa öğeleri için aktif olur,
Sayfa kullanıcı etkileşimlerine en fazla 50 milisaniye içinde yanıt verir.
Total Blocking Time (TBT): Toplam Engelleme Süresi (TBT) metriği, First Contentful Paint (FCP) ile ana iş parçacığının giriş yanıtını engelleyecek kadar uzun süre bloke edildiği Time to Interactive (TTI) arasındaki toplam süreyi ölçer.
Cumulative Layout Shift (CLS): CLS, sayfanın tüm ömrü boyunca gerçekleşen her beklenmedik eleman kayması için verilen kaydırma puanlarının toplamını ölçer. Görünür elemanlar taşınmaya zorlandığında ortaya çıkar, çünkü sayfaya başka bir eleman aniden eklenir veya yeniden boyutlandırılır.
Düşük bir CLS'nin en yaygın nedenleri
Boyutları olmayan görüntüler
Boyutları olmayan reklamlar, embeds ve iframe'ler
Dinamik olarak enjekte edilen içerik
FOIT/FOUT'a neden olan web yazı tipleri
DOM'u güncellemeden önce ağ yanıtı bekleyen işlemler