Lighthouse 11'deki yenilikler

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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

Lighthouse 11, npm aracılığıyla komut satırında, Chrome Canary'de ve PageSpeed Insights'ta hemen kullanılabilir. Chrome 118'de Chrome'un kararlı sürümüne eklenecektir.

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

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 önceliklendirilmiş manuel denetimler yer alıyor.

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ıklar hakkında ayrıntılı bilgi için Lighthouse erişilebilirlik puanlaması belgelerini inceleyin.

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

Lighthouse, otomatik olarak test edilemeyen ancak önemli işlevleri doğrulamak için kontrol listesi olarak eklenen bazı manuel denetimleri her zaman içerir. Manuel denetim bölümü, tüm otomatik denetimler başarılı olduğunda artık otomatik olarak genişletilir.

Erişilebilirlik kategorisindeki manuel denetimlerin genişletilmiş halini gösteren bir Lighthouse raporu

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

Mevcut denetimlerde yapılan değişiklikler

Interaction to Next Paint (INP)

INP artık deneysel olmadığından metrik experimental-interaction-to-next-paint bölümünden interaction-to-next-paint bölümüne taşındı.

Hizmet çalışanları

Chrome'da bir sayfanın PWA olarak yüklenebilmesi için artık hizmet çalışanı gerekmediğinden 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 edebilir:

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 kutusu kaldırıldı. Bu sayede, Lighthouse'un altyapısında kullanıcı işlemleri akışlarını desteklemek için yıllardır devam eden geçiş süreci tamamlanmış oldu.

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'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çme

Lighthouse 11 sürümündeki yeni özellikleri, değişiklikleri veya Lighthouse ile ilgili diğer konuları tartışmak için: