🔍 Lighthouse
구글에서 개발한 오픈 소스로, 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
구체적으로, 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 어떤 웹페이지든 품질 검사를 할 수 있으며, Chrome DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있다.
검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행한 후, 검사 결과에 따른 리포트를 생성한다.
따라서, 개발자는 리포트를 통해 점수가 낮은 지표를 볼 수 있으며, 각각의 지표의 중요성 및 개선 방법에 대한 레퍼런스를 참고할 수 있다.
-
Chrome 개발자 도구에서 실행하는 경우, 크롬에서 검사하고 싶은 페이지의 url을 입력한 뒤, 개발자 도구를 열러 lighthouse 탭을 클릭한다.
다음으로, Generate report를 누르면 30~60초간의 검사가 실행된다. 이 때, Cateogories에서 특정한 지표만 선택하여 검사할 수도 있다. -
Node CLI에서 실행하는 경우,
npm install -g lighthouse를 입력해 lighthouse를 전역 모듈로 설치하고,lighthouse <url>을 입력해 검사를 실행한다.
👀 Lighthouse 분석 결과 항목
아래는 Chrome 개발자 도구에서 lighthouse를 실행한 예시이다.(https://www.google.com/)
-
성능(Performance)
화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다. -
접근성(Accessibility)
대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다. -
권장사항(Best Practices)
웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인하는 항목으로, HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인한다. -
SEO
웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인하는 항목으로, 애플리케이션의robots.txt가 유효한지,<meta>요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인한다. -
PWA (Progressive Web App)
해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인하는 항목으로, 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.
추천 및 진단 항목(Opportunities, Diagnostics)을 확인해 각 측정항목(Matrics)별 문제를 확인하고 최적화의 방향을 잡을 수 있다.
🔥 예시
아래는 메이플스토리 메인 페이지를 대상으로 Chrome 개발자 도구에서 lighthouse를 실행한 예시이다.
(https://maplestory.nexon.com/Home/Main)
아래의 항목은 HTML의 <picture> 태그와 함께 안내사항과 같이 Webp 및 AVIF 이미지 포맷을 사용하여 최적화할 수 있을 것 같다.
아래의 항목 또한 위와 같이 Webp 및 AVIF 이미지 포맷을 사용하면 어느정도 최적화가 가능할 것이며, 그외 이미지를 최적화하는 방법으로 이미지 CDN 사용, 이미지 압축, 애니메이션 GIF를 비디오로 대체, 이미지 로딩 지연, 반응형 이미지 제공,올바른 크기의 이미지 제공 등의 방법이 있다.
아래의 항목에서 안내사항을 보면 상호 작용까지 시간을 낮추기 위해 모든 중요한 리소스가 로드를 완료한 후에 이러한 이미지를 지연 로드하는 것을 권장하고 있다.
리포트에서 제시한 해결방안을 보면, lazysizes codelab을 사용하여 최적화할 수 있다고 한다.
https://web.dev/codelab-use-lazysizes-to-lazyload-images/
Reference: 코드스테이츠
