Lighthouse는 개발자가 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공하는 웹사이트 감사 도구입니다.
Lighthouse 9.0은 명령줄, Chrome Canary, PageSpeed Insights에서 즉시 사용할 수 있습니다. Chrome 98의 Chrome 안정화 버전에 적용됩니다.
API 변경사항
대부분의 사용자는 이번 출시에서 워크플로를 중단하는 변경사항을 경험하지 않을 것입니다. 맞춤 Lighthouse 감사를 실행하거나 Lighthouse 보고서 JSON의 심층 세부정보에 종속되는 도구를 사용하는 경우 9.0에서 알아야 할 몇 가지 중대한 변경사항이 있을 수 있습니다.
9.0 변경 로그에서 전체 변경사항 목록을 확인하세요.
사용자 플로우를 위한 Lighthouse
Lighthouse에는 페이지 수명 주기 중 어느 시점에서나 실험실 테스트를 할 수 있는 새로운 user-flow API가 있습니다.
Puppeteer는 페이지 로드를 스크립트로 작성하고 합성된 사용자 상호작용을 트리거하는 데 사용되며 Lighthouse는 다양한 방법으로 호출하여 이러한 상호작용 중에 주요 통계를 캡처할 수 있습니다. 즉, 페이지 로드 중에 그리고 페이지와 상호작용하는 동안 성능을 측정할 수 있습니다.
자세한 내용은 Lighthouse 사용자 흐름 튜토리얼 및 코드 샘플을 참고하세요.
보고서 새로고침
가독성을 개선하고 보고서의 출처와 실행 방법을 더 명확하게 하기 위해 Lighthouse 보고서가 업데이트되었습니다.
테스트 중인 페이지가 올바르게 로드되었는지, 예상되는 형식인지 한눈에 확인할 수 있도록 최종 스크린샷이 보고서 상단에 삽입되었습니다.
Lighthouse가 실행된 방식과 수집된 보고서를 더 효과적으로 전달하기 위해 보고서 하단의 요약 정보도 새롭게 디자인되었습니다.
새로운 보고서가 작동하는 모습을 보려면 Lighthouse 9.0을 사용해 보거나 이 예시 보고서를 방문하세요.
관련 접근성 요소
일반적인 접근성 문제는 페이지에서 고유해야 하는 항목이 고유하지 않은 경우입니다. 예를 들어 aria-labelledby 속성에서 참조된 ID가 여러 요소에 사용되는 경우를 들 수 있습니다.
Lighthouse는 항상 이 상황에 대해 경고했지만 ID가 반복된 요소의 첫 번째 인스턴스만 표시했기 때문에 일부 사용자는 문제가 되는 모든 요소가 표시된다고 가정하여 혼란을 겪곤 했습니다. Lighthouse에서 단일 요소만 표시되었으므로 단일 요소가 중복으로 신고되는 것이 버그라고 가정했습니다.
이제 Lighthouse 9.0에서는 해당 ID를 공유하는 모든 요소가 표시됩니다.
이 '관련 노드' 기능은 axe-core에서 제공하므로 다른 접근성 감사에도 표시될 수 있습니다.
자세한 내용은 사용자 신고 수집 문제 및 구현 풀 리퀘스트를 참고하세요.
Lighthouse 실행
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팀에 문의하세요.