Lighthouse 6.0'daki Yenilikler

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

Connor Clark
Connor Clark

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

Lighthouse, geliştiricilere sitelerinin kullanıcı deneyimini iyileştirmek için fırsatlar ve teşhisler sunan otomatik bir web sitesi denetim aracıdır. Chrome Geliştirici Araçları, npm (Node modülü ve CLI olarak) veya tarayıcı uzantısı (Chrome ve Firefox'ta) olarak kullanılabilir. PageSpeed Insights da dahil olmak üzere birçok Google hizmetinde kullanılır.

Lighthouse 6.0, npm'de ve Chrome Canary'da hemen kullanılabilir. Lighthouse'tan yararlanan diğer Google hizmetleri de güncellemeyi ay sonuna kadar alacak. Bu özellik, Chrome 84'te (Temmuz ayının ortasında) Chrome'un kararlı sürümüne eklenecektir.

Lighthouse Node CLI'yi denemek için aşağıdaki komutları kullanın: bash npm install -g lighthouse lighthouse https://www.example.com --view

Lighthouse'ın bu sürümünde, 6.0 sürümünün değişiklik günlüğünde listelenen çok sayıda değişiklik bulunmaktadır. Bu makalede öne çıkan noktaları ele alacağız.

Yeni metrikler

Lighthouse 6.0 metrikleri.

Lighthouse 6.0, rapora üç yeni metrik ekler. Bu yeni metriklerden ikisi (Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS)) Önemli Web Verileri'nin laboratuvarda uygulanmış halidir.

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çeriğin yüklendiği ve kullanıcı tarafından görülebildiği noktayı işaretler. LCP, yalnızca yükleme deneyiminin en başındaki durumu yakalayan İlk Zengin İçerikli Boyama'nın (FCP) önemli bir tamamlayıcısıdır. LCP, geliştiricilere kullanıcının bir sayfanın içeriğini ne kadar hızlı görebileceği hakkında bir sinyal sağlar. 2,5 saniyenin altındaki LCP puanları "İyi" olarak kabul edilir.

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

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS), görsel kararlılığın bir ölçümüdür. Bir sayfanın içeriğinin görsel olarak ne kadar kaydığını ölçer. Düşük CLS puanı, geliştiricilere kullanıcılarının gereksiz içerik değişiklikleri yaşamadığına dair bir sinyaldir.0,10'un altındaki CLS puanları "İyi" olarak kabul edilir.

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

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

Toplam Engelleme Süresi (TBT)

Total Blocking Time (TBT), ana iş parçacığının girişe yanıt vermeyi önleyecek kadar uzun süre engellendiği toplam süreyi ölçerek yükleme yanıt verebilirliğini ö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'nin tamamlayıcısı olan bu metrik, kullanıcının sayfanızla etkileşim kurma özelliğini engelleyen ana iş parçacığı etkinliğini ölçmede daha fazla ayrıntı sağlar.

Ayrıca TBT, Core Web Vital olan First Input Delay (FID) alan metriğiyle iyi bir korelasyon gösterir.

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 karışımından hesaplanır. 6.0 performans puanı formülü aşağıda verilmiştir.

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 iş parçacığı (%25) Toplam Engelleme Süresi (TBT) %25
Tahmin edilebilirlik (%5) Cumulative Layout Shift (CLS) %5

Üç yeni metrik eklenirken üç eski metrik kaldırıldı: İlk Anlamlı Boyama, İlk CPU Boş ve Maksimum Potansiyel FID. Kalan metriklerin ağırlıkları, ana mesaj etkileşimini ve düzen öngörülebilirliğini vurgulamak için değiştirildi.

Karşılaştırmak için 5. sürümün puanlamasını aşağıda bulabilirsiniz:

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 Boş CPU (FCI) %13
Ana iş parçacığı Maksimum Olası İlk Giriş Gecikmesi %0

Lighthouse puanlaması 5. ve 6. sürümler arasında değişir.

Lighthouse 5 ve 6 sürümleri arasındaki puanlama değişikliklerinin öne çıkan bazı özellikleri:

  • TTI'nin ağırlığı% 33'ten%15'e düşürüldü. Bu değişiklik, TTI değişkenliği ve kullanıcı deneyiminde iyileştirmelere yol açan metrik optimizasyonlarındaki tutarsızlıklar hakkındaki kullanıcı geri bildirimlerine doğrudan yanıt olarak yapıldı. TTI, bir sayfanın tamamen etkileşime hazır olduğu durumlarda hâlâ faydalı bir sinyaldir. Ancak TBT ile birlikte kullanıldığında değişkenlik azalır. Bu puanlama değişikliğiyle, geliştiricilerin kullanıcı etkileşimi için optimizasyon yapmaya daha etkili bir şekilde teşvik edileceğini umuyoruz.
  • FCP'nin ağırlığı% 23'ten %15'e düşürüldü. Yalnızca ilk piksel boyandığında (FCP) ölçüm yapmak bize tam bir fikir vermiyordu. Bu metriği, kullanıcıların en çok önem verdikleri içeriği ne zaman görebildiklerini ölçmeyle (LCP) birlikte kullanmak, yükleme deneyimini daha iyi yansıtır.
  • Maksimum Olası İlk Giriş Gecikmesi kullanımdan kaldırıldı. Artık raporda gösterilmez ancak JSON'da kullanılabilir. Artık etkileşiminizi ölçmek için mpFID yerine TBT'ye bakmanız önerilir.
  • İlk Anlamlı Boyama metriğinin desteği sonlandırıldı. Bu metrik çok fazla varyant içeriyordu ve uygulama Chrome'un iç işleyişine özel olduğu için standartlaştırmaya uygun bir yolu yoktu. Bazı ekipler, sitelerinde FMP zamanlamasının faydalı olduğunu düşünse de metrik için ek iyileştirmeler yapılmayacaktır.
  • TTI'den yeterince farklı olmadığı için ilk CPU boşta metriğinin desteği sonlandırıldı. TBT ve TTI, şu anda etkileşim için tercih edilen metriklerdir.
  • CLS'nin ağırlığı nispeten düşüktür ancak gelecekteki bir büyük sürümde bu ağırlığı artırmayı planlıyoruz.

Puanlardaki değişiklikler

Bu değişiklikler gerçek sitelerin puanlarını nasıl etkiler? İki veri kümesi kullanarak puan değişiklikleriyle ilgili bir analiz yayınladık: Genel bir site grubu ve Eleventy ile oluşturulmuş statik site grubu. Özet olarak, sitelerin yaklaşık% 20'sinde belirgin şekilde daha yüksek puanlar, yaklaşık% 30'unda neredeyse hiç değişiklik, yaklaşık% 50'sinde ise en az beş puan düşüş görüldü.

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

  • Puan ağırlığı değişiklikleri
  • Temel metrik uygulamalarında hata düzeltmeleri
  • bireysel puan eğrisi değişiklikleri

Puan ağırlık değişiklikleri ve üç yeni metriğin kullanıma sunulması, genel puan değişikliklerinin çoğunu etkiledi. Geliştiricilerin henüz optimize etmediği yeni metrikler, sürüm 6 performans puanında önemli bir ağırlığa sahiptir. 5. sürümdeki test veri kümesinin ortalama performans puanı yaklaşık 50 iken yeni Toplam Engelleme Süresi ve Largest Contentful Paint metriklerinin ortalama puanları yaklaşık 30'du. Bu iki metrik, Lighthouse 6 sürümü performans puanındaki ağırlığın% 50'sini oluşturduğundan, sitelerin büyük bir kısmında doğal olarak düşüşler yaşandı.

Temel metrik hesaplamasında yapılan hata düzeltmeleri farklı puanlara neden olabilir. Bu durum nispeten az sayıda siteyi etkiler ancak belirli durumlarda önemli ölçüde etki yaratabilir. Genel olarak, sitelerin yaklaşık% 8'inde metrik uygulama değişiklikleri nedeniyle puanda artış, sitelerin yaklaşık% 4'ünde ise metrik uygulama değişiklikleri nedeniyle puanda düşüş yaşandı. Sitelerin yaklaşık% 88'i bu düzeltmelerden etkilenmedi.

Puan eğrisinin tek tek değiştirilmesi, genel puan değişimlerini de çok az olsa da etkiledi. Puan eğrisinin, HTTPArchive veri kümesinde gözlemlenen metriklerle uyumlu olduğundan düzenli olarak emin oluruz. Büyük uygulama değişikliklerinden etkilenen siteler hariç tutulursa, tek tek metrikler için puan eğrisinde yapılan küçük ayarlamalar, sitelerin yaklaşık% 3'ünün puanını yükseltti ve sitelerin yaklaşık% 4'ünün puanını düşürdü. Sitelerin yaklaşık% 93'ü bu değişiklikten etkilenmedi.

Puanlama hesaplayıcı

Performans puanlamasını keşfetmenize yardımcı olmak için bir puanlama hesaplayıcısı yayınladık. Hesaplama aracı, Lighthouse 5 ve 6 sürümlerinin puanlarını da karşılaştırır. Lighthouse 6.0 ile bir denetim çalıştırdığınızda raporda, sonuçlarınızın doldurulduğu hesap makinesinin bağlantısı yer alır.

Lighthouse Puanı Hesaplayıcı.
Ölçeği yükselttiği için Ana Tudor'a çok teşekkür ederiz.

Yeni denetimler

Kullanılmayan JavaScript

Yeni bir denetimde DevTools kod kapsamından yararlanıyoruz: Kullanılmayan JavaScript.

Bu denetim tamamen yeni değil: 2017'nin ortalarında eklendi ancak Lighthouse'un olabildiğince hızlı kalması için performans yükü nedeniyle varsayılan olarak devre dışı bırakıldı. Bu kapsam verilerini toplamak artık çok daha verimli olduğundan varsayılan olarak etkinleştirmekten çekinmiyoruz.

Erişilebilirlik denetimleri

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

  • aria-hidden-body
  • aria-hidden-focus
  • aria-input-field-name
  • aria-toggle-field-name
  • form-field-multiple-labels
  • heading-order
  • duplicate-id-active
  • duplicate-id-aria

Maskelenebilir simge

Maskelenebilen simgeler, PWA'nızın simgelerinin tüm cihaz türlerinde harika 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ı bu yeni biçimi destekleyip desteklemediğini kontrol eden yeni bir denetimi kullanıma sunduk.

Karakter kümesi tanımlaması

meta charset öğesi, bir HTML dokümanı yorumlamak için hangi karakter kodlamasının kullanılacağını belirtir. Bu öğe eksikse veya belgenin sonlarında tanımlanmışsa tarayıcılar, hangi kodlamanın kullanılacağını tahmin etmek için çeşitli sezgisel yöntemler kullanır. Bir tarayıcı yanlış tahmin ederse ve geç bir meta kodlama dili öğesi bulunursa ayrıştırıcı genellikle o ana kadar yapılan tüm çalışmaları atar ve baştan başlar. Bu da kullanıcının kötü bir deneyim yaşamasına neden olur. Bu yeni denetim, sayfanın geçerli bir karakter kodlamasına sahip olduğunu ve bu kodlamanın erken ve önceden tanımlandığını doğrular.

Lighthouse CI

Geçen Kasım ayındaki CDS'de, sürekli entegrasyon ardışık düzeninizdeki her bir taahhütte Lighthouse sonuçlarını izleyen açık kaynak Node CLI ve sunucu olan Lighthouse CI'yi duyurmuştuk. Alfa sürümünden bu yana çok yol kat ettik. Lighthouse CI artık Travis, Circle, GitLab ve GitHub Actions gibi birçok CI sağlayıcısını destekliyor. Dağıtıma hazır docker resimleri kurulumu kolaylaştırır. Kapsamlı bir kontrol paneli yeniden tasarımı sayesinde artık Lighthouse'taki her kategori ve metrikteki trendleri ayrıntılı olarak analiz edebilirsiniz.

Başlangıç kılavuzumuzu uygulayarak Lighthouse CI'yi projenizde hemen kullanmaya başlayın.

Lighthouse CI.
Lighthouse CI.
Lighthouse CI.

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

Denetimler panelinin adını Lighthouse paneli olarak değiştirdik. Yeterli bilgi verildi.

DevTools pencereniz boyutuna bağlı olarak panel muhtemelen » düğmesinin arkasındadır. Sıralamayı değiştirmek için sekmeyi sürükleyebilirsiniz.

Komut menüsünü kullanarak paneli hızlıca göstermek için:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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şlarına basın.
  3. "Lighthouse" yazın.
  4. Enter tuşuna basın.

Mobil emülasyonu

Lighthouse, mobil öncelikli bir yaklaşımı benimser. Performans sorunları, tipik mobil koşullarda daha belirgindir ancak geliştiriciler genellikle bu koşullarda test yapmaz. Bu nedenle Lighthouse'taki varsayılan yapılandırmada mobil emülasyon uygulanır. Emülasyon aşağıdakilerden oluşur:

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

Lighthouse, başlangıçtan beri referans cihaz olarak Nexus 5X'i kullanıyordu. Son yıllarda performans mühendislerinin çoğu test amacıyla Moto G4'ü kullanıyor. Şimdi Lighthouse da bu uygulamayı takip ederek referans cihazını Moto G4 olarak değiştirdi. Uygulamada bu değişiklik çok fark edilmez ancak bir web sayfası tarafından algılanan tüm değişiklikler aşağıda verilmiştir:

  • Ekran boyutu 412x660 piksel yerine 360x640 piksel olarak değiştirildi.
  • Kullanıcı aracısı dizesi biraz değiştirildi. Daha önce Nexus 5 Build/MRA58N olan cihaz bölümü artık Moto G (4) olacak.

Chrome 81'den itibaren Moto G4, Chrome DevTools cihaz emülasyon listesinde de yer alıyor.

Moto G4'ün de yer aldığı Chrome DevTools cihaz emülasyonu listesi.

Tarayıcı uzantısı

