Lighthouse 9.0'daki yenilikler

Brendan Kenny
Brendan Kenny

Lighthouse, geliştiricilerin sitelerindeki kullanıcı deneyimini iyileştirmelerini sağlayacak fırsatlar ve teşhisler konusunda yardımcı olan bir web sitesi denetleme aracıdır.

Lighthouse 9.0 hemen komut satırında, Chrome Canary'de ve PageSpeed Insights'ta kullanılabilir. Bu ürün, Chrome 98 sürümünde Chrome kararlı sürümünde kullanıma sunulacak.

API değişiklikleri

Çoğu kullanıcı, bu sürümde iş akışını bozan herhangi bir değişiklikle karşılaşmayacaktır. Özel Lighthouse denetimleri çalıştırıyorsanız veya Lighthouse rapor JSON dosyasının derinliklerindeki ayrıntılara bağlı araçlar kullanıyorsanız 9.0'da dikkat etmeniz gereken bazı zarar veren değişiklikler olabilir.

Değişikliklerin tam listesini 9.0 değişiklik günlüğünde görebilirsiniz.

Kullanıcı işlemleri için Lighthouse

Lighthouse, bir sayfanın kullanım süresinin herhangi bir noktasında laboratuvar testlerine olanak tanıyan yeni bir kullanıcı akışı API'sine sahiptir.

Puppeteer, sayfa yüklemelerini komut dosyası haline getirmek ve yapay kullanıcı etkileşimlerini tetiklemek için kullanılır. Lighthouse, bu etkileşimler sırasında önemli bilgileri yakalamak için birden fazla şekilde çağrılabilir. Bu, performansın sayfa yükleme sırasında ve sayfayla etkileşimler sırasında ölçülebileceği anlamına gelir.

Bir web sitesini yükleme ve siteyle etkileşimde bulunma adımlarını ve her adım için Lighthouse denetleme sonuçlarını içeren bir Lighthouse kullanıcı akışı raporu

Daha fazla bilgi için Lighthouse kullanıcı akışları eğiticisi ve kod örnekleri bölümüne bakın.

Rapor yenileme

Lighthouse raporu, okunabilirliği iyileştirmek, raporun kaynağını ve çalıştırılmasını kolaylaştırmak için yenilendi.

Test edilen sayfanın doğru şekilde yüklenip yüklenmediğini ve beklenen biçimde olup olmadığını bir bakışta netleştirmek için raporun üst kısmına son bir ekran görüntüsü yerleştirildi.

Temel performans metriklerini daha belirgin bir şekilde listeleyen ve sayfanın son görünümünün ekran görüntüsünü performans raporuna yerleştiren bir Lighthouse 9.0 raporu

Raporun alt kısmındaki özet bilgileri de Lighthouse'un nasıl çalıştırıldığını ve raporun nasıl toplandığını daha iyi açıklamak için yeniden tasarlandı.

Lighthouse raporunun güncellenmiş ayarlar bölümü, artık sayfanın ne zaman kaydedildiği, kullanılan sayfa emülasyonunun türü ve testin çalıştırıldığı Chrome sürümü gibi öğelerin özetini içeriyor.

Yeni raporu çalışırken görmek için Lighthouse 9.0'ı deneyin veya bu örnek raporu ziyaret edin.

Yaygın bir erişilebilirlik sorunu, bir sayfada benzersiz olması gereken öğelerin olmamasıdır (örneğin, bir aria-labelledby özelliğinde başvurulan kimlik birden fazla öğede kullanılıyorsa).

Lighthouse bu durumla ilgili her zaman uyarıda bulunurdu, ancak yinelenen kimliğe sahip bir öğenin yalnızca ilk örneğini listeler. Bu durum, bazı kullanıcılar bir soruna neden olan tüm öğeleri gösterdiğini düşündüklerinden genellikle kafa karışıklığına yol açar. Lighthouse yalnızca tek bir öğe gösterdiğinden, tek öğenin yinelenen olarak işaretlenmesinin bir hata olduğunu varsayacaklardı.

Lighthouse 9.0'da bu kimliği paylaşan tüm öğeler artık listeleniyor:

"Tüm odaklanılabilir öğelerde benzersiz bir "id" olmalıdır ve her ikisi de aynı "id"ye sahip iki öğe gösteren Lighthouse denetimi

Bu "ilgili düğümler" axe-core tarafından sağlandığından diğer erişilebilirlik denetimlerinde de görünebilir.

Daha fazla bilgi için kullanıcı raporlarının toplanmasıyla ilgili sorun ve uygulama çekme isteği konularına bakın.

Koşu Feneri

Lighthouse, Chrome Geliştirici Araçları'nda, npm'de (Düğüm modülü ve CLI olarak) ve bir tarayıcı uzantısı olarak (Chrome ve Firefox'ta) kullanılabilir. web.dev/measure ve PageSpeed Insights gibi birçok Google hizmetini 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, 9.0 sürümündeki değişiklikleri veya Lighthouse ile ilgili diğer her şeyi tartışmak için: