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 (Node 모듈 및 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에 문의하세요.