Yeni metrikler, performans puanı güncellemesi, yeni denetimler ve daha fazlası.
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 metrikleri.](https://web.dev/static/articles/lighthouse-whats-new-6/image/lighthouse-60-metrics-73ad058d94943.png?authuser=6&hl=tr)
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.
![Lighthouse Puanı Hesaplayıcı.](https://web.dev/static/articles/lighthouse-whats-new-6/image/lighthouse-score-calculat-a6ff214bb75c.png?authuser=6&hl=tr)
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.
![Lighthouse CI'yı seçin.](https://web.dev/static/articles/lighthouse-whats-new-6/image/lighthouse-ci-4bd60b182a282.png?authuser=6&hl=tr)
![Lighthouse CI'yı seçin.](https://web.dev/static/articles/lighthouse-whats-new-6/image/lighthouse-ci-765b8b309558f.png?authuser=6&hl=tr)
![Lighthouse CI'yı seçin.](https://web.dev/static/articles/lighthouse-whats-new-6/image/lighthouse-ci-eb2e203ede425.png?authuser=6&hl=tr)
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:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Komut menüsünü açmak için
Control+Shift+P
(veya Mac'teCommand+Shift+P
) tuşuna basın. - "Lighthouse" yazmaya başlayın.
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ıkMoto G (4)
olacak.
Chrome 81'den itibaren Moto G4, Chrome Geliştirici Araçları cihaz emülasyon listesinde de kullanılabilmektedir.
![Moto G4 içeren Chrome Geliştirici Araçları cihaz emülasyon listesi.](https://web.dev/static/articles/lighthouse-whats-new-6/image/chrome-devtools-device-em-a99db5fa66cf8.png?authuser=6&hl=tr)
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.
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.
![Kaynak eşlemelerindeki modülleri gösteren kullanılmayan JavaScript.](https://web.dev/static/articles/lighthouse-whats-new-6/image/unused-javascript-showing-ca0da26ee143d.png?authuser=6&hl=tr)
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.