요즘 고객 경험을 향상시키는 것은 참여를 유도하고 비즈니스 성공을 달성하는 데 매우 중요합니다. 고객 만족도에 큰 영향을 미치는 한 가지 중요한 요소는 웹사이트 로딩 속도입니다.
연구에 따르면 사용자의 40%가 웹사이트 로딩 시간이 3초 이상 걸리면 포기하며, 페이지 응답이 단 1초 지연될 경우 전환율이 7% 감소할 수 있습니다. 매 초가 중요하다는 것이 분명합니다!
빠른 로딩 시간을 위한 다양한 기술이 있으며, 그 중 하나는 사이트의 기능에 영향을 주지 않으면서 기본 코드를 최소화하는 것입니다. "압축" 알고리즘은 이를 달성하는 한 가지 방법이며, 대부분의 현대 웹 브라우저는 다음 세 가지 알고리즘 중 하나로 인코딩된 콘텐츠를 이해하거나 "수용"합니다:
- Deflate
- Gzip
- Brotli
웹사이트를 빠르게 만드는 방법을 배우려면 여기를 확인하세요.
GZIP 압축이란 무엇인가요?
GZIP은 Jean-loup Gailly와 Mark Adler에 의해 개발된 널리 사용되는 압축 형식 및 소프트웨어 애플리케이션입니다. 초기 베타 릴리스는 1992년에 이루어졌고, 실제 버전 1.0은 1993년 초에 출시되었습니다. 원래 다목적 압축 라이브러리로 제작되었으며 DEFLATE 압축 알고리즘에서 영감을 받았습니다.
GZIP은 파일 압축 수준을 1부터 10까지 제공하며, 레벨 1은 작은 파일 절약과 빠른 압축 속도를 제공하고, 레벨 10은 느린 압축 속도로 최대 파일 절약을 제공합니다. 일반적으로 80%까지의 압축 비율을 달성할 수 있습니다. 텍스트 파일, JavaScript 또는 CSS 코드 및 기타 HTTP 콘텐츠와 같은 데이터 압축에 특히 효과적입니다.
GZIP 압축 알고리즘
GZIP은 LZ77 및 허프만 코딩 기법을 결합한 deflate 알고리즘을 기반으로 하는 무손실 압축 알고리즘입니다. 무손실 압축 방법으로서, 복원된 데이터가 원본과 동일하게 유지됩니다.
GZIP의 작동 방식을 살펴보겠습니다:
- 서버가 웹 페이지 요청을 받을 때, 요청 헤더에서 GZIP 압축 지원 여부를 확인합니다.
- GZIP 압축이 지원되면, 서버는 페이지에 대한 압축된 마크업을 생성합니다.
- GZIP은 마크업을 압축된 데이터 스트림으로 변환하여 최종 사용자에게 효율적으로 전달합니다.
- 사용자의 브라우저는 수신한 스트림을 압축 해제하여 원래의 마크업을 복원합니다.
간단히 말해, GZIP은 반복 패턴을 식별하고 이를 더 짧은 표현으로 대체하며, 빈도에 따라 가변 길이 코드를 할당합니다.
이 압축 방법은 파일 크기를 크게 줄여 데이터 전송 효율성을 향상시킵니다.
GZIP 사용의 효과 비교
예를 들어, webpack이나 rollup으로 번들링한 후 결과 JavaScript 파일은 상당히 클 수 있습니다. 파일을 분리하기 위해 `chunk`를 사용할 수 있지만 전체 크기는 여전히 상당할 수 있습니다. 정적 리소스에 대한 GZIP 압축의 효과를 Chrome에서 살펴보겠습니다:
압축 전후 세 파일의 압축된 크기를 비교해 보겠습니다:
Brotli 압축이란 무엇인가요?
Brotli는 처음에 Google에 의해 woff2 사용을 위해 개발되었으며, 이후 더 넓은 용도로 확장된 매우 효율적인 압축 알고리즘입니다. 현재 사용 가능한 가장 효과적인 범용 압축 방법과 유사한 압축 비율을 달성합니다.
Brotli는 1에서 11까지의 압축 품질 수준을 도입하며, 품질 수준을 높이면 압축 비율이 개선되지만, 높은 수준은 압축 속도에 영향을 줄 수 있습니다.
Brotli는 광범위하게 채택되어 있으며 모든 최신 웹 브라우저에서 지원됩니다. 현재 약 97.28%의 사용자가 Brotli를 지원하는 브라우저를 사용하고 있습니다.
브라우저가 Brotli를 지원하는지 확인하려면 accept-encoding 요청 헤더를 검사할 수 있습니다. Gzip 및 Brotli 압축 알고리즘이 동시에 활성화되면 Brotli 압축 수준이 Gzip보다 우선합니다. 이는 다음과 같습니다:
Accept-Encoding: br,gzipBrotli 압축 알고리즘
Brotli는 Google이 출시한 오픈 소스 압축 알고리즘으로, Gzip보다 더 효율적입니다. 데이터는 LZ77 알고리즘의 변형, 허프만 코딩 및 이차 텍스트 모델링을 통해 압축됩니다. 이는 우리가 웹 페이지의 다양한 파일 크기를 보다 효율적으로 압축하고 로딩 속도를 개선하는 데 도움을 줍니다.
영어, 스페인어, 중국어, 힌디어, 러시아어 및 아랍어의 일반 단어 및 어휘로 구성된 사전을 사용하여 HTML 및 JavaScript의 일반 용어를 결합하여 데이터를 Gzip, bzip2, LZMA 등보다 더 압축합니다. 이러한 알고리즘을 기반으로 추가 압축이 이루어져 데이터 내용의 용량을 줄이고 웹 페이지 로딩 속도를 빠르게 합니다.
Brotli의 작동 방식을 살펴보겠습니다:
첫째, Brotli는 데이터에서 반복 패턴을 찾아 이를 더 짧은 코드로 대체합니다. 이는 중복성을 제거하고 파일을 더 간결하게 만듭니다.
둘째, Brotli는 허프만 코딩이라는 방법을 사용합니다. 자주 사용되는 단어에는 더 짧은 코드를 할당하고 덜 일반적인 단어에는 더 긴 코드를 할당합니다. 이렇게 함으로써 Brotli는 자주 사용되는 단어를 더 적은 비트로 표현할 수 있어 파일 크기를 줄입니다.
Brotli가 사용하는 또 다른 트릭은 문맥 모델링이라고 불리는 방법입니다. 이는 데이터의 문맥이나 주변을 분석하여 더 스마트한 예측을 합니다. 데이터 간의 패턴과 관계를 이해함으로써 Brotli는 다음에 올 내용을 더 정확하게 추측할 수 있습니다. 이는 파일을 더 효율적으로 압축하는 데 도움이 됩니다.
전반적으로 Brotli의 고급 기술 조합, 포괄적인 정적 사전 및 변환 메커니즘은 이를 매우 효과적인 압축 알고리즘으로 만듭니다. 뛰어난 압축 비율과 파일 크기 축소를 제공하여 GZIP, bzip2 및 LZMA와 같은 다른 알고리즘보다 성능이 우수합니다.
Brotli 대 GZIP
사용 관점에서 보면, 2024년 1월의 HTTP 아카이브 데이터에 따르면 Brotli는 실제로 JavaScript 및 CSS에 대해 Gzip보다 더 많이 사용됩니다!
Gzip과 Brotli의 압축 성능을 테스트하려면 Paul Calvano의 도구를 사용하십시오.
Brotli의 GZIP 대비 장점
Brotli는 사전을 활용하여 전체 키워드 대신 키를 전송할 수 있는 이점을 제공합니다. 이로 인해 Brotli는 GZIP 압축에 비해 상당한 파일 크기 축소를 달성합니다.
파일 크기의 이러한 개선은 웹 환경에서 데이터 전송 및 저장의 효율성을 높이는 데 기여합니다.
전송되는 바이트 수를 줄이면 페이지 로딩 시간을 개선할 뿐만 아니라 CDN와 관련된 비용을 낮추는 데에도 도움이 됩니다.
GZIP의 Brotli 대비 장점
Brotli는 인상적인 압축 능력을 제공하지만, 특정 시나리오에서는 GZIP이 여전히 몇 가지 장점을 가지고 있습니다. GZIP이 Brotli보다 나은 몇 가지 장점은 다음과 같습니다:
- 호환성: GZIP는 1990년대부터 널리 사용되어 왔으며 사실상 모든 브라우저와 웹 서버에서 지원됩니다. 표준 압축 형식이 되어 다양한 플랫폼 간의 호환성이 보장됩니다.
- 확립된 생태계: GZIP는 풍부한 도구와 구현을 위한 라이브러리가 있는 잘 확립된 생태계를 가지고 있습니다. 산업 내에서의 오랜 존재는 다양한 소프트웨어 환경에서 통합 및 작업을 쉽게 만듭니다.
- 압축 속도: GZIP는 일반적으로 Brotli보다 빠른 압축 속도를 가집니다. 빠르게 파일을 압축할 수 있어 속도가 우선인 시나리오에 적합합니다.
- 서버 부하 감소: EdgeOne의 스마트 압축은 귀하의 원본 서버가 아닌 엣지 네트워크에서 수행됩니다. 즉, 압축이 EdgeOne의 서버에서 수행되며 귀하의 서버 리소스를 사용하지 않습니다. 이는 EdgeOne과 같은 콘텐츠 전송 네트워크(CDN)를 사용할 때의 장점 중 하나로, 압축과 같은 작업을 귀하의 서버에서 그들의 서버로 오프로드하여 귀하의 서버 리소스를 확보합니다.
- 스트리밍 지원: GZIP는 데이터가 실시간으로 압축되고 전달되는 스트리밍 시나리오에 적합합니다. 호환성과 스트리밍 애플리케이션 지원으로 인해 특정 사용 사례에서 선호되는 선택이 됩니다.
Zstandard 압축에 대해 알아보기
Zstandard는 Facebook이 개발한 최신 압축 방법입니다. DEFLATE 알고리즘과 유사한 압축 비율을 제공하지만, 특히 빠른 압축 해제 알고리즘에 대해 더 빠릅니다. 압축 수준은 -7(가장 빠름)에서 22(가장 느린 압축 속도, 그러나 최고의 압축 비율)까지 조정 가능합니다. 하지만 2024년 8월 기준으로 Chrome 123+, Firefox 126+, Opera 109+와 같은 브라우저만 zstd 콘텐츠 인코딩을 지원합니다. 대부분의 CDN은 아직 Zstandard를 지원하지 않지만, 많은 CDN이 Brotli를 지원하는 방식과 유사하게 원본 압축 응답에 대한 캐시 키를 다양화할 수 있습니다. Zstd와 Brotli 압축 벤치마크에 대해 알아보세요.
스마트 압축에 대해 자세히 알아보거나 EdgeOne에 가입하세요. 현재 무료 체험판이 출시되었습니다. 여기를 클릭 또는 문의하세요.