텍스트 압축 사용

텍스트 기반 리소스는 전체 네트워크를 최소화하기 위해 압축되어 제공되어야 합니다. 바이트. Lighthouse 보고서의 기회 섹션에는 모든 텍스트 기반 리소스를 압축하지 않습니다

Lighthouse 텍스트 압축 사용 설정 감사의 스크린샷

Lighthouse에서 텍스트 압축을 처리하는 방법

Lighthouse는 다음과 같은 모든 응답을 수집합니다.

  • 텍스트 기반 리소스 유형이 있어야 합니다.
  • content-encoding 헤더를 br, gzip 또는 deflate입니다.

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은 모든 주요 브라우저에서 지원되므로 Brotli보다는 덜 효율적입니다 자세한 내용은 서버 구성을 를 참조하세요.

서버는 Content-Encoding 드림 사용된 압축 알고리즘을 나타내는 HTTP 응답 헤더입니다.

Content-Encoding: br

응답 압축 확인

서버가 응답을 압축했는지 확인하려면 다음 단계를 따르세요.

Control+Shift+J (Mac의 경우 Command+Option+J)를 눌러 DevTools를 엽니다. Network 탭을 클릭합니다.

  1. Control+Shift+J (Mac에서는 Command+Option+J)를 눌러 DevTools를 엽니다.
  2. 네트워크 탭을 클릭합니다.
  3. 관심 있는 응답을 유발한 요청을 클릭합니다.
  4. Headers(헤더) 탭을 클릭합니다.
  5. 응답 헤더 섹션에서 content-encoding 헤더를 확인합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">콘텐츠 인코딩 응답 헤더</ph> <ph type="x-smartling-placeholder">
</ph> content-encoding 응답 헤더

응답의 압축 및 압축 해제된 크기를 비교하려면 다음 단계를 따르세요.

  1. Control+Shift+J (Mac에서는 Command+Option+J)를 눌러 DevTools를 엽니다.
  2. 네트워크 탭을 클릭합니다.
  3. 큰 요청 행을 사용 설정합니다. 큰 요청 행 사용을 참조하세요.
  4. 크기 열에서 관심이 있는 응답을 찾습니다. 이 top 값은 압축된 크기입니다. 하단 값은 압축 해제된 있습니다.

네트워크 페이로드 축소 및 압축도 참조하세요.

스택별 안내

  • Joomla: Gzip 페이지 압축 설정 (시스템 > 전역 구성 > 서버)을 사용 설정합니다.
  • WordPress: 웹 서버 구성에서 텍스트 압축을 사용 설정합니다.

리소스