Lighthouse 6.0'daki Yenilikler

Yeni metrikler, performans puanı güncellemesi, yeni denetimler ve daha fazlası.

Connor Clark

Bugün Lighthouse 6.0'ı kullanıma sunuyoruz!

Lighthouse, geliştiricilerin, sitelerindeki kullanıcı deneyimini iyileştirmek için fırsat ve teşhisler sunmasına yardımcı olan otomatik bir web sitesi denetleme aracıdır. Chrome Geliştirici Araçları'nda, npm'de (Düğüm modülü ve KSA olarak) veya tarayıcı uzantısı olarak (Chrome ve Firefox'ta) kullanılabilir. web.dev/measure ve PageSpeed Insights dahil olmak üzere birçok Google hizmetini destekler.

Lighthouse 6.0, npm'de ve Chrome Canary'de hemen kullanılabilir. Lighthouse'dan yararlanan diğer Google hizmetleri, güncellemeyi ay sonuna kadar alacaktır. Uygulama, Chrome 84'te (Temmuz ortasında) Chrome'un Kararlı sürümünde kullanıma sunulacaktır.

Lighthouse Düğümü KSA'sını denemek için aşağıdaki komutları kullanın: bash npm install -g lighthouse lighthouse https://www.example.com --view

Lighthouse'un bu sürümü, 6.0 değişiklik günlüğünde listelenen çok sayıda değişiklikle birlikte gelir. Bu makalede önemli noktaları ele alacağız.

• Yeni metrikler
• Performans puanı güncellemesi
• Yeni denetimler
• Lighthouse CI
• Chrome Geliştirici Araçları paneli yeniden adlandırıldı
• Mobil emülasyonu
• Tarayıcı uzantısı
• Bütçeler
• Kaynak konum bağlantıları
• Ufukta
• Teşekkürler

Yeni metrikler

Lighthouse 6.0, rapora üç yeni metrik ekliyor. Bu yeni metriklerden ikisi: Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS), Core Web Vitals'ın laboratuvar uygulamalarıdır.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP), algılanan yükleme deneyiminin bir ölçümüdür. Sayfa yükleme sırasında birincil (veya "en büyük" içerik) içeriğin yüklendiği ve kullanıcı tarafından görülebildiği noktayı işaretler. LCP, yükleme deneyiminin yalnızca en başlangıcını yakalayan İlk Zengin İçerikli Boyama'nın (FCP) önemli bir tamamlayıcısıdır. LCP, geliştiricilere, bir kullanıcının bir sayfanın içeriğini gerçekte ne kadar hızlı görebildiğiyle ilgili bir sinyal sağlar. 2,5 saniyenin altındaki LCP puanı "İyi" olarak kabul edilir.

Daha fazla bilgi için Paul Ireland'ın LCP ile ilgili ayrıntılı incelemesini izleyin.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS), görsel kararlılığın ölçümüdür. Bir sayfa içeriğinin görsel olarak ne kadar yer değiştirdiğini ölçer. Düşük bir CLS puanı, geliştiricilerin kullanıcılarının içerikte gereksiz değişimler yaşamadığını gösterir.0,10'un altındaki bir CLS puanı ise "İyi" olarak kabul edilir.

Laboratuvar ortamındaki CLS, sayfa yükleme işleminin sonuna kadar ölçülür. Ancak sahada, ilk kullanıcı etkileşimine kadar veya tüm kullanıcı girişlerini dahil ederek CLS'yi ölçebilirsiniz.

Daha fazla bilgi için Annie Sullivan'ın CLS ile ilgili ayrıntılı incelemesini izleyin.

Toplam Engelleme Süresi (TBT)

Toplam Engelleme Süresi (TBT), yükleme duyarlılığını ölçer ve ana iş parçacığının giriş duyarlılığını önleyecek kadar uzun süre engellendiği toplam süreyi ölçer. TBT, İlk Zengin İçerikli Boyama (FCP) ile Etkileşime Hazır Olma Süresi (TTI) arasındaki toplam süreyi ölçer. TTI için tamamlayıcı bir metriktir ve bir kullanıcının sayfanızla etkileşim kurma yeteneğini engelleyen ana iş parçacığı etkinliğini ölçmeye daha fazla incelik katar.

Ayrıca TBT, bir Core Web Vital olan First Input Delay (FID) alan metriğiyle iyi ilişkilidir.

Performans puanı güncellemesi

Lighthouse'taki performans puanı, bir sayfanın hızını özetlemek için birden fazla metriğin ağırlıklı bir şekilde karışımından hesaplanır. 6.0 performans puanı formülü aşağıdaki gibidir.

Aşama	Metrik Adı	Metrik Ağırlığı
Erken (%15)	First Contentful Paint (FCP)	%15
Orta (%40)	Hız Endeksi (SI)	%15
	Largest Contentful Paint (LCP)	%25
Geç (%15)	Etkileşime Hazır Olma Süresi (TTI)	%15
Ana İş Parçacığı (%25)	Toplam Engelleme Süresi (TBT)	%25
Tahmin edilebilirlik (%5)	Cumulative Layout Shift (CLS)	%5

Üç yeni metrik eklenmiş olmakla birlikte, üç eski metrik kaldırılmıştır: İlk Anlamlı Boya, İlk CPU Boşta ve Maksimum Olası FID. Kalan metriklerin ağırlıkları, ana iş parçacığı etkileşimini ve düzenin tahmin edilebilirliğini vurgulamak için değiştirildi.

Karşılaştırma yapabilmeniz için aşağıda sürüm 5 puanlaması verilmiştir:

Aşama	Metrik Adı	Ağırlık
Erken (%23)	First Contentful Paint (FCP)	%23
Orta (%34)	Hız Endeksi (SI)	%27
	İlk Anlamlı Boyama (FMP)	%7
Tamamlandı (%46)	Etkileşime Hazır Olma Süresi (TTI)	%33
	İlk CPU Boşta (FCI)	%13
Ana İş Parçacığı	Maksimum Potansiyel FID	%0

Lighthouse 5 ve 6 sürümleri arasındaki puan değişiklikleriyle ilgili öne çıkan bazı noktalar:

• TTI'nın ağırlığı% 33'ten%15'e düşürüldü. Bunun nedeni, TTI değişkenliği hakkındaki kullanıcı geri bildirimlerinin yanı sıra metrik optimizasyonlarında kullanıcı deneyiminde iyileştirmelere yol açan tutarsızlıklardır. TTI, bir sayfa tamamen etkileşimli olduğunda yine de yararlı bir sinyaldir ancak destek olarak TBT içerir; değişkenlik azaltılır. Bu puanlama değişikliğiyle, geliştiricilerin kullanıcı etkileşimi için optimizasyon yapmak üzere daha etkili bir şekilde teşvik edileceğini umuyoruz.
• FCP'nin ağırlığı% 23'ten %15'e düşürüldü. Yalnızca ilk pikselin boyandığında ölçülmesi (FCP) bize eksiksiz bir resim sağlamadı. Bunu, kullanıcıların önemseme olasılığı en yüksek olan öğeleri (LCP) ne zaman gördüklerini ölçmekle birleştirmek, yükleme deneyimini daha iyi yansıtır.
• Max Potential FID kullanımdan kaldırıldı. Artık raporda gösterilmez, ancak JSON dosyasında hâlâ mevcuttur. Etkileşiminizi ölçmek için artık mpFID yerine TBT'ye bakmanız önerilir.
• First Meaningful Paint kullanımdan kaldırıldı. Bu metrik çok fazla değişkendi ve uygulama Chrome'un dahili oluşturmaya özel olması nedeniyle standartlaştırmaya uygun bir yol sunmadı. Bazı ekipler FMP zamanlamasının sitelerinde yararlı olduğunu düşünse de bu metrik için ek iyileştirmeler söz konusu değildir.
• İlk CPU Boşta Kalma özelliği kullanımdan kaldırılmıştır çünkü TTI'dan yeterince farklı değildir. TBT ve TTI, etkileşim için artık en çok başvurulan metriklerdir.
• CLS'nin ağırlığı nispeten düşük olsa da gelecekteki bir ana sürümde bu ağırlığı artırmayı umuyoruz.

Skorlardaki değişiklikler

Bu değişiklikler gerçek sitelerin puanlarını nasıl etkiler? İki veri kümesi kullanarak puan değişikliklerinin bir analizini yayınladık: genel bir site kümesi ve Eleventy ile oluşturulmuş bir statik siteler. Özetle, sitelerin yaklaşık% 20'si fark edilir düzeyde daha yüksek puanlar, yaklaşık% 30'unda neredeyse hiç değişiklik olmaz ve yaklaşık% 50'sinde en az beş puanlık düşüş görülür.

Puan değişiklikleri üç temel bileşene ayrılabilir:

• ağırlık değişimlerini puanla
• temel metrik uygulamalarına yönelik hata düzeltmeleri
• tek tek puan eğrisi değişiklikleri

Puan ağırlığı değişiklikleri ve üç yeni metriğin kullanıma sunulması, genel puan değişikliklerinin büyük kısmına neden oldu. Geliştiricilerin henüz optimize etmediği yeni metrikler, sürüm 6 performans puanında önemli bir ağırlık taşır. Test derlemesinin 5. sürümünde ortalama performans puanı 50 civarındayken yeni Toplam Engelleme Süresi ve Largest Contentful Paint metriklerindeki ortalama puanlar yaklaşık 30'du. Bu iki metrik birlikte, Lighthouse sürüm 6 performans puanının ağırlığının% 50'sini oluşturduğundan doğal olarak sitelerin büyük bir yüzdesinde düşüş görülmüştür.

Temel metrik hesaplamasında yapılan hata düzeltmeleri, farklı puanlara neden olabilir. Bu durum, görece az sayıda siteyi etkiler ancak belirli durumlarda önemli ölçüde etkisi olabilir. Genel olarak, metrik uygulama değişiklikleri nedeniyle sitelerin yaklaşık% 8'inin puanında iyileşme görülürken sitelerin yaklaşık% 4'ünde ise metrik uygulama değişikliklerine bağlı bir puan düşüşü yaşanmıştır. Sitelerin yaklaşık% 88'i bu düzeltmelerden etkilenmemiştir.

Tek tek puan eğrisi değişiklikleri çok küçük olmakla birlikte genel puan değişimlerini de etkiledi. Puan eğrisinin HTTPArşiv veri kümesinde gözlemlenen metriklerle belirli aralıklarla uyumlu olmasını sağlarız. Önemli uygulama değişikliklerinden etkilenen siteler hariç tutulduğunda, tek tek metrikler için puan eğrisinde küçük ayarlamalar yapılması sitelerin puanlarını yaklaşık% 3 artırdı ve sitelerin yaklaşık% 4'ünün puanlarını düşürdü. Sitelerin yaklaşık% 93'ü bu değişiklikten etkilenmemiştir.

Puan hesaplayıcı

Performans puanlamayı keşfetmenize yardımcı olmak için bir puan hesaplayıcı yayınladık. Hesap makinesi ayrıca Lighthouse 5 ve 6 sürümlerinin puanlarını karşılaştırmanızı sağlar. Lighthouse 6.0 ile bir denetim gerçekleştirdiğinizde rapor, sonuçlarınızın doldurulmuş olduğu hesap makinesine bir bağlantıyla birlikte gelir.

Ölçümü yükseltmesi için Ana Tudor'a çok teşekkür ederiz.

Yeni denetimler

Kullanılmayan JavaScript

Yeni bir denetimde DevTools kod kapsamını kullanıyoruz: Kullanılmayan JavaScript.

Bu denetim tamamen yeni değildir: 2017'nin ortalarında eklendi ancak performans yükü nedeniyle Lighthouse'u mümkün olduğunca hızlı tutmak için varsayılan olarak devre dışı bırakıldı. Bu kapsam verilerini toplamak artık çok daha verimli. Bu nedenle varsayılan olarak bu verileri etkinleştirmek konusunda rahatız.

Erişilebilirlik denetimleri

Lighthouse, erişilebilirlik kategorisini desteklemek için muhteşem axe-core kitaplığını kullanır. Lighthouse 6.0'a aşağıdaki denetimleri ekledik:

• aria-gizli-gövde
• aria-gizli-odaklama
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• yinelenen-kimlik-etkin
• yinelenen-kimlik-aria

Maskelenebilir simge

Maskelenebilir simgeler, PWA'nızın simgelerinin tüm cihaz türlerinde mükemmel görünmesini sağlayan yeni bir simge biçimidir. PWA'nızın mümkün olduğunca iyi görünmesine yardımcı olmak için manifest.json dosyanızın bu yeni biçimi destekleyip desteklemediğini kontrol edecek yeni bir denetlemeyi kullanıma sunduk.

Karakter kümesi bildirimi

Meta karakter kümesi öğesi, bir HTML dokümanını yorumlamak için hangi karakter kodlamasının kullanılması gerektiğini tanımlar. Bu öğe yoksa veya belgede geç bildirildiyse, tarayıcılar hangi kodlamanın kullanılması gerektiğini tahmin etmek için bir dizi bulgudan yararlanır. Bir tarayıcı yanlış tahminde bulunursa ve geç bir meta karakter kümesi öğesi bulunursa ayrıştırıcı genellikle o ana kadar yapılan tüm işi atar ve baştan başlar, bu da kullanıcının kötü deneyimler yaşamasına yol açar. Bu yeni denetim, sayfanın geçerli bir karakter kodlamasına sahip olduğunu ve sayfanın başında ve öncesinde tanımlandığını doğrular.

Deniz Feneri CI

Geçen Kasım'da, sürekli entegrasyon ardışık düzeninizdeki her kayıtta Lighthouse sonuçlarını izleyen açık kaynak Node KSA ve sunucu olan Lighthouse CI'yı duyurduk ve alfa sürümünden bu yana çok yol katettik. Lighthouse CI artık Travis, Circle, GitLab ve GitHub Actions da dahil olmak üzere birçok CI sağlayıcısını desteklemektedir. Dağıtmaya hazır docker görüntüleri, kurulumu kolaylaştırır. Kontrol panelinin kapsamlı yeniden tasarımı artık Lighthouse'daki her kategori ve metrikteki trendleri ayrıntılı analiz için ortaya çıkarır.

Başlangıç kılavuzumuzu takip ederek projenizde Lighthouse CI'yı hemen kullanmaya başlayın.

Chrome Geliştirici Araçları paneli yeniden adlandırıldı

Denetimler panelini Lighthouse paneli olarak yeniden adlandırdık. Bu kadar konuşma yeter!

DevTools pencerenizin boyutuna bağlı olarak, panel büyük olasılıkla » düğmesinin arkasındadır. Sıralamayı değiştirmek için sekmeyi sürükleyebilirsiniz.

Paneli Komut menüsü ile hızlı bir şekilde görüntülemek için:

