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, Google Analytics 4'te gerçekleştirilen otomatik bir web sitesi denetleme aracıdır geliştiricilerin, sitelerindeki kullanıcı deneyimini iyileştirmeleri için fırsatlar ve teşhisler konusunda yardımcı olur. Chrome Geliştirici Araçları, npm (Düğüm modülü ve KSA olarak) veya bir tarayıcı uzantısı ( Chrome ve Firefox) tıklayın. Pek çok Google ürününü web.dev/measure ve PageSpeed dahil olmak üzere tüm hizmetleri Analizler.

Lighthouse 6.0, npm'de ve Chrome'da hemen kullanılabilir Canary'yi seçin. Lighthouse'dan yararlanan diğer Google hizmetleri ayın sonuna kadar güncellemeyi alabilirsiniz. Bu uygulama, Chrome 84'te (Temmuz ortasında) Chrome'un Kararlı sürümünde kullanıma sunulacak.

Lighthouse Düğümü KSA'yı 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ü, kendiliğinden gerçekleşebilecek pek çok 6.0 değişiklik günlüğünde listelendiğinden emin olun. Ele alacağımız konular: bu makalede daha fazla bilgi bulabilirsiniz.

• Yeni metrikler
• Performans puanı güncellemesi
• Yeni denetimler
• Lighthouse CI
• Yeniden adlandırılmış Chrome Geliştirici Araçları paneli
• Mobil emülasyonu
• Tarayıcı uzantısı
• Bütçeler
• Kaynak konum bağlantıları
• Yakında
• Teşekkür ederiz.

Yeni metrikler

Lighthouse 6.0, rapora üç yeni metrik ekledi. Bu yeni metriklerden ikisi: En büyük Contentful Paint (LCP) ve Cumulative Layout Shift (CLS), Core Web'in laboratuvar uygulamalarıdır. Vitals.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP), algılanan yüklemenin bir ölçümüdür. sahip olacaksınız. Bu, sayfa yükleme sırasında birincil (veya "en büyük") içerik yüklendiğinde ve kullanıcı tarafından görülebilir. LCP, ilk zengin içerikli boyama (FCP)nin önemli bir tamamlayıcısıdır. yükleme deneyiminin en başlangıcını yakalar. LCP, geliştiricilere, uygulama yüklemeleriyle ilgili hızla görebildiğini gösterir. 2,5 saniyeden düşük LCP puanı 'İyi' olarak değerlendirilir.

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

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) bir görsel kararlılık ölçümüdür. Google bir sayfa içeriğinin görsel olarak ne kadar değiştiğini ölçer. Düşük CLS puanı, kullanıcılarının gereksiz içerik değişiklikleri yaşamadığını gösteren geliştiriciler; 0,10’un altında bir CLS puanı 'İyi' olarak değerlendirilir.

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

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

Toplam Engelleme Süresi (TBT)

Toplam Engelleme Süresi (TBT), yüklemenin yanıt verme süresini ölçer ve ana iş parçacığının, girişe yanıt vermeyi engelleyecek kadar uzun süre engellendiği toplam süre. TBT, İlk Zengin İçerikli Boyama (FCP) ile Etkileşime Hazır Olma Süresi arasındaki toplam süreyi ölçer (TTI). TTI için tamamlayıcı bir metriktir ve ana ileti dizisi etkinliğini ölçmede daha fazla ayrıntı sağlar veya kullanıcının sayfanızla etkileşime girmesini engelleyen reklamlar.

Ayrıca, TBT alan metriği First Giriş Gecikmesi ile iyi ilişkilidir. (FID) temel alınmıştır.

Performans puanı güncellemesi

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

Üç yeni metrik eklenmiş olsa da üç eski metrik kaldırıldı: İlk Anlamlı Boyama, İlk CPU Boşta Kalma ve Maksimum Potansiyel İGG. Kalan metriklerin ağırlıkları şu şekilde değiştirildi: Ana iş parçacığı etkileşimini ve düzenin öngörülebilirliğini vurgulayın.

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

Lighthouse 5 ve 6 sürümleri arasındaki puanlama değişiklikleriyle ilgili bazı önemli noktalar:

• TTI'nın ağırlığı% 33'ten%15'e düşürüldü. Bu, doğrudan kullanıcıya yanıt olarak verilmiştir. TTI değişkenliği ve buna neden olan metrik optimizasyonlarındaki tutarsızlıkları ve kullanıcı deneyiminde iyileştirmelerdir. TTI, bir sayfa tamamen hazır olduğunda da yararlı bir sinyaldir etkileşimlidir, ancak bir olarak TBT'yi tamamlayıcı değişkenlik azaltılır. Bu puanlama değişikliğiyle, geliştiricilerin oyun için optimizasyon yapmaya daha etkili bir şekilde teşvik kullanıcı etkileşimi.
• FCP'nin ağırlığı% 23'ten %15'e düşürüldü. Yalnızca ilk piksel olduğunda ölçülür tam bir fikir vermedi. Bunu, kullanıcıların ne zaman etkileşime geçtiklerini ölçmekle birleştirmek yükleme deneyimini daha iyi yansıttığından emin olmanızı sağlar.
• Maksimum Potansiyel İGG kullanımdan kaldırıldı. Artık raporda gösterilmese de JSON dosyasında da mevcuttur. Etkileşiminizi ölçmek için TBT'yi incelemeniz önerilir tercih edebilirsiniz.
• İlk Anlamlı Boyama kullanımdan kaldırıldı. Bu metrik çok değişkendi ve uygulanabilir değildi standartlaştırmaya giden yolumuzdur. Çünkü uygulama, Chrome oluşturma dahili özelliklerine özgüdür. Bu sırada bazı ekipler sitelerinde FMP zamanlamasını faydalı bulur. Ancak bu metrik, ek iyileştirmeler içeriyor.
• TTI'dan yeterince farklı olmadığından ilk CPU Boştalığı kullanımdan kaldırılmıştır. TBT ve TTI artık etkileşimin en önemli metrikleri.
• CLS'nin ağırlığı nispeten düşüktür, ancak gelecekteki ana sürümde bu ağırlığı artırmayı planlıyoruz.

Skorlardaki değişimler

Bu değişiklikler gerçek sitelerin puanlarını nasıl etkiler? Bir analiz kullanılarak yapılan puan değişikliklerinin genel bir veri kümesi siteleri ve bir statik site grubu Eleventy ile geliştirilmiştir. Özetle, sitelerin yaklaşık% 20'si önemli ölçüde daha yüksek yaklaşık% 30'da neredeyse hiç değişiklik yokken, yaklaşık% 50'de ise en az beş puanlık düşüş söz konusudur.

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

• puan ağırlık değişiklikleri
• temel metrik uygulamalarında hata düzeltmeleri
• münferit puan eğrisi değişiklikleri

Puan ağırlığındaki değişiklikler ve üç yeni metriğin kullanıma sunulması, genel puanın büyük kısmını sağladı anlamına gelir. Sürüm 6'da, geliştiricilerin henüz optimize etmedikleri yeni metriklerin önemli bir ağırlığı bulunmaktadır performans puanı. Sürüm 5'teki test topluluğunun ortalama performans puanı 50 civarındayken yeni Toplam Engelleme Süresi ve Largest Contentful Paint metriklerinde ortalama puan yaklaşık 30'du. Bu iki metrik birlikte Lighthouse sürüm 6 performans puanındaki ağırlığın% 50'sini oluşturuyor. Bu nedenle, doğal olarak sitelerin büyük bir yüzdesinde düşüş görüldü.

Temel metrik hesaplamasında yapılan hata düzeltmeleri farklı puanlara neden olabilir. Bu, daha az sitede bulunsa da belirli durumlarda büyük etkileri olabilir. Toplamda sitelerin yaklaşık% 8'i metrik uygulama değişiklikleri nedeniyle bir puan artışı yaşandı ve sitelerin yaklaşık% 4'ü bir puan aldı azalması oldu. Sitelerin yaklaşık% 88'i bu düzeltmelerden etkilenmemiştir.

Bireysel puan eğrisi değişiklikleri de genel puan kaymalarını çok az da olsa etkiledi. Biz Puan eğrisinin HTTPArşiv'deki gözlemlenen metriklerle uyumlu olduğundan emin olun. veri kümesi) kaldırın. Uygulamadaki büyük değişikliklerden etkilenen siteleri hariç tutma, ayrı ayrı metrikler için puan eğrisinde yapılan düzenlemeler, sitelerin yaklaşık% 3'ünün puanlarını yükseltmiştir. skoru düşürdü. Sitelerin yaklaşık% 93'ü bu değişiklikten etkilenmedi.

Skor hesaplayıcı

Size yardımcı olmak için bir puan hesaplayıcısı yayınladık puanlamayı keşfedeceksiniz. Hesap makinesi ayrıca Lighthouse sürüm 5 ile 6 puan. Lighthouse 6.0 ile bir denetim çalıştırdığınızda rapor, hesap makinesi bağlantısıyla birlikte gelir. ve sonuçlarınızı girin.

Yeni denetimler

Kullanılmayan JavaScript

Geliştirici Araçları kodundan kapsam yeni bir denetimde: Kullanılmayan JavaScript.

Bu denetim tamamen yeni değil, yerine eklendi 2017'nin ortalarında gerçekleşirken performans yükü nedeniyle Lighthouse'u mümkün olduğunca hızlı tutmak için varsayılan olarak devre dışı yapmasını sağlar. Bu kapsam verilerinin toplanması şu anda çok daha verimli. Bu nedenle, kapsam verilerinin toplanmasına seçeceğiz.

Erişilebilirlik denetimleri

Lighthouse, çekirdeği olan axe-core kitaplığını kullanarak erişilebilirlik kategorisi. Lighthouse 6.0'da aşağıdaki denetimleri ekledik:

• aria-gizli-gövde
• aria-gizli-odaklama
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• başlık-sıralama
• kopya-kimliği-etkin
• kopya-id-aria

Maskelenebilir simge

Maskelenebilir simgeler, PWA'nız için simgeler oluşturan yeni bir simge biçimidir her tür cihazda harika görünür. PWA'nızın mümkün olduğunca iyi görünmesine yardımcı olmak için yeni bir denetim yaparak manifest.json dosyanızın bu yeni biçimi destekleyip desteklemediğini öğrenebilirsiniz.

Karakter kümesi beyanı

Meta karakter kümesi öğesi, hangi karakter kodlamasının kullanılması gerektiğini tanımlar. bir HTML belgesini yorumlamak için kullanır. Bu öğe eksikse veya dokümanında, tarayıcılar hangi kodlamanın kullanılması gerektiğini tahmin etmek için bir dizi buluşsal yöntem kullanır. tarayıcı yanlış tahminde bulunur ve geç bir meta karakter kümesi öğesi bulunursa ayrıştırıcı genellikle o ana kadar yapılan tüm işleri tamamlayıp baştan başlar; bu da kullanıcı için kötü bir deneyime yol açar. Bu yeni denetim, sayfanın geçerli bir karakter kodlamasına sahip olduğunu ve bu işlemin en baştan ve en baştan tanımlandığını doğrular.

Lighthouse CI

Geçen Kasım ayında CDS'de Bu yıl, açık kaynak kodlu düğüm Lighthouse CI'yı duyurduk. Sürekli entegrasyonunuzdaki her kayıtta Lighthouse sonuçlarını izleyen KSA ve sunucu ve alfa sürümünden bu yana büyük yol katettik. Lighthouse CI'da artık destek de var Travis, Circle, GitLab ve GitHub Actions da dahil olmak üzere birçok CI sağlayıcısı için. Dağıtıma hazır docker resimleri, kurulumu ve yeniden tasarlanan kapsamlı bir kontrol paneli artık her kategori ve metrikteki trendleri gözler önüne seriyor. inceleyebilirsiniz.

başlangıç kılavuzuna bakın.

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

Denetimler panelini Lighthouse paneli olarak yeniden adlandırdık. Yeter artık!

Geliştirici Araçları pencerenizin boyutuna bağlı olarak panel muhtemelen » düğmesinin arkasındadır. Sürükleyebilirsiniz tıklayın.

Komut tuşu ile paneli hızlı bir şekilde açmak için menü:

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

Mobil emülasyonu

Lighthouse, mobil cihazlara öncelik veren bir yaklaşımı benimser. Performans sorunları, normal koşullarda daha fazla mobil koşullar altında, ancak geliştiriciler genellikle bu koşullarda test yapmaz. Bu nedenle, yapılandırmasında mobil emülasyon uygulanır. Emülasyon şunlardan oluşur:

• Yavaş ağ ve CPU koşulları simüle edildi ( Fener).
• Cihaz ekranı emülasyonu (Chrome Geliştirici Araçları'nda bulunanla aynıdır).

Lighthouse, başından beri referans cihaz olarak Nexus 5X'i kullandı. Son yıllarda en çok performans mühendisleri, Moto G4'ü test amacıyla kullanıyor. Lighthouse artık bunu takip ediyor referans cihazını Moto G4 olarak değiştirdi. Pratikte bu, çok da göze çarpacak bir değişiklik değil. ancak bir web sayfası tarafından algılanabilen tüm değişiklikler şunlardır:

• Ekran boyutu, 412x660 pikselden 360x640 piksele değiştirildi.
• Kullanıcı aracısı dizesinde küçük bir değişiklik (daha önce Nexus 5 Build/MRA58N olan cihaz kısmı) şimdi Moto G (4) olacak.

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

Tarayıcı uzantısı

İlgili içeriği oluşturmak için kullanılan Lighthouse için Chrome uzantısı Lighthouse'u yerel olarak çalıştırmak için elverişli bir yol oldu. Maalesef destek hizmeti karmaşıktı. Chrome Geliştirici Araçları Lighthouse panelinin daha iyi bir deneyim olduğunu ve diğer panellerle entegre olduğundan), Chrome OS ana makinesini basitleştirerek uzantısına sahip olur.

Uzantı artık Lighthouse'u yerel olarak çalıştırmak yerine PageSpeed Insights'ı kullanıyor API. Biliyoruz ki, bu, , kullanıcılarımız için yeterli olmayabilir. Temel farklar şunlardır:

• PageSpeed Insights, herkese açık olmayan web sitelerini uzaktan kumandayla çalıştırıldığı için denetleyemez. değil, yerel Chrome örneğiniz için geçerli değildir. Herkese açık olmayan bir web sitesini denetlemeniz gerekiyorsa Geliştirici Araçları Lighthouse panelini veya Node KSA'yı kullanın.
• PageSpeed Insights'ın en son Lighthouse sürümünü kullanacağı garanti edilmez. Raporlarınızda en son sürümde Node CLI'ı kullanın. Tarayıcı uzantısı, yayınlandıktan yaklaşık 1-2 hafta sonra güncellemeyi alır.
• PageSpeed Insights bir Google API'sidir. Bu API'nin kullanılması, Google API Şartları'nın kabul edildiği anlamına gelir. Hizmet. Hizmet şartlarını kabul etmiyor veya kabul edemiyorsanız Geliştirici Araçları Lighthouse panelini kullanın. veya Düğüm KSA'sı.

Neyse ki ürün hikayesini basitleştirmek, diğer mühendislik süreçlerine neden olabilir. Sonuç olarak, Lighthouse Firefox'u kullanıma sunduk. uzantı!

Bütçeler

Lighthouse 5.0, performans bütçelerini aşağıdaki gibi desteklenen eşikler her kaynak türünün ne kadar olduğunu (komut dosyaları, resimler veya css gibi) sağlayabilir.

Lighthouse 6.0 reklamları bütçe oluşturma metrikleri desteği, Böylece artık FCP gibi belirli metrikler için eşikler belirleyebilirsiniz. Şu anda bütçeler yalnızca Node CLI ve Lighthouse CI'ya gönderir.

Kaynak konumu bağlantıları

Lighthouse'un bir sayfa hakkında bulduğu sorunlardan bazıları, her bir sayfa için belirli bir kaynak kodu ve rapor, ilgili dosyayı ve satırı tam olarak belirtir. Bu süreci kolaylaştırmak için Raporda belirtilen konumlar tıklandığında ilgili dosyalar açılır. "Kaynaklar" panelinde görünür.

Ufukta

Lighthouse, aşağıdakiler gibi yeni özellikleri desteklemek için kaynak haritaları toplamayla ilgili denemeler yapmaya başladı:

• JavaScript paketlerinde yinelenen modülleri tespit etme.
• Modern tarayıcılara gönderilen koddaki aşırı çoklu dolguları veya dönüşümleri tespit etme.
• Modül düzeyinde ayrıntı düzeyi sağlamak için kullanılmayan JavaScript denetimi genişletildi.
• İşlem gerektiren modülleri vurgulayan ağaç grafik görselleştirmeleri.
• "Kaynak konuma" sahip rapor öğeleri için orijinal kaynak kodunu görüntüleme.

Bu özellikler, Lighthouse'un gelecekteki bir sürümünde varsayılan olarak etkinleştirilecektir. Şu an için, Lighthouse'un aşağıdaki KSA işaretiyle yapılan deneysel denetimleri:

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 hem sunucu hem de işletim sisteminizin performansını artırmanızı bulabilirsiniz.

Bundan sonra ne yapabilirsiniz?

• Chrome Canary'yi açın ve Lighthouse panelini deneyin.
• Düğüm KSA'sını kullanın: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Lighthouse CI'yı akılda kalıcı bir yolunu sunar.
• Lighthouse denetim belgelerini inceleyin.
• Web'i daha iyi hale getirmenin keyfini çıkarın!

Web konusunda tutkuluyuz ve geliştirici topluluğuyla çalışmayı seviyoruz. Böylece web'in geliştirilmesine yardımcı olun. Lighthouse, açık kaynaklı bir projedir. Tüm bu projeler için Yazım hatası düzeltmelerinden dokümanların yeniden düzenlenmesine ve yepyeni gözden geçireceğiz. Katkıda bulunmak ister misiniz? Lighthouse GitHub deposuna gidin.