Lighthouse 3.0 출시 3.0은 빠른 감사, 낮은 편차, 새 보고서 UI, 새로운 감사 등을 제공합니다.
3.0으로 업데이트하는 방법
- CLI.
npm install -g lighthouse@next를 실행합니다. - 노드.
npm install lighthouse@next를 실행합니다. - Chrome 확장 프로그램. 확장 프로그램이 3.0으로 자동 업데이트됩니다.
- Chrome DevTools를 사용합니다. Lighthouse 3.0은 Chrome 69에서 제공됩니다.
감사 속도 향상 및 변동 감소
Lighthouse 3.0은 다음과 같은 몇 가지 변경사항 덕분에 실행 간의 편차를 줄이고 감사를 더 빠르게 완료합니다.
- 제한 시뮬레이션. 이전에는 Lighthouse에서 감사를 실행하기 전에 실제로 페이지를 제한했습니다. 이제 Lighthouse는 코드명이 Lantern인 새로운 내부 감사 엔진을 사용하여 일반 네트워크 및 CPU 설정에서 감사를 실행한 다음 모바일 조건에서 페이지를 로드하는 데 걸리는 시간을 예측합니다.
- 대기 시간 단축. 페이지 로드가 완료되었는지 확인하려면 Lighthouse는 네트워크와 CPU에 활동이 없을 때까지 기다려야 합니다. v3에서는 이 대기 시간이 더 적습니다.
새 보고서 UI
Lighthouse 3.0은 Lighthouse 팀과 Chrome UX (연구 및 디자인)팀의 공동작업 덕분에 새로운 보고서 UI를 제공합니다.
호출 변경사항
이제 Lighthouse의 Node 버전이 CLI 버전과 동일한 구성 옵션을 지원합니다. v2에서 Node Lighthouse 모듈을 구성한 방법에 따라 브레이킹 체인지가 될 수 있습니다. 자세한 내용은 호출 변경사항을 참고하세요.
점수 변경
Lighthouse 3.0에서는 성능 감사에 대한 점수 모델이 변경됩니다. 점수 50은 75번째 백분위수를 나타내고, 100점은 수익 감소 지점인 98번째 백분위수를 나타냅니다.
성능 점수는 실적 감사에 대한 가중치가 적용된 평균입니다. v3에서도 감사 가중치가 변경됩니다.
| 감사 이름 | v2 가중치 | v3 가중치 |
|---|---|---|
| 콘텐츠가 포함된 첫 페인트 (v3의 새로운 기능) | N/A | 3 |
| 첫 번째 의미 있는 페인트 | 5 | 1 |
| 첫 번째 CPU 유휴 상태 (v2에서 첫 번째 상호작용) | 5 | 3 |
| 상호작용 시작 시간 (v2에서 일관성 있게 상호작용) | 5 | 5 |
| 체감 속도 색인 | 1 | N/A |
| 속도 색인 | N/A | 4 |
| 예상 입력 지연 시간 | 1 | 0 |
앞으로 Lighthouse v3 점수 가이드는 Lighthouse v3의 점수 산정 방식과 관련해 알아야 할 모든 정보를 제공합니다.
새로운 출력 형식 및 변경사항
CSV 출력 지원
이제 보고서 결과를 CSV로 출력할 수 있습니다. 각 행에는 한 번의 감사를 위한 정보와 결과가 포함됩니다.
- 감사가 속한 카테고리의 이름입니다.
- 감사의 이름입니다.
- 감사의 설명입니다.
- 감사에 사용되는 점수 유형입니다.
- 점수 값입니다.
JSON 출력 변경사항
버전 3.0에서는 Lighthouse의 JSON 출력 형식이 많이 변경되었습니다. 자세한 내용은 Lighthouse v3 이전 가이드를 참고하세요.
새 감사
콘텐츠가 포함된 첫 페인트
텍스트 또는 이미지 콘텐츠가 사용자의 화면에 처음 그려지는 시간을 측정합니다.
robots.txt가 유효하지 않음
검색 봇이 사이트를 크롤링할 수 있도록 사이트의 robots.txt 파일 형식이 올바른지 확인합니다.
애니메이션 콘텐츠에 동영상 형식 사용
GIF를 video 태그로 대체하여 동영상 파일 크기를 크게 줄일 수 있습니다.
자세한 내용은 애니메이션 GIF를 동영상으로 대체를 참조하세요.
출발지로 비용이 많이 드는 왕복 여러 번을 피할 수 있습니다.
rel="preconnect" 속성을 link 태그에 추가하여 로드 성능을 개선합니다. 이렇게 하면 브라우저에 최대한 빨리 출처에 연결하도록 알립니다.
자세한 내용은 사전 연결을 참고하세요.
변경사항 감사
첫 번째 상호작용 ➡ 첫 번째 CPU 유휴 상태
첫 번째 상호작용 감사가 작동 방식을 더 잘 설명하기 위해 첫 번째 CPU 유휴로 이름이 변경되었습니다. 감사의 일반적인 목적은 동일합니다. 이 감사를 사용하여 사용자가 페이지와 처음 상호작용할 수 있는 시점을 측정합니다.
속도 색인 ➡ 속도 색인
Lighthouse 3.0에서 인지 속도 색인 감사가 이제 속도 색인으로 변경되었습니다. 이 변경사항에 따라 Lighthouse는 WebPageTest에서 이 측정항목을 측정하는 방식과 일치합니다. 감사의 목적은 동일하지만 기본 측정항목은 약간 다릅니다.