[Optimization]Lighthouse

February 1, 2023

Lighthouse

성능 측정을 할 수 있는 도구

다양한 지표를 이용, 웹페이지의 성능 검사, 개선책 제공

구글에서 개발한 오픈소스, 웹 페이지 품질 개선 자동화 툴

성능, 접근성, PWA, SEO 등을 검사

Chrome DevTools, CLI, 노드 모듈 등 다양한 경로로 사용 가능

검사할 페이지의 url을 Lighthouse에 전달

설치(전역 추천) npm install -g lighthouse
검사 lighthouse <url>
옵션 보기 lighthouse --help
동적 프로그래밍하여 페이지 검사 리포트 생성(https://github.com/GoogleChrome/lighthouse/blob/main/docs/readme.md#using-programmatically)

Performance
- 웹 성능 측정
- 화면에 콘텐츠가 표시되는데 시간
- 표시된 후 사용자와 상호작용하기 시간
- 화면에 불안정한 요소는 없는지
Accessibility
- 웹 접근성을 잘 갖추고 있는지 확인
- 대체 텍스트를 잘 작성했는지
- 배경색과 콘텐츠 색상의 대비가 충분한지
- 적절한 WAI-ARIA 속성을 사용했는지
Best Practices
- 웹 표준 모범 사례를 잘 따르고 있는지
- HTTPS 프로토콜을 사용하는지
- 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지
SEO
- 검색 엔진 최적화가 잘 되어있는지
- 애플리케이션의 robots.txt가 유효한지
- <meta> 요소는 잘 작성되어 있는지
- 텍스트 크기가 읽기에 무리가 없는지
PWA (Progressive Web App)
- 모바일 애플리케이션으로서도 잘 작동하는지
- 앱 아이콘을 제공하는지
- 스플래시 화면이 있는지
- 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지
- 점수가 아닌 체크리스트로 확인

성능(Performance) 지표 추적 메트릭

FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다. 즉 사용자가 감지하는 페이지의 로딩속도를 측정할 수 있습니다. 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 합니다.

페이지의 이미지와