Lighthouse는 웹사이트 감사 도구로, 개발자에게 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공합니다.
Lighthouse 10은 명령줄에서 npm을 통해, 그리고 Chrome Canary에서 즉시 사용할 수 있습니다. Chrome 112에서 Chrome 안정화 버전으로 출시되며 향후 몇 주 내에 PageSpeed Insights에서 제공될 예정입니다.
점수 변화
오래된 TTI (상호작용 시간) 측정항목이 Lighthouse 10에서 삭제되고 Lighthouse 8에서 시작된 지원 중단 프로세스가 마무리됩니다. TTI의 10% 점수 가중치는 레이아웃 변경 횟수 (CLS)로 바뀌고 있으며, CLS는 이제 전체 성능 점수의 25% 를 차지합니다.
TTI는 특정 시점을 표시하지만 정의되는 방식으로 인해 이상점 네트워크 요청과 장기 작업에 지나치게 민감합니다. 최대 콘텐츠 페인트 (LCP) 및 속도 색인은 일반적으로 활성 네트워크 요청 수보다 페이지 콘텐츠가 로드되어 있다고 느낄 때 더 나은 휴리스틱입니다. 한편 총 차단 시간 (TBT)은 긴 작업과 기본 스레드 가용성을 더 안정적으로 처리하고, 직접 프록시는 아니지만 현장에서 측정된 코어 웹 바이탈과의 상관관계가 더 높은 경향이 있습니다.
CLS의 가중치 증가는 TTI 삭제에 따른 부수적인 결과이지만, Core Web Vitals로서의 CLS의 중요성을 더 잘 반영하며, 여전히 불필요한 레이아웃 변경을 하는 사이트에 대한 집중도를 높이는 것이 이상적입니다.
이렇게 하면 대부분의 페이지의 대부분의 페이지가 TTI보다 CLS에서 더 높은 점수를 받는 경향이 있기 때문입니다. 최신 HTTP Archive 실행에서 1, 300만 건의 페이지 로드를 분석한 결과, 이러한 페이지의 90% 는 Lighthouse 성능 점수가 개선되었으며 50% 에서는 5포인트 이상 성능 개선을 경험했습니다.
![총 점수를 구성하는 측정항목 (FCP, SI, LCP, TBT, CLS)별로 분류된 Lighthouse 점수 게이지](https://developer.chrome.com/static/blog/lighthouse-10-0/image/a-lighthouse-score-gauge-af1b4e727c113.png?authuser=19&hl=ko)
어떤 이유로든 Lighthouse TTI 값이 여전히 필요한 경우 (예: CI 어설션에서) 이 값은 Lighthouse JSON 출력에서 변경 없이 계속 사용할 수 있으며 점수 가중치가 0이고 HTML 보고서에 숨겨집니다. JSON 값의 스크립트 액세스는 변경 없이 계속 작동합니다.
새 감사
Lighthouse 10에는 완전히 새로운 성능 감사와 중요한 변경사항이 도입되었습니다.
뒤로-앞으로 캐시
뒤로-앞으로 캐시 (bfcache)는 실제 사용자의 페이지 성능을 개선하는 데 사용할 수 있는 가장 강력한 도구 중 하나입니다. 일반 브라우저 캐시 외에도 bfcache에서 로드된 페이지는 페이지 레이아웃과 실행 상태를 거의 즉시 복원합니다. 대부분의 페이지 로드 활동을 건너뛰고 사용자가 기록을 앞뒤로 탐색할 때 사용자가 즉시 페이지를 볼 수 있게 합니다.
그러나 페이지가 브라우저가 bfcache에서 페이지를 복원하지 못하게 하는 몇 가지 방법이 있습니다. 이 새로운 Lighthouse 감사는 실제로 테스트 페이지에서 벗어났다가 다시 돌아와 bfcache 사용 가능 여부를 테스트하고 실패하는 경우 이유를 나열합니다.
![bfcache 감사 결과 예시로, 열린 IndexDB 연결로 인한 실패와 페이지의 로드 취소 핸들러가 나열되어 있습니다.](https://developer.chrome.com/static/blog/lighthouse-10-0/image/an-example-result-the-bf-5819bf7710451.png?authuser=19&hl=ko)
자세한 내용은 bfcache 감사 문서를 참고하세요.
입력 붙여넣기 방지
이전 권장사항 감사는 '사용자가 비밀번호 입력란에 붙여넣을 수 있도록 허용' 읽기 전용이 아닌 입력란에 붙여넣기가 작동하는지 확인할 수 있도록 확장되었습니다. 대부분의 사이트에서 붙여넣기 방지는 사용자 환경에 부정적인 영향을 미치며 합법적인 안전 및 접근성 워크플로를 방해합니다.
새로운 감사는 '사용자가 입력란에 붙여넣을 수 있도록 허용'으로 변경되었습니다. (paste-preventing-inputs
)
노드 사용자
Lighthouse를 Node 라이브러리로 사용하는 경우, 이 릴리스에서는 몇 가지 프로그래밍 방식의 브레이킹 체인지를 고려해야 할 수도 있습니다. 자세한 내용은 10.0 변경 로그를 참고하세요.
Lighthouse 10에는 전체 TypeScript 유형 선언도 포함되어 있습니다. 이제 lighthouse
에서 가져온 모든 항목을 입력할 수 있습니다. 이는 Lighthouse 사용자 흐름을 스크립팅하는 경우 특히 유용합니다.
![Lighthouse를 함수로 가져오는 노드 스크립트로, 함수에 전달된 옵션 객체가 이제 TypeScript에 의해 유형 확인됨을 보여줍니다.](https://developer.chrome.com/static/blog/lighthouse-10-0/image/a-node-script-importing-l-94bd6d132bf88.png?authuser=19&hl=ko)
유형을 사용해 보고 문제가 발생하면 알려주세요.
달리는 등대
Lighthouse는 Chrome DevTools, npm (노드 모듈 및 CLI 도구로) 및 브라우저 확장 프로그램 (Chrome 및 Firefox)으로 사용할 수 있습니다. 또한 PageSpeed Insights를 비롯하여 여러 Google 서비스를 지원합니다.
Lighthouse Node CLI를 사용해 보려면 다음 명령어를 사용합니다.
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse팀에 문의하기
새로운 기능, Lighthouse 10 버전의 변경사항 또는 Lighthouse와 관련된 다른 내용을 논의하려면 다음을 참고하세요.
- Lighthouse GitHub Issue Tracker에서 문제를 신고하거나 의견을 제출하세요.
- Lighthouse GitHub 토론 포럼에서 궁금한 점을 물어보세요.
- 트위터(@____lighthouse)에서 Lighthouse팀에 문의하세요.