Lighthouse 10'daki yenilikler

Brendan Kenny
Brendan Kenny

Lighthouse, geliştiricilerin sitelerinin kullanıcı deneyimini iyileştirmek için fırsatlar ve teşhisler sunan bir web sitesi denetleme aracıdır.

Lighthouse 10, npm aracılığıyla komut satırında ve Chrome Canary'da hemen kullanılabilir. Bu özellik, Chrome 112'de Chrome'un kararlı sürümüne ve önümüzdeki haftalarda PageSpeed Insights'a eklenecektir.

Puanlama değişiklikleri

Lighthouse 8'de başlatılan desteği sonlandırma süreci, saygıdeğer Etkileşime Hazır Olma Süresi (TTI) metriğinin Lighthouse 10'da kaldırılmasıyla sona eriyor. TTI'nin% 10'luk puan ağırlığı, kümülatif düzen değişikliği (CLS) için geçerli olacak. CLS artık genel performans puanının% 25'ini oluşturacak.

TTI, bir zaman noktasını işaret eder ancak tanımlanma şekli, bu metriği aykırı ağ isteklerine ve uzun görevlere karşı aşırı duyarlı hale getirir. Largest Contentful Paint (LCP) ve Speed Index, bir sayfanın içeriğinin yüklenmiş hissi vermesi için genellikle etkin ağ isteklerinin sayısından daha iyi yöntemlerdir. Toplam Engelleme Süresi (TBT) ise uzun görevleri ve ana iş parçacığı kullanılabilirliğini daha güçlü bir şekilde ele alır. Doğrudan bir proxy olmasa da, sahada ölçülen Core Web Vitals ile daha iyi ilişkilidir.

CLS'nin ağırlığının artması, TTI'nin kaldırılmasıyla ilgilidir ancak Core Web Vital olarak önemini daha iyi yansıtır ve ideal olarak hâlâ gereksiz düzen değişiklikleri yapan sitelere odaklanmayı artırır.

Çoğu sayfa CLS'de TTI'den daha iyi puan aldığından, bu değişikliğin çoğu sayfanın performans puanını artırmasını bekliyoruz. En son HTTP Archive çalıştırmasında 13 milyon sayfa yüklemesinin analiz edildiği bir çalışmada, bu sayfaların% 90'ında Lighthouse performans puanında bir iyileşme görülürken sayfaların% 50'sinde 5 puanın üzerinde bir performans artışı elde edildi.

Toplam puanı oluşturan metriklere (FCP, SI, LCP, TBT ve CLS) göre ayrılmış bir Lighthouse puan göstergesi

Herhangi bir nedenle Lighthouse TTI değerine (ör. bir CI beyanında) hâlâ ihtiyacınız varsa bu değer, Lighthouse JSON çıkışında değişmeden kullanılabilir. Tek fark, puan ağırlığının 0 olması ve HTML raporunda gizlenmesidir. JSON değerine komut dosyası üzerinden yapılan erişim, herhangi bir değişiklik olmadan çalışmaya devam edecektir.

Yeni denetimler

Lighthouse 10, yepyeni bir performans denetimi ve bir başka denetimde önemli bir değişiklik sunuyor.

Geri-ileri önbellek

Geri/ileri önbelleği (bfcache), bir sayfanın gerçek kullanıcılar için performansını iyileştirmeye yönelik en güçlü araçlardan biridir. Normal tarayıcı önbelleği dışında, bfcache'ten yüklenen bir sayfa, sayfa düzenini ve yürütme durumunu neredeyse anında geri yükler. Böylece, sayfa yükleme etkinliğinin büyük bir kısmı atlanır ve kullanıcılar geçmişlerinde geri ve ileri giderken sayfanız hemen kullanıcılarınızın önüne gelir.

Ancak bir sayfanın, tarayıcının bir sayfayı bfcache'ten geri yüklemesini engellemesinin birkaç yolu vardır. Bu yeni Lighthouse denetimi, test sayfasından ayrılıp tekrar geri dönerek sayfanın bfcache'e uygun olup olmadığını test eder ve başarısız olursa nedenlerini listeler.

Açık bir IndexDB bağlantısı ve sayfadaki boşaltma işleyicileri nedeniyle oluşan hataları listeleyen bfcache denetiminden alınan örnek bir sonuç

Daha fazla bilgi için bfcache denetleme belgelerine göz atın.

Yapıştırmayı engelleyen girişler

"Kullanıcıların şifre alanlarına yapıştırmalarına izin verir" adlı eski En İyi Uygulamalar denetimi, artık herhangi bir (salt okunur olmayan) giriş alanına yapıştırma işleminin çalışıp çalışmadığını kontrol edecek şekilde genişletildi. Çoğu sitede yapıştırma işleminin engellenmesi, kullanıcı deneyimini olumsuz yönde etkiler ve meşru güvenlik ve erişilebilirlik iş akışlarını engeller.

Yeni denetim "Kullanıcıların giriş alanlarına yapıştırmalarına izin verir" (paste-preventing-inputs) olarak değiştirildi.

Düğüm kullanıcıları

Lighthouse'ı Node kitaplığı olarak kullanıyorsanız bu sürümde dikkate almanız gereken birkaç programatik değişiklik vardır. Ayrıntılı bilgi için 10.0 sürümünün değişiklik günlüğüne bakın.

Lighthouse 10, tam TypeScript tür beyanlarıyla da birlikte sunulur. lighthouse kaynağından içe aktarılan her şey artık yazılmalıdır. Bu, özellikle Lighthouse kullanıcı akışları için komut dosyası oluşturuyorsanız yararlı olacaktır.

Lighthouse'ı işlev olarak içe aktaran bir Node komut dosyası. Bu komut dosyası, işleve iletilen options nesnesinin artık TypeScript tarafından tür kontrol edildiğini gösterir.

Türleri deneyin ve bunları kullanırken herhangi bir sorunla karşılaşırsanız bize bildirin.

Lighthouse'u çalıştırma

Lighthouse, Chrome Geliştirici Araçları'nda, npm'de (Node modülü ve CLI aracı olarak) ve tarayıcı uzantısı olarak (Chrome ve Firefox'ta) kullanılabilir. Ayrıca PageSpeed Insights da dahil olmak üzere çeşitli Google hizmetlerini destekler.

Lighthouse Node CLI'yi denemek için aşağıdaki komutları kullanın:

npm install -g lighthouse
lighthouse https://www.example.com --view

Lighthouse Ekibi ile iletişime geçme

Yeni özellikleri, Lighthouse 10 sürümündeki değişiklikleri veya Lighthouse ile ilgili başka bir konuyu tartışmak için: