Lighthouse에서 전반적인 성능 점수를 계산하는 방법
일반적으로 기회 또는 진단의 결과가 아니라 측정항목만 Lighthouse 실적 점수에 기여합니다. 하지만 기회와 진단을 개선하면 측정항목 값이 개선될 가능성이 높으므로 간접적인 관계가 있습니다.
아래에는 점수가 변동되는 이유와 구성 방식, Lighthouse에서 각 개별 측정항목에 점수를 매기는 방식이 간략히 설명되어 있습니다.
점수가 변동되는 이유
전반적인 실적 점수와 측정항목 값의 변동은 대부분 Lighthouse로 인한 것이 아닙니다. 실적 점수가 변동되는 것은 일반적으로 기저 조건의 변화로 인해 발생합니다. 일반적인 문제는 다음과 같습니다.
- 게재되는 광고의 A/B 테스트 또는 변경사항
- 인터넷 트래픽 라우팅 변경사항
- 고성능 데스크톱 및 저성능 노트북과 같은 다양한 기기에서 테스트
- JavaScript를 삽입하고 네트워크 요청을 추가/수정하는 브라우저 확장 프로그램
- 바이러스 백신 소프트웨어
Lighthouse의 가변성 문서에서 이 문제를 자세히 다룹니다.
또한 Lighthouse에서 단일 전체 성능 점수를 제공할 수 있지만 사이트 성능을 단일 숫자가 아닌 점수 분포로 생각하는 것이 더 유용할 수 있습니다. 이유를 알아보려면 사용자 중심적인 성능 측정항목 소개를 참고하세요.
실적 점수에 가중치가 부여되는 방식
성능 점수는 측정항목 점수의 가중 평균입니다. 가중치가 더 높은 측정항목일수록 전반적인 실적 점수에 더 큰 영향을 미칩니다. 측정항목 점수는 보고서에 표시되지 않지만 내부적으로 계산됩니다.
등대 10
| 감사 | 무게 |
|---|---|
| 콘텐츠가 포함된 첫 페인트 | 10% |
| 속도 지표 | 10% |
| 최대 콘텐츠 렌더링 시간 | 25% |
| 총 차단 시간 | 30% |
| 누적 레이아웃 변경 | 25% |
등대 8
| 감사 | 무게 |
|---|---|
| 콘텐츠가 포함된 첫 페인트 | 10% |
| 속도 지표 | 10% |
| 최대 콘텐츠 렌더링 시간 | 25% |
| 상호작용까지의 시간 | 10% |
| 총 차단 시간 | 30% |
| 레이아웃 변경 횟수 | 15% |
측정항목 점수 결정 방법
Lighthouse는 성능 측정항목 (대부분 밀리초 단위로 보고됨)을 수집한 후 측정항목 값이 Lighthouse 점수 분포에서 어디에 해당하는지 확인하여 각 원시 측정항목 값을 0~100 사이의 측정항목 점수로 변환합니다. 점수 분포는 HTTP 보관의 실제 웹사이트 성능 데이터의 성능 측정항목에서 파생된 로그 정규 분포입니다.
예를 들어 콘텐츠가 포함된 최대 페인트 (LCP)는 사용자가 페이지에서 가장 큰 콘텐츠가 표시된다고 인식하는 시점을 측정합니다. LCP의 측정항목 값은 사용자가 페이지 로드를 시작하고 페이지가 기본 콘텐츠를 렌더링하는 시점 사이의 시간을 나타냅니다. 실제 웹사이트 데이터를 기반으로 실적이 우수한 사이트는 약 1,220ms 내에 LCP를 렌더링하므로 측정항목 값이 99점으로 매핑됩니다.
좀 더 자세히 살펴보면 Lighthouse 스코어링 곡선 모델은 HTTPArchive 데이터를 사용하여 두 제어점을 결정한 다음 log-normal 곡선의 모양을 설정합니다. HTTP 보관 데이터의 25번째 백분위수는 50점 (중앙값 제어점)이 되고 8번째 백분위수는 90 (양호/녹색 제어점) 점수가 됩니다. 점수 곡선 플롯을 살펴보면 0.50과 0.92 사이에서는 측정항목 값과 점수 간에 거의 선형적인 관계가 있습니다. 점수가 0.96 정도면 '한계점'입니다. 점수가 높을수록 곡선이 멀어지므로 이미 높은 점수를 개선하려면 점점 더 많은 측정항목을 개선해야 합니다.
데스크톱과 모바일의 처리 방식
앞서 언급한 대로 점수 곡선은 실제 실적 데이터에서 결정됩니다. Lighthouse v6 이전에는 모든 점수 곡선이 모바일 성능 데이터를 기반으로 했지만 데스크톱 Lighthouse 실행에서는 이를 사용합니다. 실제로 이로 인해 데스크톱 점수가 인위적으로 부풀려졌습니다. Lighthouse v6에서는 특정 데스크톱 점수를 사용하여 이 버그를 수정했습니다. 물론 성능 점수는 5~6점 사이의 전반적인 변화를 기대할 수 있지만 데스크톱 점수는 크게 다릅니다.
점수의 색상 분류 방식
측정항목 점수와 성능 점수는 다음 범위에 따라 색상이 지정됩니다.
- 0~49 (빨간색): 나쁨
- 50~89점(주황색): 개선 필요
- 90~100(녹색): 양호함
만족스러운 사용자 경험을 제공하려면 사이트의 점수가 90~100점으로 높아야 합니다. '완벽한' 점수인 100을 달성하기는 매우 어렵고 기대하지 않습니다. 예를 들어 99에서 100 사이의 점수를 가져오려면 90~94가 필요한 것과 거의 동일한 양의 측정항목 개선이 필요합니다.
개발자는 성능 점수를 개선하기 위해 무엇을 할 수 있나요?
먼저 Lighthouse 점수 계산기를 사용하여 Lighthouse 성능 점수를 달성하는 데 목표로 해야 하는 기준을 알아보세요.
Lighthouse 보고서의 기회 섹션에는 이를 구현하는 방법에 관한 자세한 제안사항과 문서가 있습니다. 또한 진단 섹션에는 개발자가 실적을 더욱 개선하기 위해 살펴볼 수 있는 추가 안내가 나와 있습니다.