GZIP, Brotli 어떻게 성능을 개선시켜줄까?

쭌로그·2025년 5월 3일

brotli gzip vite

Gzip

Vite를 통해 최적화를 진행하다보면 Gzip, Brotli로 압축하여 전송하라는 내용들이 많이 보입니다. 그렇다면 Gzip, Grotil은 무엇인데 사용자에게 빠른 경험을 제공할 수 있을까요?

Gzip

Gzip은 번들링 이후 단계에서 만들어진 파일들을 압축하는 알고리즘 입니다. 서버에서 클라이언트로 데이터를 전송할 때 데이터의 크기를 줄이며 네트워크 전송 시간을 단축하는데 목적을 두고 있습니다.

일반적으로 번들링과 Gzip 압축을 같은 개념으로 생각하는 분들이 많은데 두 개를 동시에 진행하는 것이 빌드 과정이라고 생각하면 될것 같습니다.

번들링을 통해 분리된 파일들을 합치고 사이즈를 줄인다.
번들링을 통해 합쳐진 파일들을 압축하여 전송 크기를 줄인다.

일반적으로 Gzip을 적용하고 빌드를 진행했을 때 발생하는 순서입니다.

Gzip 특징

Gzip은 웹에서 파일을 압축/전송하기 위한 파일 포맷이자 소프트웨어입니다.
1992년 GNU 프로젝트에서 개발되었으며, LZ77 알고리즘과 Deflate 방식을 사용합니다.
무손실 압축이기 때문에, 압축/해제 과정에서 데이터 손실이 없습니다.

여기서 주요한 특징은 무손실 압축이라는 부분입니다. 데이터를 압축하고 해제하는 과정에서 데이터의 손실이 없기 때문에 사용자는 빠른 경험을 받을 수 있는 것입니다.

CSR에서의 Gzip 작동 방식

yarn build, npm run build를 통해 빌드 파일을 생성한다.
서버(Nginx)나 빌드 도구가 파일들을 Gzip으로 압축한다.
브라우저가 서버에 앱을 요청하면 서버는 압축된 파일을 전송한다.
브라우저는 받은 파일들을 압축해제하여 사용자에게 보여준다.

CSR에서 Gzip은 번들을 압축하여 FCP, TTI, LCP 등 초기 로딩 시간을 단축하는데 큰 도움을 줄 수 있습니다. 특히 node_modules 내부의 수 많은 패키지들이 존재합니다. 이때 Gzip에서 사용하는 L277 알고리즘을 통해 반복되는 패턴을 압축하여 많은 양의 코드를 개선시킬 수 있습니다.

Vite에서의 Gzip 적용 방법

Vite에서 Gzip, Brotli과 같은 압축 방식을 적용하기 위해서는 vite-plugin-compression 플러그인을 설치해서 적용해야합니다.

1. 설치 방법

npm install -D vite-plugin-compression2
or
yarn add -D vite-plugin-compression2

vite-plugin-compression은compre 3년 전부터 유지보수가 되지 않고 있기에 vite-plugin-compression2를 사용했습니다

2. 적용 방법

//vite.config.js
import { compression } from 'vite-plugin-compression2';

// https://vitejs.dev/config/
export default defineConfig({
  // 기타 설정
  plugins: [
    react(),
    compression({
      algorithm: 'gzip',
    })
  ],

vite의 plugin에 compression을 등록한 뒤, 원하는 알고리즘을 선택하면 해당 압축 방식으로 번들을 압축할 수 있습니다.
또한 compression을 여러번 사용하여 압축을 여러 번 진행할 수 있습니다. (일반적으로 Gzip으로 압축한 뒤, Brotli로 한 번 더 압축하는 방식을 많이 사용합니다.)

import { compression } from 'vite-plugin-compression2';

// https://vitejs.dev/config/
export default defineConfig({
  // 기타 설정
  plugins: [
    react(),
    compression({
      algorithm: 'gzip', //gzip
    }),
    compression({
      algorithm: 'brotliCompress', //brotli
    })
  ],

Gzip 적용 후

//일반 빌드 파일
dist/assets/index-CYbT4RwO.css           9.90 kB │ gzip:  2.75 kB
//Gzip을 적용했을 때
dist/idus_web_playform/assets/index-CYbT4RwO.css.gz        9.67kb / gzip: 2.68kb
//Brotli까지 적용했을 때
dist/idus_web_playform/assets/index-CYbT4RwO.css.br        9.67kb / brotliCompress: 2.29kb

압축을 진행할 수록 파일의 크기가 줄어드는 것을 확인할 수 있습니다. 이를 통해 네트워크 전송 크기를 개선하며 로딩 속도를 빠르게 할 수 있습니다.

웹 사이트에서 확인 방법

웹 사이트에서 빌드 파일이 압축이 되었는지 확인하려면 네트워크 분석을 통해 알 수 있습니다.

응답 헤더에서 Content-Type: gzip을 확인 했을 때 gzip으로 압축이 되어있는 것을 확인할 수 있습니다.
만약, 압축이 되어있지 않다면 Content-Type 헤더가 없거나 identity 값을 가지고 있습니다.

Gzip은 알겠다.. 근데 Brotli는 또 뭔가..?

Brotli는 Google에서 개발한 압축 알고리즘으로 Gzip보다 더 우수한 압축률을 제공합니다.

Brotli의 특징

압축 알고리즘: LZ77 + Huffman 부호화 + 사전(dictionary)

특성	Brotli	Gzip
출시 시기	2015년 (Google)	1992년 (Jean-loup Gailly, Mark Adler)
압축 알고리즘	LZ77 + Huffman + 사전 압축	LZ77 + Huffman
압축률	보통 Gzip보다 높음	Brotli보다 낮음
속도 (압축)	느림	빠름
속도 (해제)	빠름	빠름
파일 확장자	.br	.gz
주요 사용처	웹 (HTTP 압축, WOFF2 폰트 등)	웹, 파일 압축 등
사전(dictionary) 지원	예 (웹 최적화에 유리)	없음
표준 지원	HTTP/2, HTTP/3, 대부분 브라우저 지원	모든 브라우저 지원
최대 압축 레벨	11	9
스트리밍 지원	예	예

Brotli이 압축률이 더 높으면 Brotli만 사용하면 되는거 아닐까..?

빌드 파일을 만들 때 Brotli과 Gzip을 같이 사용하는 이유는 여러가지가 있습니다.

브라우저 호환성
- 구형 브라우저에서는 Brotli을 지원하지 않을 수 있기 때문에 Gzip을 사용합니다.
HTTP/2.0 이상
- Brotli는 HTTP/2에서 최적화 된 성능을 발휘하도록 설계되었습니다.
속도 균형
- Brotli는 압축률은 높지만 압축 속도는 Gzip이 더 우수합니다.
- 서버에서 실시간 압축을 하는 경우에는 Gzip이 더 빠를 수 있어 Gzip이 더 실용적일 수 있습니다.

종합하자면 브라우저 호환성, 압축 속도 등의 이유로 Gzip을 함께 사용한다고 할 수 있습니다.