Lighthouse는 웹 앱의 품질을 개선하기 위한 오픈소스 자동화 도구입니다. Chrome 확장 프로그램으로 설치하거나 Node 명령줄 도구로 실행할 수 있습니다. Lighthouse에 URL을 입력하면 Lighthouse에서 페이지 테스트를 여러 번 실행한 후 페이지의 성능을 설명하는 보고서와 개선이 필요한 영역을 보여주는 보고서를 생성합니다.
오늘 128개 이상의 PR이 포함된 대규모 버전인 Lighthouse의 1.5 출시를 발표하게 되어 기쁩니다. Lighthouse 1.5에는 여러 가지 새로운 기능, 감사, 일반적인 버그 수정이 포함되어 있습니다. npm (npm i -g lighthouse)에서 설치하거나 Chrome 웹 스토어에서 확장 프로그램을 다운로드할 수 있습니다.
새 감사
CSS 사용 감사는 페이지에서 사용되지 않는 스타일 규칙의 수와 이를 삭제할 경우 절감된 비용/시간을 보고합니다.
최적화된 이미지 감사는 최적화되지 않은 이미지와 이를 최적화하는 데 따른 비용/시간 절약을 보고합니다.
반응형 이미지 감사는 너무 큰 이미지와 지정된 기기에 맞게 이미지 크기를 올바르게 조정함으로써 절감할 수 있는 비용/시간을 보고합니다.
페이지에서 지원 중단된 API 또는 개입이 있는 기능을 사용하는 경우 지원 중단 및 개입 감사에 Chrome의 콘솔 경고가 표시됩니다.
변경사항 신고
보시다시피 표 형식 데이터를 추가하고, 관련 없는 도움말 텍스트를 숨기고, 데이터를 더 쉽게 탐색할 수 있도록 새로운 기능을 추가하여 보고서를 시각적으로 복잡하게 만드는 데 집중했습니다.
에뮬레이션 설정
특정 Lighthouse 실행에 사용된 제한 및 에뮬레이션 설정을 잊어버리기 쉽습니다. 이제 Lighthouse 보고서에 보고서를 만드는 데 사용된 런타임 에뮬레이션 설정, 즉 장기 기능 요청이 포함됩니다.
더 유용한 trace 데이터
'유의미한 첫 페인트', '상호작용 시간' 등의 Lighthouse 측정항목은 사용자 시간 측정으로 모의 처리되고 --save-assets 플래그로 저장된 트레이스 데이터에 다시 삽입됩니다.
--save-assets 플래그를 사용하는 경우 이제 trace를 DevTools에 드롭하거나 DevTools 타임라인 뷰어에서 열 수 있습니다.
페이지 로드의 전체 trace와 함께 주요 측정항목을 확인할 수 있습니다.
Lighthouse 뷰어
HTML 보고서에는 보고서를 다양한 형식으로 내보낼 수 있는 옵션이 포함된 새 버튼이 표시됩니다. 이러한 옵션 중 하나는 '뷰어에서 열기'입니다. 이 버튼을 클릭하면 보고서가 온라인 뷰어로 전송되며, 여기에서 보고서를 GitHub 사용자와 추가로 공유할 수 있습니다.
내부적으로 뷰어는 OAuth를 통해 GitHub 보안 비밀 gist를 만들고 여기에 보고서를 저장할 권한을 얻습니다. Gist로 실행되므로 보고서 공유를 완전히 제어할 수 있으며 언제든지 삭제할 수 있습니다. GitHub 설정에서 gists를 만드는 뷰어의 권한을 취소할 수 있습니다.
실적 실험
성능 실험 프로젝트의 첫 번째 버전이 1.5.0에서 출시되었습니다. 이를 통해 페이지 로드 성능을 실험하고 개발 중 중요 경로의 애셋 차단 또는 지연 효과를 대화형으로 테스트할 수 있습니다.
Lighthouse가 --interactive 플래그로 실행되면 비용이 많이 드는 페이지 리소스를 대화형으로 선택할 수 있는 특수 보고서가 생성됩니다. 그런 다음 실험 서버는 해당 리소스를 차단한 상태에서 해당 페이지에서 Lighthouse를 다시 실행합니다.
Lighthouse의 성능 실험에 관해 자세히 알아보세요.
새 문서
마지막으로 developers.google.com/web/tools/lighthouse/의 문서를 현대화하고 새로운 감사 참조를 추가했습니다.
여기까지입니다.
Lighthouse의 최신 소식에 관한 자세한 내용은 GitHub의 전체 출시 노트를 참고하세요. 늘 그렇듯이 Google에 요청하여 버그를 신고하거나, 기능을 요청하거나, 다음 단계에 대해 아이디어를 브레인스토밍해 주세요.