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포인트 이상 성능 개선을 경험했습니다.
어떤 이유로든 Lighthouse TTI 값이 여전히 필요한 경우 (예: CI 어설션에서) 이 값은 Lighthouse JSON 출력에서 변경 없이 계속 사용할 수 있으며 점수 가중치가 0이고 HTML 보고서에 숨겨집니다. JSON 값의 스크립트 액세스는 변경 없이 계속 작동합니다.
새 감사
Lighthouse 10에는 완전히 새로운 성능 감사와 중요한 변경사항이 도입되었습니다.
뒤로-앞으로 캐시
뒤로-앞으로 캐시 (bfcache)는 실제 사용자의 페이지 성능을 개선하는 데 사용할 수 있는 가장 강력한 도구 중 하나입니다. 일반 브라우저 캐시 외에도 bfcache에서 로드된 페이지는 페이지 레이아웃과 실행 상태를 거의 즉시 복원합니다. 대부분의 페이지 로드 활동을 건너뛰고 사용자가 기록을 앞뒤로 탐색할 때 사용자가 즉시 페이지를 볼 수 있게 합니다.
그러나 페이지가 브라우저가 bfcache에서 페이지를 복원하지 못하게 하는 몇 가지 방법이 있습니다. 이 새로운 Lighthouse 감사는 실제로 테스트 페이지에서 벗어났다가 다시 돌아와 bfcache 사용 가능 여부를 테스트하고 실패하는 경우 이유를 나열합니다.
자세한 내용은 bfcache 감사 문서를 참고하세요.
입력 붙여넣기 방지
이전 권장사항 감사는 '사용자가 비밀번호 입력란에 붙여넣을 수 있도록 허용' 읽기 전용이 아닌 입력란에 붙여넣기가 작동하는지 확인할 수 있도록 확장되었습니다. 대부분의 사이트에서 붙여넣기 방지는 사용자 환경에 부정적인 영향을 미치며 합법적인 안전 및 접근성 워크플로를 방해합니다.
새로운 감사는 '사용자가 입력란에 붙여넣을 수 있도록 허용'으로 변경되었습니다. (paste-preventing-inputs)
노드 사용자
Lighthouse를 Node 라이브러리로 사용하는 경우, 이 릴리스에서는 몇 가지 프로그래밍 방식의 브레이킹 체인지를 고려해야 할 수도 있습니다. 자세한 내용은 10.0 변경 로그를 참고하세요.
Lighthouse 10에는 전체 TypeScript 유형 선언도 포함되어 있습니다. 이제 lighthouse에서 가져온 모든 항목을 입력할 수 있습니다. 이는 Lighthouse 사용자 흐름을 스크립팅하는 경우 특히 유용합니다.
유형을 사용해 보고 문제가 발생하면 알려주세요.
달리는 등대
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팀에 문의하세요.