Lighthouse 사용법

Lighthouse 개요

Lighthouse는 웹페이지 품질을 개선하는 데 도움이 되는 오픈소스 자동화 도구이다. 공개 웹페이지 또는 인증이 필요한 웹페이지에서 실행할 수 있으며, 성능, 접근성, SEO 등에 대한 검사 기능이 있다.

Lighthouse 검사 전 항목

Mode

Navigation: Lighthouse의 기본 값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
Snapshop: 현재 상태의 성능 문제를 분석

Device

Desktop:
- 데스크톱 환경으로 검사 진행
- CPU throttling 1x(제한 없음) 적용
- 상대적으로 빠른 CPU 성능과 안정적인 네트워크 환경을 가정하여 측정
Mobile:
- 모바일 환경으로 검사 진행
- CPU throttling 4x(데스크톱보다 느린 CPU 성능으로 시뮬레이션) 적용
- 모바일 사이즈의 화면과 제한된 네트워크 환경에서 성능 측정

Lighthouse 검사 후 항목

가장 위에 보이는 숫자는 Lighthouse가 측정한 웹 페이지의 종합 성능 점수이다. 이 점수는 6가지 지표(metrics)에 가중치를 적용해 평균 낸 점수이다. 이러한 지표를 웹 바이탈(Web Vitals)이라고 부른다.

Metrics

First Contentful Paint(FCP)

페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간에 관한 지표.

총점을 계산할 때, 10%의 가중치를 갖는다.

Speed Index(SI)

페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표.

위 이미지 예시처럼 A 페이지와 B 페이지를 각각 로드했을 때, 두 페이지 모두 전체 화면이 표시되는 데 4초라는 동일한 시간이 걸렸지만, A 페이지는 일부 콘텐츠가 B 페이지보다 먼저 떴음을 알 수 있다. 이런 경우 A 페이지가 B 페이지보다 전체적으로 더 빨리 로드된 것으로 계산되며, 더 높은 점수를 받는다.

총점을 계산할 때, 10%의 가중치를 갖는다.