Lighthouse için Chrome uzantısı, Lighthouse'u yerel olarak çalıştırmanın kullanışlı bir yolu olmuştur. Maalesef destek vermek karmaşıktı. Chrome DevTools Lighthouse paneli daha iyi bir deneyim sunduğundan (rapor diğer panellerle entegre edilir) Chrome uzantısını basitleştirerek mühendislik masraflarımızı azaltabileceğimizi düşündük.

Uzatma artık Lighthouse'u yerel olarak çalıştırmak yerine PageSpeed Insights API'yi kullanıyor. Bu değişikliğin 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ığından herkese açık olmayan web sitelerini denetleyebilir. Herkese açık olmayan bir web sitesini denetlemeniz gerekiyorsa DevTools Lighthouse panelini veya Node CLI'yi kullanın.
  • PageSpeed Insights'ın en son Lighthouse sürümünü kullanması garanti edilmez. En son sürümü kullanmak istiyorsanız Node KSA'yı kullanın. Tarayıcı uzantısı, sürümden yaklaşık 1-2 hafta sonra güncellenir.
  • PageSpeed Insights bir Google API'sidir. Bu aracı kullanmak, Google API Hizmet Şartları'nı kabul etmek anlamına gelir. Hizmet şartlarını kabul etmek istemiyorsanız veya kabul edemiyorsanız DevTools Lighthouse panelini ya da Node CLI'yi kullanın.

Ürün hikayesini basitleştirmek, diğer mühendislik sorunlarına odaklanmamıza olanak tanıdı. Bu nedenle Lighthouse Firefox uzantısını kullanıma sunduk.

Bütçeler

Lighthouse 5.0, bir sayfanın her kaynak türünün ne kadarını (ör. komut dosyaları, resimler veya CSS) yayınlayabileceğine dair eşikler eklemeyi destekleyen performans bütçeleri kullanıma sundu.

Lighthouse 6.0, bütçe oluşturma metrikleri için destek ekler. Böylece artık FCP gibi belirli metrikler için eşikler belirleyebilirsiniz. Bütçeler şu anda yalnızca Node CLI ve Lighthouse CI'de kullanılabilir.

Kaynak konum bağlantıları

Lighthouse'ın bir sayfayla ilgili bulduğu sorunların bazıları belirli bir kaynak kodu satırına kadar izlenebilir. Raporda, ilgili dosya ve satırın tam olarak neresi olduğu belirtilir. Bu raporun DevTools'ta kolayca keşfedilebilmesi için raporda belirtilen konumları tıkladığınızda ilgili dosyalar Kaynaklar panelinde açılır.

Geliştirici Araçları, soruna neden olan kod satırını tam olarak gösterir.

Yakında

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

  • JavaScript paketlerinde yinelenen modülleri algılama.
  • Modern tarayıcılara gönderilen kodda aşırı çoklu doldurma veya dönüştürme tespiti
  • Kullanılmayan JavaScript denetimini, modül düzeyinde ayrıntı düzeyi sağlamak için geliştirme
  • İşlem gerektiren modülleri vurgulayan ağaç haritası görselleştirmeleri.
  • "Kaynak konumu" olan rapor öğelerinin orijinal kaynak kodunu görüntüleme.
Kaynak eşlemelerdeki modülleri gösteren kullanılmayan JavaScript.
Belirli paketlenmiş modüllerdeki kullanılmayan kodu göstermek için kaynak eşlemelerini kullanan Kullanılmayan JavaScript denetimi.

Bu özellikler, Lighthouse'ın gelecekteki bir sürümünde varsayılan olarak etkinleştirilecektir. Şu anda Lighthouse'ın 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ı oluyor. Lighthouse 6.0'ın, web sitelerinizin performansını artırmanızı kolaylaştıracağını umuyoruz.

Bundan sonra ne yapabilirsiniz?

  • Chrome Canary'yi açıp Lighthouse panelini deneyin.
  • Node CLI'yi kullanın: npm install -g lighthouse && lighthouse https://yoursite.com --view.
  • Projenizde Lighthouse CI'yi çalıştırın.
  • Lighthouse denetimi dokümanlarını inceleyin.
  • Web'i daha iyi hale getirme konusunda iyi eğlenceler dileriz.

Web'e tutkuyla bağlıyız ve web'i iyileştirmeye yardımcı olacak araçlar oluşturmak için geliştirici topluluğuyla birlikte çalışmaktan memnuniyet duyuyoruz. Lighthouse açık kaynak bir projedir. Yazım hatası düzeltmelerinden doküman yeniden yapılandırmasına ve yepyeni denetimlere kadar her konuda yardımcı olan tüm katkıda bulunanlara çok teşekkür ederiz. Katkıda bulunmak ister misiniz? Lighthouse GitHub deposuna göz atın.