IBM Cloud Docs
압축 및 최적화

압축 및 최적화

IBM Cloud® Internet Services 는 다양한 콘텐츠 유형에 GZIP 및 브로틀리 압축을 사용하여 페이지 로드 시간을 개선합니다. 압축은 브라우저의 User-Agent 을 기준으로 적용됩니다.

이미 를 사용 중인 경우 CIS 는 서버 응답에 적절한 헤더가 전달되는 한 설정을 수락합니다.

CIS 는 원본 서버와 통신할 때만 지원하며, 해당 콘텐츠를 전달할 수 있습니다:

  • 또는 브로틀리를 사용하여 압축
  • 비압축

CIS 의 역방향 프록시는 압축된 형식과 압축되지 않은 형식 사이를 변환할 수 있습니다. 예를 들어 원본에서 GZIP 압축 콘텐츠를 가져와서 클라이언트에게 압축되지 않은 상태로 제공할 수 있습니다. 이 프로세스는 캐싱과 독립적으로 진행됩니다.

CIS 는 Accept-Encoding 헤더를 제거하여 표시하지 않습니다.

압축 콘텐츠 유형

오래된 콘텐츠를 제공하고 CSS, JS, HTML을 축소하는 것 외에도 CIS 은 호환되는 브라우저를 위해 GZIP 또는 Brotli로 응답을 압축합니다. CIS 는 다음 콘텐츠 유형에 대해 호환되는 클라이언트 및 브라우저에 GZIP 또는 브로틀리 인코딩된 응답을 반환합니다:

text/html
text/richtext
text/plain
text/css
text/x-script
text/x-component
text/x-java-source
text/x-markdown
application/javascript
application/x-javascript
text/javascript
text/js
image/x-icon
image/vnd.microsoft.icon
application/x-perl
application/x-httpd-cgi
text/xml
application/xml
application/xml+rss
application/vnd.api+json
application/x-protobuf
application/json
multipart/bag
multipart/mixed
application/xhtml+xml
font/ttf
font/otf
font/x-woff
image/svg+xml
application/vnd.ms-fontobject
application/ttf
application/x-ttf
application/otf
application/x-otf
application/truetype
application/opentype
application/x-opentype
application/font-woff
application/eot
application/font
application/font-sfnt
application/wasm
application/javascript-binast
application/manifest+json
application/ld+json

원본의 특정 응답을 인코딩하지 않으려면 원본 웹 서버에서 인코딩을 비활성화하도록 캐시 제어: no-transform을 설정하면 됩니다.

브로틀리 압축 사용

  1. CIS 계정에 로그인합니다.
  2. 적절한 도메인을 선택하십시오.
  3. 성능 탭을 클릭하십시오.
  4. 고급 탭을 클릭하십시오.
  5. 브로틀리 스위치를 On 로 전환합니다.

HTML, JavaScript, 및 CSS용 축소

CIS 웹 콘텐츠 축소를 사용하면 HTML, JavaScript 및 CSS 파일에서 기능에 영향을 주지 않고 불필요한 문자를 모두 제거할 수 있습니다.

  • CSS 및 JavaScript 축소는 캐시된 CSS 및 JS 파일에서만 작동합니다.
  • CIS 에서 파일에 대한 캐시 HIT를 반환하면 브라우저에 축소된 형태로 반환되어 CIS 에서 완전한 축소 결과를 제공할 수 있습니다.
  • 축소 변경 사항을 적용하려면 CIS 캐시를 삭제하세요.

이미지 크기 최적화 압축

CIS 메타데이터를 제거하고 손실 또는 무손실 압축을 적용하여 엣지 네트워크에 캐시된 이미지를 최적화하여 전송 속도를 높입니다. 오프사이트 이미지는 최적화되지 않습니다.

이미지 크기 최적화 압축은 콘솔에서 페이지 규칙으로만 사용할 수 있습니다. 도메인 레벨 설정은 CLI에서 사용할 수 있습니다.

이미지 크기 최적화 압축 옵션

다음 절에서는 이미지 크기 최적화 압축 옵션에 대해 자세히 설명합니다.

보존

  • 대부분의 메타데이터(예: EXIF 데이터)를 제거합니다.
  • 모든 시각적 디테일을 유지합니다.
  • 압축 해제된 출력은 원본 이미지와 일치합니다.

