[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

  • [WP] 워드프레스 htaccess 기본 설정 및 WWW URL 제거 방법

    워드프레스로 사이트를 운영하는 중에 .htaccess 파일 기본 설정이 필요할 때가 있습니다. 워드프레스 htaccess 기본 설정은 일반 사이트와 멀티 사이트 용으로 나뉩니다. FTP 또는 SSH 등으로 .htaccess 파일이 없는 경우 확인이 되면 아래 내용을 참조해서 생성하면 되겠습니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축✅ 워드프레스 htaccess 기본 설정: 일반 사이트…

  • [WP] 워드프레스 XML-RPC 취약점과 비활성화 해야 하는 이유 2가지

    워드프레스 xmlrpc.php는 보안 문제가 발생합니다. xmlrpc.php 파일을 이용한 워드프레스 사이트에 대한 무차별 대입 공격이 문제입니다. xmlrpc.php 취약점으로 많은 워드프레스 유저에게 알려진 문제이기도 합니다. ‘XML-RPC‘의 기본 기능 및 활용성과 문제가 되는 이유에 대해 알아 보겠습니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축 1. 워드프레스 xmlrpc.php란? xmlrpc.php 파일은 HTTP가 전송 메커니즘으로…

  • TLS/SSL 보안인증서 종류(형식) 4가지와 기능

    SSL 인증서의 목적은  웹 사이트에 접속하기 전 기존 HTTP 프로토콜에서 HTTPS 프로토콜로 변경이 되면서 전송 된 데이터를 암호화 하여 데이터를 보호하는 목적을 가지고 있습니다. 이번에 TLS(SSL) 인증서의 종류에 대해 알아 보겠습니다. SSL 보안인증서 종류는 크게 싱글(Single)인증서, 멀티(Multi) 인증서, 와일드카드(WildCard), 엔터프라이즈(EnterPrise) 인증서 4개로 볼 수 있습니다. SSL 인증서 종류에 따라 어떤 점이 다른지 기능들을 살펴…

  • [WP] 워드프레스 드롭인 플러그인이란?

    워드프레스 드롭인 플러그인Drop-In Plugin은 제한된 Wordpress 기능을 대체하거나 향상 시키는 기능을 가진 플러그인입니다. 추가 기능을 제공하기도 하며 워드프레스 관리자 페이지 플러그인 카테고리에서 확인할 수 있습니다. 하나의 파일로 서버 디렉토리 내의 루트 폴더/wp-content/Drop-In-Plugin명 워드프레스 /wp-content/ 폴더 내에 위치하며, 워드프레스 관리자 페이지 > 플러그인 > 드롭인 플러그인(활성화 된 경우)을 활인할 수 있습니다. 목차1. 압축이란?2. Gzip…

  • [WP] 워드프레스 vs 티스토리 더 나은 선택은?

    수익형 블로그라서 해서 한국에서는 티스토리를 많이 이용하고 있습니다. 티스토리의 가장 큰 장점은 구글 애드센스 광고를 블로그에 게재해서 수익을 올릴 수 있다는 장점이 있습니다. 하지만 티스토리 블로그는 너무 많은 문제를 가지고 있습니다. 앞으로도 절대 해결되지 않을 것이 99% 이상 기정 사실화 되었다고 할 수 있습니다. 워드프레스 vs 티스토리를 고민하는 분들이 2023년 이후 점점 늘어나고…

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

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