Google I/O 이후 Google은 Lighthouse를 훌륭한 프로그레시브 웹 앱을 빌드하기 위한 멋진 도구로 만들기 위해 노력해 왔습니다.
오늘 Lighthouse 1.3 버전 출시를 발표하게 되어 기쁩니다. Lighthouse 1.3에는 여러 가지 중요한 새 기능, 감사, 일반적인 버그 수정이 포함되어 있습니다. npm (npm i -g lighthouse)에서 설치하거나 Chrome 웹 스토어에서 확장 프로그램을 다운로드할 수 있습니다.
새로운 기능은 무엇인가요?
새로운 디자인과 분위기
이전 버전의 Lighthouse를 사용해 봤다면 로고가 새로워진 것을 눈치채셨을 겁니다. HTML 보고서와 Chrome 확장 프로그램도 완전히 업데이트되어 점수가 더 명확하게 표시되고 감사 결과 간에 일관성이 높아졌습니다. 또한 테스트에 실패할 때 유용한 디버그 정보가 추가되었으며 권장 해결 방법에 대한 포인터도 포함되어 있습니다.
새로운 권장사항
지금까지 Lighthouse는 성능 측정항목과 PWA의 품질에 중점을 두었습니다. 하지만 이 프로젝트의 전반적인 목표는 모든 웹 개발을 위한 가이드북을 제공하는 것입니다. 여기에는 일반적인 권장사항, 성능 및 접근성 팁, 양질의 앱을 만드는 데 관한 엔드 투 엔드 도움말이 포함되어 있습니다.
'더 나은 웹'은 개발자가 웹에서 더 나은 실적을 내도록 지원하기 위한 Lighthouse 프로젝트의 노력입니다. 즉, 웹 애플리케이션을 현대화하고 최적화하도록 지원합니다. 웹 개발자는 종종 오래된 관행, 안티패턴을 사용하거나 알지 못하는 사이에 알려진 성능 함정에 빠집니다. 예를 들어 JS 기반 애니메이션은 setInterval() 대신 requestAnimationFrame()로 실행해야 한다는 것은 널리 알려진 사실입니다. 하지만 개발자가 최신 API를 모르면 웹 앱이 불필요하게 영향을 받습니다.
Lighthouse 1.3에는 CSS 및 JavaScript 기능을 현대화하기 위한 도움말부터 '렌더링 차단 애셋의 수를 줄이기', '패시브 이벤트 리스너를 사용하여 스크롤 성능 개선'과 같은 성능 권장사항에 이르기까지 20개가 넘는 새로운 권장사항이 포함되어 있습니다.
앞으로도 계속해서 추천을 추가할 예정입니다. 권장사항에 관한 제안이 있거나 감사를 작성하는 데 도움을 주고 싶다면 GitHub에서 문제를 제출하세요.
보고서 뷰어
마지막으로 Lighthouse 결과를 위한 새로운 웹 뷰어를 발표합니다. googlechrome.github.io/lighthouse/viewer를 방문하여 Lighthouse 실행의 출력을 드래그 앤 드롭하거나 파일을 클릭하여 업로드합니다. 'Insta' Lighthouse HTML 보고서
Lighthouse 뷰어를 사용하면 보고서를 다른 사용자와 공유할 수도 있습니다. 공유 아이콘을 클릭하면 GitHub에 로그인됩니다. 공유 보고서를 쉽게 삭제하거나 나중에 업데이트할 수 있도록 보고서가 계정에 비밀 gist로 저장됩니다. 데이터 저장소로 GitHub를 사용하면 버전 관리도 무료로 이용할 수 있습니다.
Lighthouse Viewer에서 URL에 ?gist=GIST_ID를 추가하여 기존 보고서를 새로고침할 수 있습니다.
Lighthouse의 최신 기능에 관한 자세한 내용은 GitHub의 전체 출시 노트를 참고하세요. 언제나 그렇듯이 버그를 신고하거나, 기능 요청을 제출하거나, 다음에 추가되었으면 하는 기능에 관한 아이디어를 브레인스토밍하려면 문의해 주세요.