gzip 압축으로 정적 리소스(CSS, JS 등)의 전송 효율을 높이는 방법

gzip 압축은 파일 크기를 줄여 네트워크 대역폭을 절약하고 로딩 속도를 개선합니다.

1. GZip 압축 설정 단계

1-1. GZip 활성화

http {
    gzip on;  # GZip 압축 활성화
}

1-2. 압축 레벨 설정

http {
    gzip_comp_level 3;  # 압축 레벨 (1-9, 3-4 권장)
}

• 1: 빠른 압축 (낮은 압축률)
• 9: 높은 압축률 (CPU 부하 증가)
• 3-4: 효율적인 균형

1-3. 압축 대상 MIME 타입 지정

http {
    gzip_types text/css text/javascript application/javascript;
}

• 주요 MIME 타입:
  • text/css (CSS 파일)
  • text/javascript, application/javascript (JS 파일)
  • text/html, application/json 등 추가 가능

1-4. Vary 헤더 설정 (캐싱 호환성)

location ~* \.(css|js)$ {
    add_header Vary "Accept-Encoding";  # 압축 방식 변동성 표시
}

 

2. 최종 Nginx 설정 예시

http {
    gzip on;
    gzip_comp_level 3;
    gzip_types text/css text/javascript application/javascript;

    server {
        location ~* \.(css|js)$ {
            add_header Vary "Accept-Encoding";
        }
    }
}

3. GZip 압축 테스트

3-1. curl로 압축 응답 확인

• 응답 헤더:

  Content-Encoding: gzip  # 압축 적용 확인

3-2. 파일 크기 비교

• 압축 전: 980 bytes
• 압축 후: 487 bytes (약 50% 감소)

4. 주의사항

• 클라이언트 지원 필수: 클라이언트가 Accept-Encoding: gzip 헤더를 보내야 함 (모던 브라우저 기본 지원).
• 이미지 압축 주의: 이미지(JPEG, PNG)는 이미 압축되어 있어 GZip 적용 시 오히려 크기가 증가할 수 있음.
• CPU 부하 모니터링: 높은 압축 레벨은 서버 CPU 사용량 증가시킬 수 있음.

5. 추가 최적화 옵션

http {
    gzip_min_length 256;  # 256바이트 미만 파일은 압축하지 않음
    gzip_proxied any;     # 프록시된 요청도 압축
    gzip_vary on;         # Vary 헤더 자동 추가 (별도 설정 불필요)
}

 

이 설정을 통해 정적 리소스의 전송 효율을 극대화할 수 있습니다!