성능 통계는 웹사이트의 성능에 관한 실행 가능한 통계를 제공하며 DevTools 성능 패널과 Lighthouse에서 모두 사용할 수 있습니다.
DevTools 성능 패널 Lighthouse 성능 감사
브라우저가 페이지의 요소와 일치하는 데 시간이 오래 걸리는 복잡한 CSS 선택자를 식별합니다.
HTML 문서 요청이 예상보다 오래 걸리는 이유를 식별합니다.
단일 페이지 내에서 여러 번 로드되는 동일한 JavaScript 모듈 또는 코드를 정확히 파악합니다.
맞춤 글꼴이 로드되는 동안 텍스트가 계속 표시되도록 `font-display` CSS 속성을 평가합니다.
JavaScript가 브라우저에서 페이지 레이아웃을 다시 계산하도록 강제하여 성능 문제가 발생할 수 있는 시점을 식별합니다.
AVIF 또는 WebP와 같은 최신 형식을 사용하고 크기를 올바르게 지정하는 등 이미지 로딩을 최적화하는 방법을 제안합니다.
INP를 개선하기 위한 최적화 기회를 파악하는 데 도움이 되는 INP 하위 부분을 표시합니다.
누적 레이아웃 이동에 기여하는 페이지의 예기치 않은 이동을 담당하는 특정 DOM 요소를 지적합니다.
LCP를 개선하기 위한 최적화 기회를 파악하는 데 도움이 되는 LCP 하위 부분을 표시합니다.
LCP 이미지 요청이 예상보다 오래 걸리는 이유를 식별합니다.
대부분의 최신 브라우저에서 더 느리고 불필요할 수 있는 오래된 JavaScript 코드를 플래그합니다.
요청 및 응답 다중화와 속도를 개선하기 위해 HTTP/2 또는 HTTP/3과 같은 최신 네트워크 프로토콜을 확인합니다.
페이지의 초기 렌더링을 차단하는 주요 종속성 체인을 식별합니다.
렌더링 성능에 영향을 줄 수 있는 HTML 요소가 페이지에 많이 있는 경우를 식별합니다.
페이지의 표시 영역이 휴대기기에서 300밀리초 탭 지연을 일으키지 않도록 올바르게 구성되어 있는지 확인합니다.
페이지의 초기 렌더링을 차단하여 LCP를 지연시키는 리소스를 식별합니다.
페이지에 로드된 서드 파티 리소스를 나열합니다.
페이지를 반복 방문할 때 불필요한 다운로드가 발생할 수 있는 최적화되지 않은 캐싱 정책을 식별합니다.