Lighthouse 11'deki yenilikler

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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 11, Chrome Canary'de ve PageSpeed Insights'ta npm ile komut satırında hemen kullanılabilir. Uygulama, Chrome 118 sürümünde Chrome kararlı kanalında gösterilir.

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

Erişilebilirlik kategorisi güncellemeleri

Kategori güncellemeleri arasında yeni otomatik denetimler, iyileştirilmiş ağırlıklandırma ve geliştiricilerin sitelerini daha erişilebilir hale getirmelerine yardımcı olmak için öncelikli manuel denetimler bulunur.

Yeni denetimler ve ağırlıklandırma

Lighthouse 10.0'dan bu yana 13 yeni erişilebilirlik denetimi eklendi:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

Yeni denetimlere ek olarak, tüm denetimlerin ağırlıkları ilgili aXe kural etki düzeyleriyle daha iyi eşleşecek şekilde güncellendi. Yeni denetimler ve ağırlıklarla ilgili ayrıntılı bilgi için Lighthouse erişilebilirlik puanlaması dokümanlarına bakın.

Manuel denetim görünürlüğü

Lighthouse her zaman otomatik olarak test edilemeyen ancak önemli işlevleri doğrulamak için kontrol listesi olarak dahil edilen bazı manuel denetimler dahil etmiştir. Manuel denetim bölümü artık tüm otomatik denetimler geçtikten sonra otomatik olarak genişletiliyor.

Erişilebilirlik kategorisindeki manuel denetimleri gösteren Lighthouse raporunun kapsamı genişletildi

Bu, tüm otomatik denetimleri geçmenin ve erişilebilirlik açısından 100 puan almanın, denetlenen sayfanın erişilebilir olmasını garanti etmediğini vurgular ve manuel test hâlâ önemlidir. Manuel denetimler de en ulaşılabilir kontrollerle başlayacak şekilde yeniden sıralandı.

Mevcut denetimlerdeki değişiklikler

Sonraki boyamayla etkileşim (INP)

INP artık deneme aşamasında olmadığından metrik, experimental-interaction-to-next-paint değerinden interaction-to-next-paint değerine taşındı.

Hizmet çalışanları

Bir sayfanın Chrome'da PWA olarak yüklenebilmesi için artık Service Worker gerekli olmadığından service-worker kontrolü, Lighthouse PWA kategorisinden kaldırıldı.

Kaynak özeti

resource-summary denetimi Lighthouse raporundan kaldırıldı. Ağ isteği istatistikleri, gizli network-requests denetimi kullanılarak derlenmeye devam edilebilir:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

Eski gezinme modu

CLI için --legacy-navigation işareti, Node API'deki legacyNavigation() işlevi ve Geliştirici Araçları panelindeki "Eski gezinme" onay kutusunun tamamı kaldırıldı. Bu sayede Lighthouse'un altyapısında kullanıcı akışlarını destekleyecek yıllar süren bir geçiş tamamlandı.

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 11 sürümündeki değişiklikler veya Lighthouse ile ilgili herhangi bir konu hakkında konuşmak için: