Yeni performans metrikleri, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu (CrUX) güncellemeleri ve daha fazlası.
Paul Irish ve ben, Chrome Geliştirici Zirvesi'nde Lighthouse'ta yapılan güncellemeleri (Lighthouse CI, yeni performans puanı formülü ve daha fazlası) duyurduk. Büyük Lighthouse haberlerinin yanı sıra, yeni performans metrikleri, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu (CrUX) güncellemeleri ve Web Almanağı'nın web ekosistemi analizinden elde edilen bilgiler dahil olmak üzere performans aracı oluşturma konusundaki heyecan verici gelişmelere yer verdik.
Yeni performans metrikleri
Kullanıcı deneyiminin ayrıntılarını ölçmek, bu deneyimin kârlılığınız üzerindeki etkisini ölçmenin ve iyileştirmeleri ve gerilemelerin takibini yapmanın anahtarıdır. Zaman içinde, bu nüansları yakalamak ve kullanıcı deneyimini ölçmedeki boşlukları doldurmak için yeni metrikler geliştirildi. Metrik hikayesine en son eklenenler, W3C Web Performansı Çalışma Grubu'nda geliştirilmekte olan iki sahada kullanılan metrik (Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS)) ve yeni bir laboratuvar metriği (Total Blocking Time (TBT)) oldu.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP), en büyük içerik öğesinin görüntü alanında görünür hale geldiği zamanı bildirir.
Largest Contentful Paint'ten önce First Meaningful Paint (FMP) ve Speed Index (SI), ilk boyamadan sonraki yükleme deneyimini yakalamak için kullanılıyordu ancak bu metrikler karmaşıktır ve genellikle sayfanın ana içeriğinin ne zaman yüklendiğini tanımlamaz. Araştırmalar, sadece sayfadaki en büyük öğenin ne zaman oluşturulduğunun, bir sayfanın ana içeriğinin yüklendiği zamanı daha iyi temsil ettiğini göstermiştir.
Yeni Largest Contentful Paint metriği yakında Lighthouse raporlarında kullanıma sunulacak. Bu süre zarfında JavaScript'te LCP'yi ölçebilirsiniz.
Toplam Engelleme Süresi (TBT)
Total Blocking Time (TBT) metriği, ilk zengin içerikli boyama (FCP) ile etkileşime hazır olma süresi (TTI) arasındaki toplam süreyi ölçer. Bu süre, ana iş parçacığının girişe yanıt vermeyi önleyeceği kadar uzun süre engellendiği süredir.
Ana iş parçacığında 50 milisaniyeden uzun süre çalışan görevler uzun görev olarak kabul edilir. Bu milisaniyeyi aşan herhangi bir milisaniye, görevi engelleme süresine denk gelir.
Bir sayfanın Toplam Engelleme Süresi, FCP ile TTI arasında gerçekleşen tüm uzun görevlerin engelleme sürelerinin toplamıdır.
Etkileşime Geçiş Süresi, ana iş parçacığının yükleme sırasında ne zaman sakinleştiğini belirlemede iyi bir performans gösterir. Toplam Engelleme Süresi ise ana iş parçacığının yükleme sırasında ne kadar gergin olduğunu ölçmeyi amaçlar. Bu sayede TTI ve TBT birbirini tamamlar ve denge sağlar.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS), bir sayfanın görsel kararlılığını ölçer ve kullanıcıların ne sıklıkla beklenmedik düzen değişimleri yaşadığını ölçer. İçeriğin beklenmedik şekilde hareket etmesi can sıkıcı olabilir. Bu yeni metrik, kullanıcılarınızda ne sıklıkta gerçekleştiğini ölçerek bu sorunu gidermenize yardımcı olur.
Kümülatif Düzen Değişikliği ile ilgili ayrıntılı kılavuzu inceleyerek metriğin nasıl hesaplandığını ve nasıl ölçüldüğünü öğrenebilirsiniz.
Yeni Lighthouse performans puanı formülü, yakında FMP ve FCI'nın önemini azaltacak ve bir sayfa kullanılabilir hissettiğinde daha iyi yakaladıkları için LCP, TBT ve CLS adlı üç yeni metriği içerecektir.
Daha fazla bilgi edinmek için Lighthouse performans puanlamasına ve yeni web.dev metrik koleksiyonuna göz atın.
PageSpeed Insights'ta alan verileri (CrUX) eşikleri ayarlandı
Geçtiğimiz yıl boyunca Chrome Kullanıcı Deneyimi (CrUX) verileri aracılığıyla sahada web performansını analiz ettik. Bu verilerden elde edilen analizlerle, bir web sitesini alan performansında "yavaş", "orta" veya "hızlı" olarak etiketlemek için kullandığımız eşikleri yeniden değerlendirdik.
Bir sitenin genel değerlendirmesini yapmak için Sayfa Hızı Analizleri (PSI), alan verilerinin toplam dağılımının belirli bir yüzdelik dilimini o sitenin altın sayısı olarak kullanır. Önceki eşikler, İlk İçerikli Boyama için 90. yüzdelik dilim ve İlk Giriş Gecikmesi (FID) için 95. yüzdelik dilimdi.
Örneğin, bir sitenin FCP dağılımı %50 hızlı, %30 orta, %20 yavaş ise %90'ıncı yüzdelik dilimdeki FCP yavaş bölümünde yer alır ve sitenin genel alan puanını yavaş yapar.
Bu, web siteleri arasında daha iyi bir dağılım elde etmek için düzenlendi. Yeni döküm şu şekildedir:
| Metrik | Genel Yüzdelik Dilimi | Hızlı (ms) | Orta (ms) | Yavaş (ms) |
| FCP | 75. yüzdelik dilim | 1000 | 1000-3000 | 3000+ |
| FID | 95. yüzdelik dilim | 100 | 100-300 | 300+ |
Örneğin, bir sitenin FCP dağılımı %50 hızlı, %30 orta, %20 yavaş ise 75. yüzdelik dilimdeki FCP orta bölümde yer alır ve sitenin genel alan puanı orta olur.
PageSpeed Insights'ta standart URL yönlendirmeleri
PageSpeed Insights ekibi, kullanıcı deneyimini mümkün olduğunca doğru bir şekilde ölçmenizi sağlamak için PSI'ye yeniden analiz istemi ekledi. Yeni bir URL'ye yönlendirilen siteler için gerçek performansınızın daha kapsamlı bir görünümü için raporu açılış URL'sinde yeniden çalıştırmanız istenir.
Yeni Search Console Hız raporunda CrUX
Search Console, yeni Hız raporunu Chrome Geliştirici Zirvesi'nden bir hafta önce kullanıma sundu. Chrome Kullanıcı Deneyimi Raporu'ndaki verileri, site sahiplerinin olası kullanıcı deneyimi sorunlarını keşfetmesine yardımcı olmak için kullanır. Hız raporu, benzer URL gruplarını otomatik olarak "Hızlı", "Orta" ve "Yavaş" paketlerine atar ve belirli sorunlar için performans iyileştirmelerine öncelik verilmesine yardımcı olur.
Web Almanağı
Açılış konuşmasında, web'in durumuyla ilgili istatistikleri ve trendleri web topluluğunun uzmanlığıyla bir araya getiren yıllık bir proje olan Web Almanağı'nın kullanıma sunulduğunu duyurduk. Chrome geliştiricilerinden ve web topluluğundan oluşan 85 katılımcı, sitelerin nasıl oluşturulduğunu, yayınlandığını ve deneyimlendiğini ele alan web'le ilgili 20 temel yönü analiz eden projede gönüllü olarak çalıştı. Web'deki performans, JavaScript ve üçüncü taraf kodunun durumu hakkında daha fazla bilgi edinmek için Web Almanağı'nı keşfetmeye başlayın.
Daha fazla bilgi
Chrome Developer Summit'te sunulan performans aracı güncellemeleri hakkında daha ayrıntılı bilgi için Speed tooling evolutions konuşmasını (Hız araçları geliştirmeleri) izleyin: