Lighthouse 8.4는 명령줄과 Chrome Canary에서 즉시 사용할 수 있습니다. Chrome 95에서 Chrome 안정화 버전으로 출시되며 일주일 내로 PageSpeed Insights에서 확인할 수 있습니다.
Lighthouse Node CLI를 사용해 보려면 다음 명령어를 사용합니다.
npm install -g lighthouse
lighthouse https://www.example.com --view
8.4 변경 로그에서 전체 변경사항 목록을 확인하세요.
새 감사
최대 콘텐츠 렌더링 시간 이미지를 지연 로드하지 않음
지연 로드 이미지는 스크롤 없이 볼 수 있는 부분의 콘텐츠 로드를 방해하지 않도록 오프스크린 이미지를 지연하는 효과적인 방법입니다.
하지만 페이지의 LCP 요소가 이미지인 경우 지연 로드는 LCP에 상당한 부정적인 영향을 미칠 수 있습니다. 브라우저는 이미지를 즉시 다운로드할 수 있도록 우선순위를 지정하는 대신 이미지를 대기열에 넣고 다른 리소스를 먼저 가져올 수 있습니다. WordPress의 지연 로드에 관한 최근 연구에 따르면 초기 표시 영역의 이미지가 지연 로드되지 않으면 일부 사이트에서 LCP가 최대 15% 개선될 수 있습니다.
이제 Lighthouse에서 LCP 요소가 지연 로드 이미지인지 감지하고 loading 속성을 삭제하는 것이 좋습니다.
자세한 내용은 초기 제안서 및 구현 pull 요청을 참고하세요.
최초 입력 반응 시간을 개선하기 위한 모바일 표시 영역 설정
viewport 감사는 수년 동안 권장사항 카테고리에 포함되어 있었지만 8.4 감사는 실적 카테고리에도 이러한 조언을 환영합니다.
다수의 모바일 브라우저에서는 사용자가 모바일 화면용으로 설계되지 않은 콘텐츠(즉, 명시적인 모바일 <meta name="viewport">가 없는 콘텐츠)를 쉽게 확대할 수 있도록 '두 번 탭하여 확대/축소'를 지원합니다. 실제로 이는 두 번째 탭이 이어지는지 확인하기 위해 브라우저에서 사용자가 탭한 후 최대 300ms를 기다려야 하며 그 시간 동안에는 페이지가 최초 탭에 응답할 수 없음을 의미합니다. 이는 수백 밀리초의 실패 FID에 해당합니다.
HTTP Archive의 데이터에 대한 최근 연구에 따르면 Lighthouse에서 90점 이상의 점수를 받았지만 하나 이상의 Core Web Vitals를 통과하지 못한 사이트의 절반 이상이 모바일 표시 영역이 설정되어 있지 않아 FID를 통과하지 못했습니다. 따라서 이제 Lighthouse 성능 섹션에서 다음과 같은 표시 영역을 찾을 수 없는 경우 추가할 것을 권장합니다.
<meta name="viewport" content="width=device-width">
자세한 내용은 제안서 문제 및 구현 pull 요청을 참고하세요.
Lighthouse팀에 문의하기
새로운 기능, 버전 8.4의 변경사항 또는 Lighthouse와 관련된 다른 사항에 관해 논의하려면 다음 안내를 따르세요.
- Lighthouse GitHub 저장소를 통해 문제를 신고하거나 의견을 제출하세요.
- 트위터에서 Lighthouse팀 @____lighthouse에 문의하세요.