Lighthouse 11의 새로운 기능

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse는 웹사이트 감사 도구로, 개발자에게 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공합니다.

Lighthouse 11은 npm을 통해 명령줄, Chrome Canary, PageSpeed Insights에서 즉시 사용할 수 있습니다. Chrome 118에서 Chrome 안정화 버전으로 출시됩니다.

11.0 변경 로그에서 전체 변경사항 목록을 확인하세요.

접근성 카테고리 업데이트

카테고리 업데이트에는 새로운 자동 감사, 개선된 가중치 부여, 개발자가 사이트의 접근성을 높일 수 있도록 우선순위가 지정된 수동 감사가 포함됩니다.

새로운 감사 및 가중치 부여

Lighthouse 10.0 이후 다음과 같은 13가지 새로운 접근성 감사가 추가되었습니다.

  • 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

새로운 감사 외에도 모든 감사의 가중치가 해당 aXe 규칙의 영향 수준에 더 잘 일치하도록 업데이트되었습니다. 새로운 감사 및 가중치에 관한 자세한 내용은 Lighthouse 접근성 점수 문서를 참고하세요.

수동 감사 가시성

Lighthouse는 항상 자동으로 테스트할 수 없는 일부 수동 감사를 포함하고 있지만, 여전히 중요한 기능을 확인하기 위한 체크리스트로 포함되어 있습니다. 이제 모든 자동 감사를 통과하면 수동 감사 섹션이 자동으로 확장됩니다.

접근성 카테고리의 수동 감사가 펼쳐진 Lighthouse 보고서

이는 모든 자동 감사를 통과하고 접근성 부문에서 100점을 획득한다고 해서 감사 대상 페이지에 대한 액세스가 보장되는 것은 아니라는 점을 강조합니다. 수동 테스트는 여전히 중요합니다 수동 감사 또한 가장 접근하기 쉬운 검사부터 시작하도록 재정렬되었습니다.

기존 감사 변경사항

다음 페인트에 대한 상호작용 (INP)

INP는 더 이상 실험용이 아니므로 측정항목이 experimental-interaction-to-next-paint에서 interaction-to-next-paint로 이동했습니다.

서비스 워커

Chrome에서 페이지를 PWA로 설치하는 데 더 이상 서비스 워커가 필요하지 않으므로 Lighthouse PWA 카테고리에서 service-worker 검사가 삭제되었습니다.

리소스 요약

Lighthouse 보고서에서 resource-summary 감사가 삭제되었습니다. 네트워크 요청 통계는 숨겨진 network-requests 감사를 사용하여 계속 컴파일할 수 있습니다.

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);

기존 탐색

CLI의 --legacy-navigation 플래그, Node API의 legacyNavigation() 함수, '기존 탐색' DevTools 패널의 체크박스가 모두 삭제되었습니다. 이로써 사용자 플로우를 지원하기 위한 Lighthouse 인프라의 전환이 마무리되었습니다.

달리는 등대

Lighthouse는 Chrome DevTools, npm (노드 모듈 및 CLI 도구로) 및 브라우저 확장 프로그램 (Chrome 및 Firefox)으로 사용할 수 있습니다. 또한 PageSpeed Insights를 비롯하여 여러 Google 서비스를 지원합니다.

Lighthouse Node CLI를 사용해 보려면 다음 명령어를 사용합니다.

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

Lighthouse팀에 문의하기

새로운 기능, Lighthouse 11 버전의 변경사항 또는 Lighthouse와 관련된 다른 내용을 논의하려면 다음을 참고하세요.