Lighthouse는 웹사이트 감사 도구로 개발자가 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공합니다.
Lighthouse 10은 npm을 통해 명령줄과 Chrome Canary에서 즉시 사용할 수 있습니다. 앞으로 몇 주 내에 Chrome 112와 PageSpeed Insights를 통해 Chrome 안정화 버전에 출시될 예정입니다.
점수 변경사항
유서 깊은 TTI (Time To Interactive) 측정항목이 Lighthouse 10에서 삭제되며, Lighthouse 8에서 시작된 지원 중단 프로세스가 마무리됩니다. TTI의 10% 점수 가중치가 누적 레이아웃 변경 (CLS)으로 전환되어 이제 전체 성능 점수의 25% 를 차지합니다.
TTI는 특정 시점을 표시하지만 정의되는 방식 때문에 이상점 네트워크 요청과 장기 작업에 지나치게 민감합니다. 일반적으로 콘텐츠가 포함된 최대 페인트 (LCP) 및 속도 색인은 활성 네트워크 요청 수보다 페이지 콘텐츠가 로드된 느낌을 받을 때 더 나은 휴리스틱입니다. 한편 총 차단 시간 (TBT)은 장기 작업과 기본 스레드 가용성을 더 강력하게 처리하고 직접 프록시는 아니지만 현장에서 측정된 코어 웹 바이탈과 상관관계가 더 높은 경향이 있습니다.
CLS의 비중 증가는 TTI 삭제에 따른 결과이지만 Core Web Vitals로서의 중요성을 더 잘 반영하고 여전히 불필요한 레이아웃 변경을 하는 사이트에 대한 집중도를 높이는 것이 이상적입니다.
대부분의 페이지가 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를 노드 라이브러리로 사용하는 경우 이 출시에 몇 가지 프로그래매틱 방식의 브레이킹 체인지를 고려해야 할 수 있습니다. 자세한 내용은 10.0 변경 기록을 참고하세요.
Lighthouse 10도 전체 TypeScript 유형 선언과 함께 제공됩니다. 이제 lighthouse에서 가져온 모든 항목을 입력해야 합니다. 이는 Lighthouse 사용자 플로우를 스크립팅할 때 특히 유용합니다.
여러 유형을 사용해 보고 문제가 발생하면 알려주세요.
달리기 등대
Lighthouse는 Chrome DevTools, npm (Node 모듈 및 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에 문의하세요.