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

공정위 광고 문구 Ver 3.1
공정위 광고 문구 Ver 3.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

  • IMAGIFY 설정: 워드프레스 이미지 최적화 플러그인

    워드프레스 이미지 최적화 플러그인은 JPEG 또는 PNG 이미지를 WebP 이미지로 변화해 주며, 이미지를 무손실 또는 손실로 압축합니다. 이미지 최적화 플러그인은 워드프레스 웹 사이트의 로딩 속도를 대략 50% 정도 향상 시킵니다. 그 중 2년 정도 사용한 IMAGIFY 플러그인은 웹 사이트의 로딩 속도를 빠르게 변환해 주는 플러그인 중 하나입니다. 무료 버전에서 월 20M, 200개의 이미지를…

  • [WP] 2023년 빠른 워드프레스 테마 5개

    워드프레스 사이트를 운영 중인데 구글 페이지 스피드 및 지티메트릭스와 같은 사이트에서 원하는 속도가 나오지 않아 테마를 바꿀 것을 고려할 수 있습니다. 가볍고 빠른 2023년 빠른 워드프레스 테마는 무엇이 있을까요? 많은 워드프레스 테마의 총 페이지 크기가 300kb 이상인 경우가 많습니다. 워드프레스가 느리다는 인식이 몇 년 전까지 일반적이었지만 빠른 워드프레스 테마가 새로 나오고 지속적인 기존…

  • 워드프레스 “There has been a critical error on your website” 오류 원인과 해결 과정

    워드프레스 관리자 페이지에서 작업 중 다른 페이지는 문제가 없었으나 [업데이트] 페이지를 접속하면 “there has been a critical error on your website. please check your site admin email inbox for instructions.” 오류 메시지가 확인 되었습니다. 워드프레스 “웹사이트에 치명적인 오류가 있습니다.”와 같은 문제 발생 시 빠른 해결 방법은 바로 원인 파악을 하는겁니다. 1️⃣ There has…

  • 워드프레스 플러그인: Health Check&Troubleshooting | 플러그인 충돌 테스트

    워드프레스 플러그인 충돌 테스트를 위해 모든 플러그인을 직접 비활성화하면 방문자에게 사이트가 깨져 보일 수 있습니다. 이때 사이트는 그대로 유지하고 관리자만 테스트할 수 있는 Health Check & Troubleshooting 플러그인을 사용할 수 있습니다. ✅ Health Check&Troubleshooting 플러그인 설치 플러그인 명을 검색해서 플러그인 충돌 테스트를 해야 한다면 먼저 플러그인을 설치합니다. ✅ 플러그인 충돌 테스트 관리자 페이지…

  • [워드프레스] 차일드 테마란? 만들어야 할까요? 그럼 어떻게?

    워드프레스 CMS를 사용하면 테마는 필수로 사용하게 됩니다. 워드프레스 차일드 테마는 운영하는 워드프레스 사이트에서 필수 요소인지 먼저 생각해 볼 필요가 있습니다. 1. 차일드 테마란? 차일드 테마(Child Theme)는 워드프레스 프레임워크의 주요 기능 중 하나입니다. 사용 중인 테마 파일의 수정(커스터마이징)이 필요할 때 원본 테마(부모 테마) 대신 수정할 수 있게 만들어진 기능입니다. Child Theme는 기본 테마 업데이트가…

  • [WP] 워드프레스 외모 | 테마 | 사용자 정의하기 | 위젯 | 메뉴 | 4가지 항목 이해 및 설정

    워드프레스 외모 메뉴에 대해 알아 보겠습니다. 관리자 페이지의 외모 메뉴 구성은 테마 | 사용자 정의하기 | 위젯 | 메뉴 | 테마파일 편집기 총 5가지 항목 메뉴로 나뉘어집니다. CSS 설정을 하는 테마파일 편집기를 제외한 나머지 4가지 항목에 대해 알아 보겠습니다. ♣ 워드프레스 외모 설정 개요 외모 설정에서 워드프레스 테마 선택과 설치, 테마 옵션 설정,…