NGINX Brotli 압축으로 성능 최적화
현대의 웹 환경에서는 사용자의 기대에 부응하기 위해 빠르고 효율적인 웹 페이지 로딩이 필수적입니다. 페이지 로딩 속도는 사용자 경험에 직접적인 영향을 미치며, 이는 사이트 방문자 수와 전환율까지 영향을 줄 수 있습니다. 이러한 문제를 해결하기 위해 NGINX Brotli 모듈을 사용하여 페이지 로딩 속도와 사용자의 만족도를 크게 향상시킬 수 있습니다.
압축 기술은 웹 성능을 향상시키는 효과적인 방법 중 하나입니다. 데이터를 압축함으로써 전송되는 파일의 크기를 줄이고, 결과적으로 네트워크 대역폭을 절약하며 로딩 시간을 단축할 수 있습니다. 그중에서도 Brotli는 압축 알고리즘으로, 특히 웹 콘텐츠 전송에 있어 뛰어난 성능을 자랑합니다.
이번 포스트에서는 Brotli 모듈을 사용하여 압축을 설정하고 활용하는 방법을 알아보겠습니다. Brotli 압축을 통해 웹 성능을 최적화 해보세요.
(※ Brotli 모듈은 NGINX 상용 제품인 NGINX Plus에서 제공하는 모듈입니다.)
목차
1. NGINX Brotli 압축이란?
2. NGINX Brotli 모듈 활성화
3. NGINX Brotli 압축 구성
4. NGINX Brotli 성능 확인
5. 결론
1. NGINX Brotli 압축이란?
Brotli 압축은 구글이 개발한 오픈 소스 압축 알고리즘으로, 웹 콘텐츠를 효율적으로 압축하기 위해 설계되었습니다. Brotli는 특히 HTTP/2와 함께 사용될 때 그 성능이 두드러지며, Gzip과 같은 기존의 압축 알고리즘에 비해 몇 가지 주요 장점을 가지고 있습니다.
- 높은 압축률 – Brotli는 Gzip보다 더 높은 압축률을 제공하여, 동일한 데이터에 대해 더 작은 파일 크기를 생성합니다. 이를 통해 네트워크 대역폭을 절약하고 페이지 로딩 속도를 향상시킬 수 있습니다.
- 사전 기반 압축 – Brotli는 사전 기반 압축 방식을 사용하여, 자주 사용되는 문자열이나 패턴을 사전에 저장하고 이를 활용하여 압축 효율성을 극대화합니다.
- 빠른 압축 및 해제 속도 – Brotli는 높은 압축률을 유지하면서도 상대적으로 빠른 압축 및 해제 속도를 제공합니다.
- 브라우저 지원 – 주요 웹 브라우저(Chrome, Firefox, Sarfari)는 Brotli 압축을 지원하므로, 웹 애플리케이션에서 널리 사용될 수 있습니다.
Brotli는 웹 성능 최적화에 매우 유용한 도구로, 특히 대량의 텍스트 데이터 전송 시 그 효과가 극대화 됩니다. NGINX Brotli 모듈을 활성화하면, 사용자에게 더 빠르고 효율적인 웹 경험을 제공할 수 있습니다.
NGINX에서 Brotli 압축을 활성화한 경우, 클라이언트가 Accept-Encoding: br 헤더를 보내야만 Brotli 압축이 적용됩니다. 클라이언트가 이를 보내지 않으면 서버는 압축되지 않은 데이터를 전송하거나 다른 지원 가능한 압축 형식을 사용합니다(예: gzip).
클라이언트 요청 예시:
GET /index.html HTTP/1.1
Host: example.com
Accept-Encoding: br서버 응답(Brotli):
HTTP/1.1 200 OK
Content-Encoding: br
Content-Type: text/html2. NGINX Brotli 모듈 활성화
NGINX Brotli 모듈은 기본적으로 설치되어 있지 않습니다. 따라서 NGINX Brotli 모듈 설치 방법은 아래 포스트를 참조하세요.
설치가 완료 되었다면, 최상위 context에 load_module 지시문을 사용하여 Brotli 모듈을 활성화합니다.
load_module modules/ngx_http_brotli_filter_module.so; # for compressing responses on-the-fly
load_module modules/ngx_http_brotli_static_module.so; # for serving pre-compressed files
http {
#...
}brotli on; 지시문을 사용하여 정상적으로 활성화 되었는지 확인합니다.
http {
server {
brotli on;
#...
}
}구성을 테스트합니다.
$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful구성 테스트가 성공한다면, 정상적으로 활성화된 것입니다.
Brotli 모듈에 대한 지시문은 아래를 참조하세요.
3. NGINX Brotli 압축 구성
아래는 NGINX Brotli 모듈을 활성화 하고, 압축을 위한 구성의 예시입니다.
server {
listen 80;
brotli on;
brotli_comp_level 6;
brotli_types text/css application/javascript image/png image/jpeg;
location / {
root /usr/share/nginx/html;
index index.html;
}
}위와 같이 구성하면, 80 포트 서버 전역에 대해 css, js, png, jpeg, jpg 타입의 파일을 압축하게 됩니다.
4. NGINX Brotli 성능 확인
Brotli 압축 전 상황은 아래와 같습니다. 상단의 bootstrap-grid.css 파일의 size는 72.5kB, 응답 시간은 66ms 이고, 하단의 nginx1.jpg 파일의 size는 4.3MB, 응답 시간은 1.54s 걸린 것을 확인할 수 있습니다.
Brotli 모듈을 활성화하고 css, js, jpg 파일을 압축하도록 구성합니다.
server {
listen 80;
brotli on;
brotli_comp_level 6;
brotli_types text/css application/javascript image/png image/jpeg;
location / {
root /usr/share/nginx/html/http_test;
index index.html;
}
}구성 후 요청하여 size와 응답 시간을 확인합니다. 상단의 bootstrap-grid.css 파일의 size는 5.9kB, 응답 시간은 47ms, 하단의 nginx1.jpg 파일의 size는600 kB, 응답 시간은 194ms 걸린 것을 확인할 수 있습니다.
Brotli 모듈을 사용하기 전과 후를 비교해 보면, bootstrap-grid.css 파일과 nginx1.jpg 파일을 기준으로 bootstrap-grid.css 파일은 약 91.86% 압축 되었고 응답 시간은 약 28.79% 빨라졌으며, nginx1.jpg 파일은 약 86.05% 압축 되었고, 응답 시간은 약 87.40% 빨라진 것을 확인할 수 있습니다.
요청 헤더와 응답 헤더를 확인하여 Brotli 압축 방식이 포함되어 있는지 확인하세요.
5. 결론
이번 포스트에서는 NGINX 서버에서 Brotli 압축을 활용하여 웹 성능을 최적화하는 방법에 대해 살펴보았습니다. Brotli는 Gzip보다 높은 압축률을 제공하며, 특히 텍스트 기반 데이터의 경우 더욱 뛰어난 성능을 발휘합니다. 이를 통해 웹사이트의 로딩 속도를 개선하고, 사용자 경험을 향상시킬 수 있습니다.
Brotli 압축을 설정하는 과정은 비교적 간단하며, NGINX의 설정 파일을 통해 손쉽게 구현할 수 있습니다.
Brotli 압축을 사용하기 전에는 브라우저 호환성과 서버 자원 사용량에 유의해야 합니다. 적절한 캐싱 전략과 함께 Brotli를 활용한다면, 웹사이트의 성능을 극대화할 수 있을 것입니다.
NGINX 상업용 버전을 직접 사용해 보시려면 30일 무료 평가판을 신청하거나 NGINX STORE에 연락하여 논의하십시오.
댓글을 달려면 로그인해야 합니다.