Lighthouse는 개발자가 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공하는 데 도움이 되는 웹사이트 감사 도구입니다.
Lighthouse 9.0은 명령줄, Chrome Canary, PageSpeed Insights에서 즉시 사용할 수 있습니다. Chrome 98에서 Chrome 안정화 버전으로 출시됩니다.
API 변경사항
대부분의 사용자는 이 릴리스에서 워크플로 브레이킹 체인지를 경험하지 않습니다. 커스텀 Lighthouse 감사를 실행하거나 Lighthouse 보고서 JSON의 세부정보에 의존하는 도구를 사용하는 경우 9.0의 일부 브레이킹 체인지가 알아야 할 수 있습니다.
9.0 변경 로그에서 전체 변경사항 목록을 확인하세요.
사용자 플로우용 Lighthouse
Lighthouse에는 페이지 수명 내에서 언제든지 실험실 테스트를 수행할 수 있는 새로운 사용자 흐름 API가 있습니다.
Puppeteer는 페이지 로드를 스크립팅하고 합성 사용자 상호작용을 트리거하는 데 사용되며, Lighthouse는 다양한 방식으로 호출되어 이러한 상호작용 중에 중요한 정보를 캡처할 수 있습니다. 즉, 페이지 로드 중 및 페이지와 상호작용하는 동안 성능을 측정할 수 있습니다.
자세한 내용은 Lighthouse 사용자 플로우 튜토리얼 및 코드 샘플을 참조하세요.
보고서 새로고침
Lighthouse 보고서가 업데이트되어 가독성을 개선하고 보고서 소스와 보고서 실행 방식을 더 명확하게 확인할 수 있습니다.
최종 스크린샷이 보고서 상단에 삽입되어 테스트 중인 페이지가 올바르게 로드되고 예상된 형식인지 한눈에 확인할 수 있습니다.
Lighthouse의 실행 방식과 보고서 수집 방식을 더 잘 전달할 수 있도록 보고서 하단의 요약 정보도 새롭게 디자인되었습니다.
새 보고서의 실제 작동 방식을 확인하려면 Lighthouse 9.0을 사용해 보거나 예시 보고서를 참조하세요.
관련 접근성 요소
일반적인 접근성 문제는 페이지에서 고유해야 하는 항목이 고유하지 않은 경우입니다(예: aria-labelledby 속성에서 참조된 ID가 여러 요소에서 사용되는 경우).
Lighthouse는 항상 이러한 상황에 대해 경고해 왔지만, ID가 반복되는 요소의 첫 번째 인스턴스만 나열합니다. 이 때문에 일부 사용자는 문제를 일으키는 모든 요소가 표시된다고 추측하여 혼란을 야기할 수 있습니다. Lighthouse는 하나의 요소만 표시했기 때문에 하나의 요소가 중복으로 신고된 버그라고 가정했을 것입니다.
Lighthouse 9.0에서는 이제 이 ID를 공유하는 모든 요소가 나열됩니다.
이 '관련 노드'는 기능은 axe-core에서 제공하므로 다른 접근성 감사에도 표시될 수 있습니다.
자세한 내용은 사용자 보고서 수집 문제 및 구현 pull 요청을 참고하세요.
달리는 등대
Lighthouse는 Chrome DevTools, npm (노드 모듈 및 CLI), 브라우저 확장 프로그램 (Chrome 및 Firefox)에서 사용할 수 있습니다. 이 도구는 web.dev/measure와 PageSpeed Insights를 비롯한 여러 Google 서비스를 지원합니다.
Lighthouse Node CLI를 사용해 보려면 다음 명령어를 사용합니다.
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse팀에 문의하기
새로운 기능, 9.0 출시의 변경사항 또는 Lighthouse와 관련된 다른 내용을 논의하려면 다음을 수행하세요.
- Lighthouse GitHub Issue Tracker에서 문제를 신고하거나 의견을 제출하세요.
- Lighthouse GitHub 토론 포럼에서 궁금한 점을 물어보세요.
- 트위터(@____lighthouse)에서 Lighthouse팀에 문의하세요.