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

워드프레스 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

  • 워드프레스 호스팅 RocketNet 속도와 안정성 평가

    RocketNet 호스팅은 안정성과 속도 모두에서 높은 평가를 받는 서비스입니다. Cloudflare Enterprise CDN을 기반으로 전 세계 엣지 서버에서 콘텐츠를 배포하며, 단순한 캐시 속도를 넘어 실제 사용자 체감 성능까지 개선한 것이 특징입니다. 이 글에서는 Rocket.net의 주요 장점과 한계, 그리고 실제 테스트 결과를 중심으로 RocketNet 속도와 안정성 테스트를 통해 속도와 안정성을 평가합니다. 워드프레스 사이트를 운영하는 입장에서,…

  • [WP] 워드프레스 렌더링 차단 리소스 제거 방법 2가지

    워드프레스를 이용하다 보면 ‘렌더링 차단 리소스 제거‘ 설정이란 내용을 플러그인 사용 중 본 경우가 있을 수 있습니다. 워드프레스 렌더링이란 무엇이며, ‘렌더링‘과 ‘렌더링 차단 리소스 제거‘는 무엇을 뜻 하는지 풀어 보도록 하겠습니다. 먼저 렌더링은 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 웹 페이지에 접속 했을 때 브라우저에 표시되는 것이…

  • [WP] 워드프레스 LCP(Largest Contentful Paint) 측정 방법 4가지와 해결 방법

    웹 사이트를 운영할 경우 SEO 측면에서 웹 사이트의 로딩 속도는 매우 중요한 요소입니다. 이번에는 워드프레스 LCPLargest Contentful Paint란 무엇이며, 중요한 이유와 개선하는 방법에 대해 알아 보겠습니다. LCP는 코어 웹 바이탈Core Web Vitals 지표 중 하나입니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축코어 웹 바이탈(CWV) : 출처 클라우드플레어 ⓐ 로딩…

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

    fastcomet에서 Cloudways 호스팅으로 이전을 했습니다. Cloudways 호스팅 사용 후기는 기대했던 것 이하였습니다. 이전 이유는 깔끔한 인터페이스와 Memcached/Redis Object 캐시 활용 가능성이었습니다. Varnish 캐시도 사용할 수 있다는 점과 부가 기능들이 마음에 들어 사용하게 되었습니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축 1️⃣ 서버 이전 신청 무료 마이그레이션(서버 이전)은 fastcomet과 동일하게 진행할…

  • 워드프레스 임베드 기능: 활용 및 장·단점

    워드프레스 임베드 기능은 웹사이트에서 외부 콘텐츠(다른 워드프레스 사이트, 유튜브 영상, 트윗, 인스타그램 게시물 등)를 별도의 코드 입력 없이 손쉽게 게시글에 삽입할 수 있도록 돕는 기능입니다. 임베드 기능은 2015년 12월 8일WordPress 4.4 때 출시 되었으며, oEmbed 기능이 핵심 기능에 통합되었습니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축 1. 워드프레스 임베드 기능…

  • [WP] 최고의 워드프레스 SEO 플러그인 Yoast VS RankMath 분석

    대표적인 워드프레스 SEO 플러그인 Yoast VS RankMath 둘 중에 더 나은 선택은 어떤 것일까요? 워드프레스 검색엔진최적화 작업은 워드프레스 기반 웹 사이트 운영 시 필수이며, 기본입니다. 워드프레스 SEO 설정을 위한 플러그인은 많은 업체가 경쟁하고 있습니다. 대표적인 7개 All In SEO Plugin 중 Yoast와 Rank Math 두 개의 SEO 올인원 플로그인을 비교해 보겠습니다. ⓐ 워드프레스…