Lighthouse로 더 나은 웹 빌드

Google I/O 이후 Google은 Lighthouse를 프로그레시브 웹 앱을 빌드하기 위한 훌륭한 동반자가 되기 위해 노력해 왔습니다.

오늘 Lighthouse 1.3 출시를 발표하게 되어 기쁩니다. Lighthouse 1.3에는 여러 가지 새로운 기능, 감사, 일반적인 버그 수정이 포함되어 있습니다. npm (npm i -g lighthouse)에서 설치하거나 Chrome 웹 스토어에서 확장 프로그램을 다운로드할 수 있습니다.

새로운 기능

새로운 디자인

이전 버전의 Lighthouse를 사용해 보았다면 새 로고임을 알 수 있습니다. HTML 보고서와 Chrome 확장 프로그램도 더욱 깔끔하게 표시되고 평가 결과에서 일관성이 높아졌습니다. 또한 테스트에 실패했을 때 유용한 디버그 정보를 추가하고 권장 해결 방법을 찾을 수 있는 포인터를 포함했습니다.

Lighthouse 보고서

새로운 권장사항

현재까지 Lighthouse는 PWA의 성능 측정항목과 품질에 중점을 두었습니다. 하지만 이 프로젝트의 가장 중요한 목표는 모든 웹 개발을 위한 가이드북을 제공하는 것입니다. 여기에는 일반 권장사항, 성능 및 접근성 팁에 관한 안내와 고품질 앱을 만들기 위한 엔드 투 엔드 도움말이 포함됩니다.

'더 나은 웹 경험(Do Better Web)'은 개발자가 웹에서 더 나은 성과를 낼 수 있도록 도움을 주는 Lighthouse 프로젝트입니다. 즉, 웹 애플리케이션을 현대화하고 최적화하도록 지원해야 합니다. 웹 개발자는 오래된 관행이나 안티패턴을 사용하거나 잘 알려진 성능 문제를 겪을 때가 많습니다. 예를 들어 JS 기반 애니메이션은 setInterval() 대신 requestAnimationFrame()를 사용하여 실행해야 하는 것으로 널리 알려져 있습니다. 그러나 개발자가 최신 API를 모르는 경우 웹 앱에 불필요하게 문제가 발생합니다.

Lighthouse 1.3에는 CSS 및 JavaScript 기능을 현대화하는 팁부터 '렌더링 차단 애셋 수 줄이기', '패시브 이벤트 리스너를 사용하여 스크롤 성능 개선'과 같은 성능 권장사항에 이르기까지 20가지 이상의 새로운 권장사항 추천이 포함되어 있습니다.

더 나은 웹 권장사항 실행

앞으로 더 많은 추천 항목을 추가할 예정입니다. 권장사항에 대한 제안사항이 있거나 Google에서 감사를 작성하는 데 도움을 주고자 하는 경우 GitHub에서 문제를 제출하세요.

보고서 뷰어

마지막으로 Lighthouse 결과를 위한 새로운 웹 뷰어를 발표하게 되어 기쁩니다. googlechrome.github.io/lighthouse/viewer로 이동하여 Lighthouse 실행의 출력을 드래그 앤 드롭하거나 클릭하여 파일을 업로드하면 됩니다. 'Insta' Lighthouse HTML 보고서입니다.

보고서 보기 권한 사용자
보고서 뷰어

Lighthouse 뷰어를 사용하면 보고서를 다른 사람과 공유할 수도 있습니다. 공유 아이콘을 클릭하면 GitHub에 로그인됩니다. Google은 사용자가 공유된 보고서를 쉽게 삭제하거나 나중에 업데이트할 수 있도록 계정에 비밀 요점으로 보고서를 보관합니다. 데이터 스토리지로 GitHub를 사용하면 버전을 무료로 제어할 수도 있습니다.

뷰어 아키텍처
뷰어 아키텍처

URL에 ?gist=GIST_ID를 추가하면 Lighthouse 뷰어에서 기존 보고서를 다시 로드할 수 있습니다.

뷰어 아키텍처 2.
뷰어 아키텍처 2

Lighthouse의 최신 소식에 관한 자세한 내용은 GitHub의 전체 출시 노트를 참고하세요. 늘 그렇듯이 Google에 요청하여 버그를 신고하거나, 기능 요청을 제출하거나, 다음 기능에 관한 아이디어를 브레인스토밍해 주세요.