[WP] Gzip 압축 vs Brotli 압축: 2개 압축 알고리즘 차이점

공정위 광고 문구 Ver 2.0

워드프레스 CMS를 비롯한 웹 사이트를 빠르게 만들기 위해, 서버에서 데이터를 압축하는 설정을 하는 것이 유용합니다. 이렇게 하면 웹 서버와 브라우저 간에 전송되는 데이터를 더욱 빠르게 로딩할 수 있으며, 웹 사이트의 속도를 더 빠르게 만들어 줍니다. 이는 웹사이트를 운영하는 관리자들이 많이 고려하는 요소 중 하나입니다. gzip 압축은 많이 사용되고 있으며, 많은 웹 서버에서 gzip에서 점차 Brotli 압축으로 변경되고 늘어나는 추세입니다.

1. 압축이란?

사이트 URL에 접속하면, 브라우저와 서버 간에 대화가 시작됩니다. 이때 브라우저는 서버에게 콘텐츠의 압축(Compression)을 해제할 수 있는지와, 어떤 압축 알고리즘을 사용하는지에 대한 정보를 전달합니다. 이는 서버가 압축 된 데이터를 전송할 때, 브라우저가 이를 올바르게 해제할 수 있도록 돕는 역할을 합니다. 따라서 압축 알고리즘을 지원하는 서버와 브라우저를 사용하면, 웹 사이트의 로딩 속도를 더욱 빠르게 할 수 있습니다.

데이터 압축

웹 브라우저는 서버에 접속하면 gzip 압축 or Brotli 압축과 같은 헤더를 보내게 됩니다. 둘 중 하나의 압축된 데이터가 브라우저에 출력되며 압축된 데이터는 압축되지 않은 데이터보다 빠르게 로딩됩니다.

Content-encoding: gzip
Content-encoding: br
압축되는 파일은 주로 텍스트입니다.
· HTML
· CSS
· JavaScript

2. Gzip 압축이란?

웹 호스팅 업체에서 많이 사용하는 일반적인 압축 알고리즘은 Gzip과 Brotli입니다. Gzip은 1992년에 베타 버전이 만들어 졌으며, 1993녀에 1.0 버전이 릴리스 되었습니다. 보통 Gzip이란 인터넷에서 데이터를 전송할 때 압축을 하기 위한 표준 압축 방법 중 하나입니다. 이 방법은 초기 압축 알고리즘인 DEFLATE 압축을 기반으로 하며, 이전에 개발된 Unix의 파일 압축 프로그램인 gzip에서 이름을 따온 것입니다.

Gzip 파일

DEFLATE 압축은 LZ77(Lempel-Ziv 1977) 알고리즘과 Huffman 코딩 방식을 결합한 압축 방식입니다. LZ77은 중복되는 데이터를 검색하여 일치하는 문자열을 찾고, 그 문자열을 코드로 대체함으로써 압축을 수행합니다. Huffman 코딩 방식은 각 문자의 등장 빈도를 이용하여 가장 짧은 비트 코드를 할당하는 방식으로 압축을 수행합니다.

Gzip은 DEFLATE 압축 방식을 이용하여 데이터를 압축하고, HTTP 요청 및 응답에서 ‘Accept-Encoding: gzip’ 헤더를 사용하여 클라이언트가 Gzip 압축을 지원하는 경우에만 압축을 수행하도록 합니다. 이를 통해 데이터 압축을 실행하여 웹 사이트의 로딩 속도를 향상시킬 수 있습니다.

3. 브로틀리 압축이란?

브로틀리 압축은 2013년 Google 직원 Jyrki Alakuijala와 Zoltán Szabadka가 개발했습니다.

Brotli 압축

Gzip은 원래 파일을 압축하기 위한 것이었지만, 웹에서도 사용할 수 있도록 변경되었습니다. 반면, 브로틀리 압축은 웹에서 사용할 목적으로 개발되었습니다. 따라서, Brotli를 사용하면 웹 서버가 콘텐츠를 브라우저로 전송하기 전에 압축할 수 있습니다. 브라우저로 스트리밍 되기 전에 압축되기 때문에 더 나으며 발전된 방식입니다.

Brotli 압축은 다음과 같은 GZIP 압축과 동일한 LZ77과 Huffman 코딩 방식 두 가지의 핵심 기본 기술을 사용합니다.

4. Gzip 압축 Vs Brotli 압축

Gzip과 Brotli 모두 DEFLATE 방식을 사용하여 데이터를 압축(& 압축 해제)합니다.

Gzip 압축 vs 브로틀리 압축 비교하기
  • Gzip이 Brotli보다 압축 속도가 더 빠릅니다.
  • Brotli는 웹 전용으로 설계되었습니다.
  • Brotli는 모든 압축 수준에서 더 나은 압축률(즉, 더 작은 압축 파일 생성)을 제공합니다.
  • Brotli는 Gzip보다 3가지 파일의 압축률이 각각 HTML 21%, CSS 17%, JavaScript 14% 더 좋습니다.

