Lighthouse (등대)

개요

• 웹페이지 성능 검사와 개선책을 제공해주는 성능 측정 도구입니다.
• 문자 그대로 웹페이지 전반의 성능 개선의 등대와 같은 역할을 합니다.
• 구글에서 개발한 오픈소스 자동화 툴입니다.

튜토리얼 (개발자 도구)

1. 크롬에서 검사하고 싶은 페이지에 접속합니다.
2. 개발자 도구를 엽니다.
3. lighthouse 탭을 엽니다.
4. Analyze page load 를 클릭합니다. (Mode, Device, Categories 를 지정할 수 있습니다.)
5. 대략 30-60 초간의 검사 합니다.
6. 검사가 완료되면 해당 페이지의 개발자 도구내에 리포트가 생성됩니다.

튜토리얼 (Node CLI)

1. Lighthouse 를 설치합니다.
   $ npm intall -g lighthouse

2. 명령어를 검사를 실행할 수 있습니다.
   $ lighthouse <url>

3. 다음의 명령어로 모든 옵션을 볼 수 있습니다.
   lighthouse --help

분석 결과 항목 개요

1. Performance (웹 성능)
   • 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지
   • 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지
   • 화면에 불안정한 요소는 없는지

2. Accessibility (웹 접근성)
   • 대체 텍스트를 잘 작성했는지
   • 배경색과 콘텐츠 색상의 대비가 충분한지
   • 적절한 WAI-ARIA 속성을 사용했는지

3. Best Practices (웹 표준 모범 사례)
   • HTTPS 프로토콜을 사용하는지
   • 콘솔 창에 오류가 표시 되지 않는지

4. SEO (검색 엔진 최적화)
   • robots.txt 가 유효한지
   • 요소 잘 작성되어 있는지
   • 텍스트 크기가 읽기에 무리가 없는지

5. PWA (Progressive Web App)
   • 앱 아이콘을 제공하는지
   • 스플래시 화면이 있는지
   • 화면 크기에 맞는 콘테를 적절하게 배치했는지

참조 : 코드스테이츠 프론트엔드 부트캠프, Lighthouse 공식문서