[Spring Boot] Gzip 압축을 통해 로딩 성능 최적화 하기

목차

1. 개요

2. Gzip?

3. Gzip 사용 시와 사용하지 않을 때의 차이

4. Gzip 설정법

5. 적용 전, 적용 후 차이

6. 결론

 

 

Lighthouse (크롬 개발자모드 Lighthouse탭)

1. 개요

리액트 + 스프링부트로 진행 중인 프로젝트를 어느 정도 마무리 했다. 이제 배포전 성능테스트를 하며 최적화에 신경 쓰고 있다. 나는 'Lighthouse'를 사용해서 1차적으로 성능을 측정하고 문제점을 고쳐나가고 있다. 이때 만난 콘텐츠 로딩속도 문제에 관해 찾아보다가 Gzip에 관해 알게 되었다. 그래서 공부하고 기록할 겸 글을 작성한다.

 

2. Gzip?

Gzip은 데이터를 압축하여 전송하는 표준적인 방법 중 하나로, 주로 웹에서 클라이언트와 서버 간의 데이터 전송 시 사용된다. Gzip은 텍스트 기반의 파일(HTML, CSS, JavaScript, JSON 등)을 효율적으로 압축하여 데이터 전송량을 줄이고, 페이지 로딩 속도를 향상시킨다.

 

3. Gzip 사용 시와 사용하지 않을 때의 차이

Gzip 사용 X

요청: 클라이언트가 서버에 데이터를 요청.

응답: 서버는 원본 데이터를 그대로 전송.

전송: 데이터 크기가 크면 네트워크 대역폭을 많이 사용하고, 로딩 시간이 길어질 수 있다.

 

Gzip 사용 O

요청: 클라이언트가 서버에 데이터를 요청하며, Accept-Encoding: gzip 헤더를 포함.

응답: 서버는 데이터를 Gzip으로 압축한 후 전송.

전송: 압축된 데이터는 크기가 작아 네트워크 대역폭 사용을 줄이고, 로딩 시간이 단축.

해제: 클라이언트는 받은 데이터를 Gzip으로 해제하여 사용한다.

 

차이점 요약

데이터 크기: Gzip 사용 시 전송 데이터 크기가 감소.

전송 속도: 데이터 크기 감소로 인해 전송 속도가 향상.

CPU 사용량: 압축 및 해제 과정에서 약간의 CPU 자원이 추가로 사용됨.

 

4. Gzip 설정법

Spring Boot에서는 내장 서버가 기본적으로 GZIP 압축을 지원한다. 활성화만 시켜주자.

server:
  compression:
    enabled: true
    mime-types: text/html,text/plain,text/css,application/javascript,application/json
    min-response-size: 500

 

application.yml / application.properties에 위 설정만 추가해 주자. 

 

각각의 설정 속성

enabled: GZIP 압축 활성화 여부
mime-types: 압축할 콘텐츠 유형(MIME 타입). 일반적으로 HTML, CSS, JavaScript, JSON 등이 포함된다.
min-response-size: 압축을 적용할 최소 응답 크기(바이트). 1024로 설정하면 1KB 이상의 응답에만 압축이 적용된다.

 

5. 적용 전, 적용 후 차이

적용 전

적용 전 게시글 리스트를 불러오는 데이터 용량은 28.1KB였다.

 

적용 후

적용 후에는 4.4 KB 가 적용되었다.

28.1 KB -> 4.4 KB 적용 전보다 약 80 퍼정도가 감소하였다.

 

크롬 개발자도구 네트워크 상세보기탭

또한 Response Headers에 Content-Encoding이 생겼다. 

 

6. 결론

Gzip 압축을 사용함으로써 데이터 전송량을 크게 줄일 수 있었고, 페이지 로딩 속도 향상에 직접적인 영향을 미쳤다. Spring Boot에서의 설정 또한 간단하여 별도의 복잡한 작업 없이 쉽게 적용할 수 있었다. 성능 최적화를 위해 Gzip 압축을 활용하는 것도 좋은 것 같다.