Hız aracıyla ilgili gelişmeler: Chrome Geliştirici Zirvesi 2019'da öne çıkanlar

Yeni performans metrikleri, PageSpeed Insights ile Chrome Kullanıcı Deneyimi Raporu (CrUX) güncellemeleri ve daha fazlası.

Elizabeth Sweeny

Chrome Developer Summit'te Paul Ireland ve ben, Lighthouse CI, yeni performans puanı formülü ve daha fazlası ile ilgili güncellemeleri 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 Almanac'ın web ekosistemi analizinden elde edilen bilgiler gibi heyecan verici performans araçları geliştirmeleri sunduk.

Yeni performans metrikleri

Kullanıcı deneyiminin nüanslarını ölçmek, bunun kârlılığınız üzerindeki etkisini ölçmenin ve iyileşmeleri ve gerilemeleri izlemenin anahtarıdır. Zaman içinde, bu nüansları yakalayıp kullanıcı deneyimini ölçme konusundaki boşlukları dolduracak yeni metrikler geliştirildi. Metrik hikayesine en son eklenen iki alan metriği: W3C Web Performance Working Group'ta oluşturulan Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) ve yeni bir lab metriği olan Toplam Engelleme Süresi (TBT).

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, ilk boyama işleminden sonra yükleme deneyimini yakalamak için İlk Anlamlı Boyama (FMP) ve Hız Dizini (SI) 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ğuna bakmanın, bir sayfanın ana içeriğinin ne zaman yüklendiğini daha iyi temsil ettiğini göstermektedir.

Yeni Largest Contentful Paint metriği yakında Lighthouse raporlarında kullanıma sunulacaktır. Bu süre zarfında LCP'yi JavaScript'te ölçebilirsiniz.

Toplam Engelleme Süresi (TBT)

Toplam Engelleme Süresi (TBT) metriği, ana iş parçacığının giriş duyarlılığını engelleyecek kadar uzun süre engellendiği İlk Zengin İçerikli Boyama (FCP) ve Etkileşime Hazır Olma Süresi (TTI) arasında geçen toplam süreyi ölçer.

Bir görev, ana iş parçacığında 50 milisaniyeden uzun süre çalışırsa uzun olarak kabul edilir. Bu sınırı aşan herhangi bir milisaniye, görevi engelleme süresine dahil edilir.

Bir sayfanın Toplam Engelleme Süresi, FCP ve TTI arasında gerçekleşen tüm uzun görevlerin engelleme sürelerinin toplamıdır.

Etkileşime Hazır Olma Süresi, ana iş parçacığının yüklemenin sonraki aşamalarında ne zaman sakinleşeceğini belirlemede başarılı olsa da Toplam Engelleme Süresi, ana iş parçacığının yük boyunca ne kadar gerildiğini ölçmeyi hedefler. Böylece 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 hangi sıklıkla beklenmedik düzen kaymaları ile karşılaştığını ölçer. Beklenmedik içerik hareketi çok can sıkıcı olabilir. Bu yeni metrik, bu durumun kullanıcılarınızın ne sıklıkta gerçekleştiğini ölçerek bu sorunu gidermenize yardımcı olur.

Nasıl hesaplandığını ve nasıl ölçüldüğünü öğrenmek için ayrıntılı Cumulative Layout Shift kılavuzuna göz atın.

Yeni Lighthouse performans puanı formülü, yakında FMP ve FCI'nın önemini azaltacak ve bir sayfanın kullanılabilir olduğunu daha iyi yakalayan üç yeni metriği (LCP, TBT ve CLS) içerecek.

Daha fazla bilgi edinmek için Lighthouse performans puanlaması ve yeni web.dev metrik koleksiyonuna göz atın.

PageSpeed Insights'ta alan verisi (CrUX) eşikleri ayarlandı

Geçtiğimiz yıl boyunca Chrome Kullanıcı Deneyimi (CrUX) verilerinden yararlanarak web alanındaki web performansını analiz ediyoruz. 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.

PageSpeed Insights (PSI), bir siteye ilişkin genel değerlendirme almak amacıyla, alan verilerinin toplam dağılımının belirli bir yüzdelik dilimini söz konusu siteye ait altın sayı olarak kullanır. Daha önce kullanılan eşikler, İlk Zengin İçerikli Boyama için 90. yüzdelik dilim ve İlk Giriş Gecikmesi (FID) için 95. yüzdelik dilimdir.

Örneğin, bir sitenin% 50 hızlı, %30 orta, %20 yavaş FCP dağılımı varsa 90. yüzdelik dilim FCP yavaş bölümdedir. Bu durum, sitenin genel alan puanını yavaşlar.

Bu, web siteleri genelinde daha iyi bir dağıtım sağlayacak şekilde düzenlendi. Yeni döküm:

Örneğin, artık bir sitenin% 50 hızlı, %30 orta, %20 yavaş FCP dağılımı varsa 75. yüzdelik dilim FCP orta bölümdedir ve sitenin genel alan puanı orta düzeydedir.

PageSpeed Insights'ta standart URL yönlendirmeleri

Kullanıcı deneyimini mümkün olduğunca doğru şekilde ölçebilmeniz için PageSpeed Insights ekibi, PSI'ya bir yeniden analiz istemi ekledi. Yeni bir URL'ye yönlendirilen sitelerde, gerçek performansınızla ilgili daha kapsamlı bir görünüm elde etmek 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 kullanarak site sahiplerinin olası kullanıcı deneyimi sorunlarını keşfetmelerine yardımcı olur. Hız raporu, otomatik olarak benzer URL gruplarını "Hızlı", "Orta" ve "Yavaş" paketlere atar ve belirli sorunlar için performans iyileştirmelerinin önceliklendirilmesine yardımcı olur.

Web Almanağı

Açılış konuşmasında, web'in durumu ile ilgili istatistikler ve eğilimleri web topluluğunun uzmanlığıyla eşleştiren yıllık bir proje olan Web Almanac'ın lansmanını duyurduk. Chrome geliştiricileri ve web topluluğundan oluşan 85 kişi, web'le ilgili 20 temel yönün analiz edildiği, sitelerin nasıl oluşturulduğu, sunulduğu ve deneyimlendiği projede çalışmaya gönüllü oldu. Web'deki performansın, JavaScript'in 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'teki performans aracı güncellemeleri hakkında daha fazla bilgi için Hız aracı geliştirmeleri konuşmasını izleyin: