Lighthouse bir web sitesi denetleme aracıdır. Geliştiriciler, sitelerindeki kullanıcı deneyimini iyileştirmek için fırsat ve teşhisler sunar.
Lighthouse 10, npm'ye kadar komut satırında ve Chrome Canary'de hemen kullanılabilir. Araç, önümüzdeki haftalarda Chrome 112'de Chrome kararlı kanalında ve PageSpeed Insights'ta gösterilecektir.
Puan değişiklikleri
Değerli Etkileşime Hazır Olma Süresi (TTI) metriği, Lighthouse 10'da kaldırılmaktadır. Sonuç olarak, Lighthouse 8'de başlatılan kullanımdan kaldırma süreci sonuçlanmaktadır. TTI'nın% 10 puan ağırlığı, artık genel performans puanının% 25'ini oluşturacak Cumulative Layout Shift (CLS) değerine taşınıyor.
TTI, bir anı işaret eder, ancak tanımlanma biçimi, aykırı ağ isteklerine ve uzun görevlere karşı aşırı hassas olmasını sağlar. Largest Contentful Paint (LCP) ve Hız Endeksi, genellikle sayfa içeriklerinin yüklü olduğu hissi, etkin ağ isteklerinin sayısından daha iyi buluşsal yöntemlerdir. Toplam Engelleme Süresi (TBT), uzun görevleri ve ana iş parçacığının kullanılabilirliğini daha sağlam bir şekilde yönetir ve doğrudan bir proxy olmasa da alanda ölçülen Core Web Vitals ile daha iyi ilişkilendirilebilir.
CLS'nin artan ağırlığı TTI'nın kaldırılmasıyla tesadüfendir, ancak Önemli Web Verileri olarak önemini daha iyi yansıtır ve ideal olarak, gereksiz düzen değişikliklerine neden olan sitelerin odağını artırır.
Çoğu sayfanın CLS puanı TTI'ya göre daha iyi olduğundan, bunun çoğu sayfanın performans puanını artırmasını bekliyoruz. En son HTTP Arşivi çalıştırmasında yapılan 13 milyon sayfa yükleme analizinde, bu sayfaların% 90'ının Lighthouse performans puanında iyileşme görülürken, %50'sinde 5 puandan fazla bir performans artışı görülür.
Herhangi bir nedenle hâlâ Lighthouse TTI değerine ihtiyacınız varsa (örneğin, bir CI onayında), bu değer hâlâ Lighthouse JSON çıktısında değişmeden kullanılabilir, yalnızca puan ağırlığı 0 ile ve HTML raporunda gizlidir. JSON değerine komut dosyasıyla yapılan tüm erişimler, değişiklik olmadan çalışmaya devam eder.
Yeni denetimler
Lighthouse 10, yepyeni bir performans denetimi ve başka bir denetimde önemli bir değişiklik sunuyor.
Geri-ileri önbellek
Geri-ileri önbellek (bfcache), gerçek kullanıcılar için bir sayfanın performansını iyileştirmeye yönelik en güçlü araçlardan biridir. Normal tarayıcı önbelleğinin ötesinde, bfcache'den yüklenen bir sayfa, sayfa düzenini ve yürütme durumunu neredeyse anında geri yükler. Bu işlem büyük ölçüde tüm sayfa yükleme etkinliğini atlar ve kullanıcılar geçmişlerinde geri ve ileri giderken sayfanızı hemen önlerine çıkarır.
Bununla birlikte, bir sayfa, tarayıcının bir sayfayı Bfcache'den geri yüklemesini birkaç şekilde engelleyebilir. Bu yeni Lighthouse denetimi, bfcache için uygun olup olmadığını test etmek üzere test sayfasından çıkar ve tekrar geri döner ve başarısız olmasının nedenlerini listeler.
Daha fazla bilgi için bfcache denetiminin belgelerine göz atın.
Yapıştırmayı önleyen girişler
"Kullanıcıların şifre alanlarına yapıştırmalarına izin ver" eski En İyi Uygulamalar denetimi artık herhangi bir (salt okunur) 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ırmayı önlemek kullanıcılara olumsuz bir deneyim yaşatır ve geçerli güvenlik ve erişilebilirlik iş akışlarını engeller.
Yeni denetim artık "Kullanıcıların giriş alanlarına yapıştırmalarına izin ver" (paste-preventing-inputs) olarak değiştirilmiştir.
Düğüm kullanıcıları
Lighthouse'u Düğüm kitaplığı olarak kullanıyorsanız bu sürümde dikkate almanız gereken birkaç programatik zarar değişikliği vardır. Tüm ayrıntılar için 10.0 değişiklik günlüğüne bakın.
Lighthouse 10, tam TypeScript tür bildirimleriyle de gönderilir! lighthouse öğesinden içe aktarılan her şeyin artık yazılması gerekir. Bu, özellikle Lighthouse kullanıcı akışları için komut dosyası yapıyorsanız faydalı olacaktır.
Bu türleri deneyin ve kullanırken herhangi bir sorun yaşarsanız bize bildirin.
Lighthouse'u çalıştırma
Lighthouse; Chrome Geliştirici Araçları'nda, npm'de (Düğüm modülü ve CLI aracı olarak) ve tarayıcı uzantısı olarak (Chrome ve Firefox'ta) kullanılabilir. Ayrıca, PageSpeed Insights gibi çeşitli Google hizmetlerini destekler.
Lighthouse Düğümü KSA'sını 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 özellikler, Lighthouse 10 sürümündeki değişiklikler veya Lighthouse ile ilgili herhangi bir konu hakkında konuşmak için:
- Lighthouse GitHub sorun izleyici'de sorun bildirin veya geri bildirim gönderin.
- Sorularınızı Lighthouse GitHub tartışma forumlarında sorabilirsiniz.
- Lighthouse ekibine Twitter'dan @____lighthouse ulaşabilirsiniz.