Lighthouse 10'daki yenilikler

Brendan Kenny
Brendan Kenny

Lighthouse, sitelerindeki kullanıcı deneyimini iyileştirme fırsatları ve teşhis bilgileri ile geliştiricilere yardımcı olan bir web sitesi denetleme aracıdır.

Lighthouse 10, npm ile komut satırından ve Chrome Canary'de hemen kullanılabilir. Önümüzdeki haftalarda bu özellik, Chrome 112'de Chrome kararlı kanalında ve PageSpeed Insights'ta gösterilecek.

Puan değişiklikleri

Saygın Etkileşime Kalan Süre (TTI) metriği, Lighthouse 8'de başlatılan kullanımdan kaldırma süreci sonuçlanarak Lighthouse 10'dan kaldırılıyor. TTI'nin% 10 puan ağırlığı, artık genel performans puanının% 25'ini oluşturan Cumulative Layout Shift (CLS) yöntemine kayıyor.

TTI, bir zamanı işaretler, ancak tanımlanma şekli onu aykırı ağ isteklerine ve uzun görevlere karşı aşırı hassas hale getirir. Largest Contentful Paint (LCP) ve Hız İndeksi, genellikle etkin ağ isteği sayısından daha iyi bulgusal yöntemlerdir. Toplam Engelleme Süresi (TBT), uzun görevleri ve ana iş parçacığı kullanılabilirliğini daha etkili bir şekilde işler. Doğrudan proxy olmasa da alanda ölçülen Core Web Vitals ile daha iyi ilişki vardır.

CLS'nin artan ağırlığı TTI'nin kaldırılması için tesadüfi olur, ancak bunun Core Web Vitals olarak önemini daha iyi yansıtır ve ideal olarak düzende gereksiz değişiklikler yapmaya devam eden sitelere odaklanmayı artırır.

Bu değişikliğin, çoğu sayfanın daha iyi hale zira çoğu sayfa CLS'de TTI'ye göre daha iyi puan verme eğilimindedir. En son HTTP Arşivi çalıştırmasında yapılan 13 milyon sayfa yüklemesinin analizi, bu sayfaların% 90'ının Lighthouse performans puanında ve% 50'sinde 5 puanın üzerinde bir performans artışı olduğunu göstermektedir.

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 ihtiyacınız olursa (örneğin, bir CI onayında) bu değer Lighthouse JSON çıkışında değişmeden kullanılabilir, sadece puan ağırlığı 0 ile HTML raporunda gizlidir. JSON değerinin komut dosyası erişimli erişimleri, değişiklikler olmadan çalışmaya devam eder.

Yeni denetimler

Lighthouse 10, yepyeni bir performans denetimi ve önemli bir değişikliği yeni bir sürüme getiriyor.

Geri-ileri önbellek

Geri-ileri önbellek (bfcache) gerçek kullanıcılar için bir sayfanın performansını iyileştirmek amacıyla sunulan en güçlü araçlardan biridir. Bfcache'den yüklenen bir sayfa, normal tarayıcı önbelleğinin ötesinde, sayfa düzenini ve yürütme durumunu neredeyse anında geri yükler. Böylece, tüm sayfa yükleme etkinlikleri büyük ölçüde atlanır ve kullanıcılar geçmişlerinde geri ve ileri giderlerken sayfanızı kullanıcılarınızın hemen karşısına çıkarırlar.

Bununla birlikte, bir sayfanın, tarayıcının bir sayfayı bfcache'den geri yüklemesini engelleyebileceği birkaç yol vardır. Bu yeni Lighthouse denetimi, bfcache için kullanılabilir olup olmadığını test etmek üzere test sayfasından çıkıp tekrar geri döner ve başarısız olmasının nedenlerini listeler.

bfcache denetiminden örnek sonuç, açık IndexDB bağlantısından kaynaklanan hataları ve sayfadaki kaldırma işleyicileri listeleme

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

Yapıştırmayı engelleyen girişler

Eski En İyi Uygulamalar denetimi "Kullanıcıların şifre alanlarına yapıştırmasına izin verir" , herhangi bir (salt okunur olmayan) giriş alanına yapıştırmanın işe yarayıp yaramayacağını kontrol edecek şekilde genişletildi. Çoğu site için, yapıştırmanın engellenmesi net olumsuz bir kullanıcı deneyimidir ve meşru güvenlik ve erişilebilirlik iş akışlarını engeller.

Yeni denetim artık "Kullanıcıların giriş alanlarına yapıştırmasına izin verir" (paste-preventing-inputs).

Düğüm kullanıcıları

Lighthouse'u düğüm kitaplığı olarak kullanıyorsanız bu sürümde dikkat etmeniz gereken birkaç programatik bozucu değişiklik olabilir. Tüm ayrıntılar için 10.0 değişiklik günlüğünü inceleyin.

Lighthouse 10, tam TypeScript türü beyanlarıyla birlikte gönderilir. lighthouse öğesinden içe aktarılan her şeyi şimdi yazmanız gerekir. Bu, Lighthouse kullanıcı akışları komut dosyası kullanıyorsanız özellikle yararlı olacaktır.

Lighthouse'u işlev olarak içe aktaran ve işleve geçirilen seçenekler nesnesinin artık TypeScript tarafından tür denetimi yapıldığını gösteren bir Düğüm komut dosyası

Türleri deneyin ve kullanırken sorun yaşarsanız bize bildirin.

Koşu Feneri

Lighthouse, Chrome Geliştirici Araçları'nda, npm'de (Düğüm modülü ve CLI aracı olarak) ve bir tarayıcı uzantısı olarak (Chrome ile Firefox'ta) kullanılabilir. Ayrıca, PageSpeed Insights gibi çeşitli Google hizmetlerini de destekler.

Lighthouse Düğümü KSA'yı denemek için aşağıdaki komutları kullanın:

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

Lighthouse ekibiyle iletişime geçin

Yeni özellikleri, Lighthouse 10 sürümündeki değişiklikleri veya Lighthouse ile ilgili diğer her şeyi tartışmak için: