총 네트워크 바이트를 최소화하려면 텍스트 기반 리소스를 압축하여 제공해야 합니다. Lighthouse 보고서의 기회 섹션에는 압축되지 않은 모든 텍스트 기반 리소스가 나열됩니다.
![Lighthouse 텍스트 압축 사용 설정 감사의 스크린샷](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-text-compression/image/a-screenshot-the-lightho-b5e39391250f.png?authuser=8&hl=ko)
Lighthouse가 텍스트 압축을 처리하는 방법
Lighthouse는 다음과 같은 모든 응답을 수집합니다.
- 텍스트 기반 리소스 유형이 있어야 합니다.
br
,gzip
또는deflate
로 설정된content-encoding
헤더를 포함하지 마세요.
그런 다음 Lighthouse는 이러한 각 항목을 GZIP으로 압축하여 가능한 절감액을 계산합니다.
응답의 원래 크기가 1.4KiB보다 작거나 잠재적 압축 절감률이 원래 크기의 10% 미만인 경우 Lighthouse는 결과에서 해당 응답에 플래그를 표시하지 않습니다.
서버에서 텍스트 압축 사용 설정
감사를 통과하려면 이러한 응답을 제공한 서버에서 텍스트 압축을 사용 설정하세요.
브라우저는 리소스를 요청하면 Accept-Encoding
HTTP 요청 헤더를 사용하여 지원하는 압축 알고리즘을 나타냅니다.
Accept-Encoding: gzip, compress, br
브라우저에서 Brotli(br
)를 지원하는 경우 다른 압축 알고리즘보다 리소스의 파일 크기를 더 줄일 수 있으므로 Brotli를 사용해야 합니다. how to enable Brotli compression in <X>
을 검색합니다. 여기서 <X>
은 서버 이름입니다. 2022년 12월부터 iOS의 Safari를 제외한 모든 주요 브라우저에서 Brotli가 지원됩니다. 업데이트는 브라우저 호환성을 참고하세요.
GZIP을 Brotli로 대체합니다. GZIP은 모든 주요 브라우저에서 지원되지만 Batli보다 효율적입니다. 예시는 서버 구성을 참조하세요.
서버는 Content-Encoding
HTTP 응답 헤더를 반환하여 사용된 압축 알고리즘을 표시해야 합니다.
Content-Encoding: br
응답 압축 확인
서버가 응답을 압축했는지 확인하려면 다음 단계를 따르세요.
Control+Shift+J
(Mac의 경우 Command+Option+J
)를 눌러 DevTools를 엽니다.
Network 탭을 클릭합니다.
- Control+Shift+J (Mac에서는 Command+Option+J)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 관심 있는 응답을 유발한 요청을 클릭합니다.
- Headers(헤더) 탭을 클릭합니다.
- 응답 헤더 섹션에서
content-encoding
헤더를 확인합니다.
content-encoding
응답 헤더입니다.
응답의 압축 및 압축 해제된 크기를 비교하려면 다음 단계를 따르세요.
- Control+Shift+J (Mac에서는 Command+Option+J)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 큰 요청 행을 사용 설정합니다. 큰 요청 행 사용을 참조하세요.
- 크기 열에서 관심이 있는 응답을 찾습니다. 맨 위 값은 압축된 크기입니다. 맨 아래 값은 압축 해제된 크기입니다.
네트워크 페이로드 축소 및 압축도 참조하세요.
스택별 안내
- Joomla: Gzip 페이지 압축 설정 (시스템 > 전역 구성 > 서버)을 사용 설정합니다.
- WordPress: 웹 서버 구성에서 텍스트 압축을 사용 설정합니다.