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