Lighthouse는 전송된 네트워크 요청 수와 페이지가 로드되는 동안 전송된 데이터 양을 보고합니다.
- Total 행의 Requests 및 Transfer Size 값은 Image, Script, Font, Stylesheet, Other, Document, Media 행의 값을 추가하여 계산됩니다.
- 타사 열에는 합계 행의 값이 고려되지 않습니다. 총 요청 수와 서드 파티 도메인에서 발생한 총 전송 크기를 알 수 있도록 하는 것이 목적입니다. 서드 파티 요청은 다른 리소스 유형의 조합일 수 있습니다.
리소스 수 및 전송 크기를 줄이는 방법
많은 리소스 수 또는 큰 전송 크기가 부하 성능에 미치는 영향은 요청되는 리소스 유형에 따라 달라집니다.
CSS 및 자바스크립트
CSS 및 JavaScript 파일에 대한 요청은 기본적으로 렌더링을 차단합니다. 즉, 모든 CSS 및 JavaScript 요청이 완료될 때까지 브라우저가 콘텐츠를 화면에 렌더링할 수 없습니다. 이러한 파일 중 하나라도 느린 서버에서 호스팅되면 느린 단일 서버는 전체 렌더링 프로세스를 지연시킬 수 있습니다. 실제로 필요한 코드만 제공하는 방법을 알아보려면 자바스크립트 최적화, 서드 파티 리소스 최적화, CSS 최적화를 참고하세요.
영향을 받는 측정항목: 전체
이미지
이미지 요청은 CSS 및 JavaScript처럼 렌더링을 차단하지 않지만 여전히 로드 성능에 부정적인 영향을 미칠 수 있습니다. 일반적인 문제는 모바일 사용자가 페이지를 로드할 때 이미지가 로드되기 시작했지만 완료되는 데 시간이 걸리는 경우입니다. 이미지를 더 빠르게 로드하는 방법은 이미지 최적화를 참고하세요.
영향을 받는 측정항목: 콘텐츠가 포함된 첫 페인트, 첫 번째 의미 있는 페인트, 속도 색인
글꼴
글꼴 파일을 비효율적으로 로드하면 페이지 로드 중에 텍스트가 보이지 않을 수 있습니다. 사용자의 기기에서 제공되는 글꼴로 기본 설정하고 다운로드가 완료되면 맞춤 글꼴로 전환하는 방법을 알아보려면 글꼴 최적화를 참고하세요.
영향을 받는 측정항목: 콘텐츠가 포함된 첫 페인트
문서
HTML 파일이 크면 브라우저에서 HTML을 파싱하고 파싱된 HTML에서 DOM 트리를 구성하는 데 더 많은 시간을 할애해야 합니다.
영향을 받는 측정항목: 콘텐츠가 포함된 첫 페인트
미디어
애니메이션 GIF 파일은 크기가 매우 큰 경우가 많습니다. 애니메이션을 더 빠르게 로드하는 방법을 알아보려면 GIF를 동영상으로 대체를 참조하세요.
영향을 받는 측정항목: 콘텐츠가 포함된 첫 페인트
성능 예산을 사용하여 회귀 방지
요청 수와 전송 크기를 줄이기 위해 코드를 최적화한 후에는 성능 예산 설정을 참조하여 회귀를 방지하는 방법을 알아봅니다.