Lighthouse

구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴, 크롬 확장에 있다!

사용법

Lighthouse를 설치한다. 이때-g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋다!

npm install -g lighthouse

다음의 명령어로 검사를 실행할 수 있음.

lighthouse <url>

다음의 명령어로 모든 옵션을 볼 수 있음.

lighthouse --help 

Lighthouse 분석 결과 항목

1. Performance
   Performance 항목에서는 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.

2. Accessibility
   Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

3. Best Practices
   Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.

4. SEO
   SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

5. PWA (Progressive Web App)
   PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

이걸 보고 개선 방향 잡을 수 있다!
Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해주고, Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있음.

실습

네이버 사이트를 Lighthouse로 해보겠다!이렇게 나왔다.

세부사항은 이렇게 나왔다.

OPPORTUNITIES

Opportunities는 이렇다.

1등

1위는 이미지를 공통화해 최적화하라는 의미다. 위 처럼 이미지들을 png가 아닌 차세대 이미지 형식인 WebP, AVIF를 써야한다.

2등

쓰이지 않는 JS 코드를 줄여 지연시킨다. 좀더 리팩토링에 힘쓸것