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팀에 문의하세요.