1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Komut menüsünü açmak için Control+Shift+P (veya Mac'te Command+Shift+P) tuşuna basın.
3. "Lighthouse" yazmaya başlayın.
4. Enter tuşuna basın.

Mobil emülasyonu

Lighthouse, mobil cihazlara öncelik veren bir yaklaşım benimsemiştir. Performans sorunları tipik mobil cihaz koşullarında daha belirgin olsa da geliştiriciler genellikle testi bu koşullarda gerçekleştirmezler. Bu nedenle Lighthouse'daki varsayılan yapılandırma mobil emülasyon uygular. Emülasyon şunları içerir:

• Yavaş ağ ve CPU koşulları simülasyonu (Lantern adı verilen bir simülasyon motoru aracılığıyla).
• Cihaz ekranı emülasyonu (Chrome Geliştirici Araçları'nda bulunanla aynıdır).

Başından beri Lighthouse, referans cihazı olarak Nexus 5X'i kullanmıştır. Son yıllarda çoğu performans mühendisi Moto G4'ü test amacıyla kullanmaktadır. Lighthouse bu isteği takip ediyor ve referans cihazını Moto G4 olarak değiştirdi. Pratikte bu değişiklik pek fark edilmemekle birlikte, bir web sayfasının algılayabileceği tüm değişiklikler şunlardır:

• 412x660 piksel olan ekran boyutu 360x640 piksel olarak değiştirildi.
• Kullanıcı aracısı dizesinde küçük bir değişiklik yapıldı. Önceden Nexus 5 Build/MRA58N olan cihaz bölümü artık Moto G (4) olacak.

Chrome 81'den itibaren Moto G4, Chrome Geliştirici Araçları cihaz emülasyon listesinde de kullanılabilmektedir.

Tarayıcı uzantısı

Lighthouse için Chrome uzantısı, Lighthouse'u yerel olarak çalıştırmanın kolay bir yolu olmuştur. Maalesef desteklenmesi karmaşıktı. Chrome Geliştirici Araçları Lighthouse paneli daha iyi bir deneyim sunduğundan (rapor diğer panellerle entegre olduğundan) Chrome uzantısını basitleştirerek mühendislik ek yükümüzü azaltabileceğimizi düşündük.

Uzantı artık Lighthouse'u yerel olarak çalıştırmak yerine PageSpeed Insights API'sini kullanıyor. Bunun, bazı kullanıcılarımız için yeterli bir alternatif olmayacağının farkındayız. Temel farklar şunlardır:

• PageSpeed Insights, yerel Chrome örneğiniz yerine uzak bir sunucu üzerinden çalıştırıldığı için herkese açık olmayan web sitelerini denetleyemez. Herkese açık olmayan bir web sitesini denetlemeniz gerekirse Geliştirici Araçları Lighthouse panelini veya Node CLI'yi kullanın.
• PageSpeed Insights'ın en son Lighthouse sürümünü kullanacağı garanti edilmez. En yeni sürümü kullanmak istiyorsanız Node KSA'yı kullanın. Tarayıcı uzantısı, güncellemeyi, kullanıma sunulduktan yaklaşık 1-2 hafta sonra alır.
• PageSpeed Insights bir Google API'sidir ve bu API'yi kullanmak, Google API Hizmet Şartları'nı kabul ettiğiniz anlamına gelir. Hizmet şartlarını kabul etmiyor veya kabul edemiyorsanız DevTools Lighthouse panelini veya Node CLI'ı kullanın.

Neyse ki ürün hikayesini basitleştirmek, diğer mühendislik sorunlarına odaklanmamıza olanak tanıdı. Bunun sonucunda, Lighthouse Firefox uzantısını kullanıma sunduk!

Bütçe sayısı

Lighthouse 5.0, bir sayfanın her bir kaynak türünden ne kadarının (komut dosyaları, resimler veya CSS gibi) yayınlanabileceğine dair eşik eklenmesini destekleyen performans bütçelerini kullanıma sundu.

Lighthouse 6.0'da bütçe metrikleri için destek eklendiğinden FCP gibi belirli metrikler için eşikler belirleyebilirsiniz. Şimdilik bütçeler yalnızca Node CLI ve Lighthouse CI için kullanılabilmektedir.

Kaynak konum bağlantıları

Lighthouse'un bir sayfa hakkında bulduğu sorunlardan bazıları, belirli bir kaynak kodu satırına kadar geriye doğru izlenebilir. Rapor, ilgili dosyanın tam halini ve satırını belirtir. Bunu Geliştirici Araçları'nda incelemeyi kolaylaştırmak için raporda belirtilen konumları tıkladığınızda ilgili dosyalar Kaynaklar panelinde açılır.

DevTools, soruna neden olan kod satırını tam olarak gösterir.

Ufukta

Lighthouse, aşağıdakiler gibi yeni özellikleri desteklemek için kaynak haritaları toplamayı denemeye başladı:

• JavaScript paketlerinde yinelenen modüllerin algılanması.
• Modern tarayıcılara gönderilen kodlardaki aşırı sayıda çoklu dolguyu veya dönüşümü tespit etme.
• Modül düzeyinde ayrıntı sağlamak için Kullanılmayan JavaScript denetiminin kapsamını genişletme.
• İşlem gerektiren modülleri vurgulayan ağaç grafikli görseller.
• "Kaynak konumu" olan rapor öğeleri için orijinal kaynak kodu gösteriliyor.

Belirli paketlenmiş modüllerdeki kullanılmayan kodları göstermek için kaynak eşlemelerini kullanan Kullanılmayan JavaScript denetimi.

Bu özellikler, Lighthouse'un gelecekteki bir sürümünde varsayılan olarak etkinleştirilecektir. Şimdilik Lighthouse'un deneysel denetimlerini aşağıdaki CLI işaretiyle görüntüleyebilirsiniz:

lighthouse https://web.dev --view --preset experimental

Teşekkürler!

Lighthouse'u kullandığınız ve geri bildirimde bulunduğunuz için teşekkür ederiz. Geri bildiriminiz Lighthouse'u iyileştirmemize yardımcı olur ve Lighthouse 6.0'ın web sitelerinizin performansını iyileştirmenizi kolaylaştıracağını umuyoruz.

Şimdi ne yapabilirsiniz?

• Chrome Canary'yi açın ve Lighthouse panelini deneyin.
• npm install -g lighthouse && lighthouse https://yoursite.com --view düğüm KSA'sını kullanın.
• Projenizle birlikte Lighthouse CI'yı çalıştırın.
• Lighthouse denetim belgelerini inceleyin.
• Web'i daha iyi hale getirin, iyi eğlenceler!

Web konusuna önem veriyoruz ve web'i iyileştirmeye yardımcı olacak araçlar geliştirmek için geliştirici topluluğuyla birlikte çalışmayı seviyoruz. Lighthouse bir açık kaynak projesidir. Yazım hatası düzeltmelerinden belgelerin yeniden düzenlenmesine ve yepyeni denetimlere kadar her konuda bize yardımcı olan herkese çok teşekkür ederiz. Katkıda bulunmak ister misiniz? Lighthouse GitHub deposuna göz atın.