Lighthouse 2.6 업데이트

Brendan Kenny
Brendan Kenny

Lighthouse 2.6이 나왔습니다. 주요 특징은 다음과 같습니다.

새로운 기능, 변경사항, 버그 수정에 관한 전체 목록은 2.6 출시 노트를 참고하세요.

2.6으로 업데이트하는 방법

  • NPM npm update lighthouse을 실행합니다. Lighthouse를 전역적으로 설치한 경우 npm update lighthouse -g 플래그를 실행합니다.
  • Chrome 확장 프로그램을 탭합니다. 확장 프로그램은 자동으로 업데이트되지만 chrome://extensions를 통해 수동으로 업데이트할 수 있습니다.
  • 개발자 도구입니다. 감사 패널은 Chrome 65에서 2.6과 함께 제공됩니다. chrome://version를 통해 실행 중인 Chrome 버전을 확인할 수 있습니다. Chrome은 약 6주마다 새 버전으로 업데이트됩니다. Chrome Canary를 다운로드하면 최신 Chrome 코드를 실행할 수 있습니다.

새로운 성능 감사

자바스크립트 부팅 시간이 김

페이지에서 각 스크립트를 파싱, 컴파일, 실행하는 데 소요되는 시간에 대한 분석 결과를 표시합니다. 자바스크립트 부팅 시간은 다소 숨겨져 있지만 페이지 로드 시간에 중요한 요소입니다.

'JavaScript 부팅 시간이 짧음' 감사
그림 1. 감사 JavaScript 부팅 시간이 김

정적 애셋에 비효율적인 캐시 정책 사용

브라우저가 각 리소스를 제대로 캐시하는지 확인합니다.

'정적 애셋에 비효율적인 캐시 정책 사용' 감사
그림 2. 정적 애셋에 비효율적인 캐시 정책 사용 감사

페이지 리디렉션 방지

페이지 리디렉션은 네트워크 왕복을 한 번 더 하며, 추가 DNS 조회가 필요한 경우에는 두 번 왕복합니다. 페이지 로드 시간을 단축하려면 리디렉션을 최소화하세요.

'페이지 리디렉션 방지' 감사
그림 3. 페이지 리디렉션 방지 감사

접근성 섹션 점수 개선

Lighthouse 2.6에서는 접근성 점수 집계 방법이 다르게 계산됩니다. HTTP 보관 파일 데이터세트를 바탕으로 사용자 환경에 미치는 영향의 심각도와 문제 빈도를 기준으로 각 접근성 감사에 가중치를 부여합니다. 자세한 내용은 googlechrome/lighthouse/issues/3444를 참고하세요.

보고 UX 개선

최상위 수준 오류

Lighthouse는 보고서 상단에 페이지 점수에 영향을 미쳤을 수 있는 오류를 알려줍니다.

보고서 상단의 최상위 오류
그림 4. 보고서 상단에 표시되는 최상위 오류

보고서 내보내기 보고서 내보내기를 클릭한 다음 요약 인쇄 또는 확장된 인쇄를 선택하여 보고서의 요약 버전 또는 자세한 버전을 인쇄합니다.

요약 및 확장 보기 인쇄
그림 5. 요약 및 확장 뷰 인쇄

가로세로 비율 버그 수정

2.6은 또한 페이지에 이미지가 없거나 모든 이미지의 크기가 적절했음에도 올바른 가로세로 비율로 이미지 표시 감사가 실패하는 버그를 수정했습니다.