손실

  • 메타데이터를 제거하고 이미지 크기를 약 15% 줄입니다.
  • 일부 원본 데이터는 영구적으로 손실됩니다.
  • PNG의 경우 결과는 사실상 무손실과 동일합니다.

무손실 및 손실 모드에서는 가능한 한 많은 메타데이터를 제거하려고 하지만 캐싱과 같은 요인으로 인해 완전한 제거가 보장되지는 않습니다.

WebP

  • WebP 는 뛰어난 압축률을 제공합니다:
    • PNG보다 약 26% 작음(무손실)
    • jPEG보다 25~34% 작음(손실)
  • CIS WebP 버전을 생성하고 캐시합니다.
  • WebP 경우에만 제공됩니다:
    • 브라우저의 Accept 헤더에는 WebP 이 포함됩니다.
    • 압축된 이미지는 손실 또는 무손실 버전보다 훨씬 작습니다.

지원되는 Accept 헤더 예시:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

현재 WebP는 Firefox, Google Chrome 및 Opera 브라우저에서만 지원됩니다.

WebP 을 지원하지 않는 브라우저에서 캐싱 문제를 방지하려면 원본에서 WebP 을 비활성화합니다.

이미지 크기 최적화가 활성화되어 있는지 확인

페이지 규칙 또는 CLI 도메인 설정 을 사용하여 이미지 크기 최적화를 활성화하십시오.

CIS 는 최적화된 이미지에 다음 헤더를 추가합니다:

cf-bgj: imgq:85

cf-polished: qual=85, origFmt=jpeg, origSize=95005

cf-cache-status: HIT

cf-bgj 헤더는 CIS 이미지 크기 최적화를 적용했음을 확인하고 이미지 품질 설정(imgq)을 반환합니다. cf-polished 헤더는 이미지 크기 최적화 상태를 나타내며 이미지 품질 설정(qual)과 원본 크기(origSize)를 반환합니다. cf-cache-status 헤더는 이미지가 캐시되었고 이미지 크기 최적화를 적용할 수 있음을 확인합니다.

WebP 변환해도 이미지가 변경되지 않습니다 URL. Content-Type HTTP 헤더는 브라우저에 이미지의 원래 형식을 알려줍니다.

일반적인 Cf-Polished 상태

다음 표에는 일반적인 Cf-Polished 상태와 문제 해결 방법이 나열되어 있습니다. Cf-Polished 헤더가 반환되지 않으면 단일 파일 캐시 퍼지를 사용하여 이미지를 퍼지하세요.

일반적인 Cf-Polished 상태
상태 정의 권장사항
input_too_large 이미지가 너무 크거나 복잡하여 처리하기 어렵고 해상도를 낮춰야 합니다. 1,000픽셀, 10메가바이트 미만의 PNG 또는 JPEG 이미지를 사용합니다.
not_compressed 또는 not_needed 이미지는 원본 서버에서 완전히 최적화되었으며 압축이 적용되지 않았습니다.
webp_bigger 폴란드어가 WebP, 로 변환을 시도했지만 이미지가 원본 서버에서 최적화되었거나 낮은 품질 설정으로 생성되었습니다. WebP 버전이 존재하지 않으므로 상태는 응답의 PNG 또는 JPEG 버전으로 설정됩니다.
cannot_optimize 또는 internal_error 원본 서버에서 이미지가 손상되었거나 불완전합니다. 새 버전의 이미지를 오리진 서버에 업로드하십시오.
format_not_supported 이미지 형식이 지원되지 않거나(예: BMP, TIFF) 원본 서버에서 폴란드어와 호환되지 않는 추가 최적화 소프트웨어를 사용하고 있습니다. 입력 이미지를 웹 호환 형식(예: PNG, JPEG)으로 변환하거나 원본 서버에서 추가 최적화 소프트웨어를 비활성화해 보세요.
vary_header_present 원본 웹 서버가 accept-encoding 이외의 값을 가진 Vary 헤더를 보냈습니다. 오리진 웹 서버가 WebP를 지원하려고 하는 경우 오리진 웹 서버에서 WebP를 사용 안함으로 설정하고 Polish가 WebP 변환을 수행하도록 하십시오.

Vary 헤더에 accept-encoding 값이 없는 경우에도 최적화는 계속 작동합니다.