Gzip보다 Brotli를 선호하는 웹 서버가 점점 많아지고 있는 추세입니다. Brotli는 스트림을 즉시 압축하도록 설계되었기 때문에 Gzip에 비해 전체 프론트 엔드 압축 해제 속도가 최대 64% 더 빠른 것으로 알려져 있습니다.


HTML, CSS, JavaScript와 같은 파일 압축으로 웹 사이트 최적화 과정에 대해 알아 봤습니다. 웹 사이트의 속도 개선을 위해 파일 압축과 이미지 최적화는 필수 요소 중 하나라고 할 수 있습니다.

Similar Posts

  • W3 Total Cache 속도 테스트

    워드프레스 캐시 플러그인 중 W3 Total Cache는 10년 넘게 꾸준한 인지도를 가지고 있는 플러그인입니다. 다만, 최근 몇 년간은 업데이트가 좀 뜸해지고, UI도 복잡해서 초보자들이 사용하기 어렵다는 평가도 많습니다. 높은 인지도를 가진 W3 Total Cache 속도 테스트를 통해, 이 플러그인이 어떻게 페이지 캐시, 데이터베이스 캐시, 오브젝트 캐시, 브라우저 캐시 등 여러 캐시 유형을 활용했을…

  • [WP] 이미지 최적화 플러그인 BEST5 비교

    워드프레스 이미지 최적화 플러그인(Image Optimizer Plugin)은 웹사이트의 이미지 크기를 줄여 최적화를 진행합니다. 워드프레스로 구축한 사이트는 테마의 기능과 플러그인을 사용하면서 사이트의 로딩 속도가 늘어납니다. 웹사이트의 속도에 영향을 주는 또 다른 요인은 이미지 파일입니다. JPEG와 PNG 이미지 파일은 웹사이트 로딩 속도가 느려지는 주범이며, 특히 두 파일을 WebP 형식으로 변환 및 적절한 크기로 이미지 최적화가 필요하게…

  • [WP] 웹 브라우저 렌더링이란?[렌더링 종류]

    브라우저 렌더링이란 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 모바일 or PC 모니터 등 브라우저에서 웹 페이지가 표시(렌더링)되는 것이라고 하는 것이 쉬운 접근 법입니다. 각각의 브라우저는 렌더링을 실행하는 렌더링Rendering 엔진을 가지고 있습니다. ※브라우저 별 렌더링 엔진 크롬&오페라 : Blink 인터넷 익스플로러 : Trident 모질라 파이어폭스: Gecko 사파리 :…

  • 워드프레스 호스팅: 안정성 및 속도를 반영한 5가지 평가 항목

    워드프레스 사이트 구축을 계획하고 있다면, 먼저 도메인 구매와 함께 적합한 호스팅 서비스를 선택하는 것이 중요합니다. 호스팅은 웹사이트의 안정성과 속도에 직접적인 영향을 미치기 때문에, 내 사이트 목적과 규모에 맞는 호스팅을 신중히 고르는 것이 성공의 첫걸음입니다. 워드프레스 호스팅에 맞는 호스팅을 선택할 때 고려해야 할 5가지 핵심 평가 항목을 안내드립니다. Ⅰ. 호스팅 종류 서비스를 신청하기 전…

  • Cloudways 호스팅 사용 후기(2023)

    fastcomet에서 Cloudways 호스팅으로 이전을 했습니다. Cloudways 호스팅 사용 후기는 기대했던 것 이하였습니다. 이전 이유는 깔끔한 인터페이스와 Memcached/Redis Object 캐시 활용 가능성이었습니다. Varnish 캐시도 사용할 수 있다는 점과 부가 기능들이 마음에 들어 사용하게 되었습니다. 1️⃣ 서버 이전 신청 무료 마이그레이션(서버 이전)은 fastcomet과 동일하게 진행할 수 있습니다. 서버 이전 후 3일 정도는 서울의 데이터 센터로 옴겼고…

  • What CMS? 어떤 CMS를 사용하는지 확인 사이트 목록 3군데

    WordPress, Shopify , 윅스, Squarespace, 줌라 등의 CMS 점유율을 확인한다면 w3techs 사이트에서 CMS 점유율을 확인할 수 있습니다. What CMS..? 어떤 CMS를 사용하는지 궁금할 경우 조회할 수 있는 사이트 중 대표적인 사이트입니다. 1. What CMS ? 2. cmsdetect.com 두 번째 사이트는 cmsdetect.com입니다. 3. seranking.com 세 번째 https://seranking.com/website-audit.html입니다. 4. 워드프레스 테마 및 플러그인 확인 워드프레스 전용 테마와 플러그인을 감지할 수도…