back to top
-1.6 C
New York
일요일, 12월 22, 2024

Buy now

[사이트 속도 개선] 브로틀리 압축(Brotli Compression)으로 속도를 개선해 보기

서버에서 브라우저로 콘텐츠를 보낼 때 Gzip으로 압축하여 보네는 방식을 사용하죠. 그래서 서버 세팅에 Gzip을 이용해 조금이라도 더 성능을 좋게하기 위한 옵션을 고민하곤 합니다. 압축을 최대한 높이고 등등

그런데 구글에서 Gzip보다 더 효율이 좋은 브로틀리 압축(Brotli Compression) 이라는 새로운 압축 방법을 공개했습니다. (사실 2015년에 발표되었으니 상당히 시간이 흘렀죠.) 이 압축방법은 폰트 압축인 WOFF2와 같이 현재 여러 방면에 활발히 적용되고 있다고 합니다.

브로틀리 압축(Brotli Compression)의 성능은 테스트하는 사람에 따라서, 테스트하는 조건에 따라서 조금씩 다르지만 20% ~ 26% 더 좋다는 포스팅이 많더군요. 그 정도는 아니지만 Gzip보다는 낫다는 BM 결과도 많아서 적용해 보기로 했습니다.

브로틀리 압축( brotli compression)과 Gzip 압축 비교

이 작업은 root에서 하도록 하겠습니다.  솔직히 서버 폴더 구조가 복잡하니 이리저리 이동하는 게 귀찮기도하고 마음에 들지도 않아,  SSH에 접속하자마자 바로 작업할 수 있는 이 곳을 선호하는 편입니다. 뭐 다른 문제도 있겠지만 당분간은 편한 쪽을 선택하고 있습니다.

작업자 선호에 따라 편한 디렉토리로 이동해서 그 디렉토리에 맞추어 작업하면 됩니다.

아래 작업 방법은 아래 글을 토대로 수정하였습니다. 일반적으로 소개하는 방식은 nginx 현재 버젼을 컴파일하는 방식이라 nginx 버젼이 바뀌면 다시 컴파일을 해줘야 합니다. 그런것을 막기 위해 nginx 업데이트를 막는 편법을 쓰기도 하더군요.

그런 방법을 사용하지 않기 위해 다이나믹 방식으로 브로틀리 압축(Brotli Compression)을 적용하는 방식을 찾았고, 아래 소개하는 방식에서 힌트를 얻어 다이나믹 방식으로 적용했습니다.

Brotli with Engintron Nginx #712

서버 업데이트

항상 새로운 작업을 하기전에는 서버를 최신 상태로 만들어 놓고 시작해야죠.

1
2
3
apt-get update
apt-get upgrade
cs

Nginx 다운 받기

Nginx는 별도 컴파일을 해야 하므로 이를 위한 Nginx를 다운 받습니다.

예전 ngx_pagespeed 설치시도 그랬지만 어느 소스를 받아오느냐에 따라 제대로 작동하기도하고 에러를 내기도 합니다.

아래 방법은 ngx_pagespeed 설치나 이번 브로틀리 압축 적용시에도 제대로 작동했던 방법입니다.

아래는 nginx 버젼이 1.15.2인 경우를 상정하고 적용 명령어를 정리했습니다.

1
2
3
4
cs

ngx_brotli 설치

다음으로는 ngx_brotli를 설치합니다.

서브 모듈 업데이트 및 컴파일

이 단계에서는 서브 모듈을 업데이트하고 브르틀리 모듈을 컴파일합니다.

1
2
3
4
5
cd /root/ngx_brotli && git submodule update —init && cd /root/nginx-1.15.2
./configure   —add-dynamic-module=/root/ngx_brotli —with-compat
make modules;  ls objs
cs

컴파일된 모듈을 복사

nginx 설정 파일이 있는 /etc/nginx에 mods라는 디렉토리를 만들고, 여기로 컴파일된 모듈을 복사합니다.
그리고 별 문제 없을 것이니 작업했던 폴더를 날립니다.

1
2
3
4
5
6
7
mkdir -p /etc/nginx/mods
cp /root/nginx-1.15.2/objs/ngx_http_brotli_filter_module.so /etc/nginx/mods/
cp /root/nginx-1.15.2/objs/ngx_http_brotli_static_module.so /etc/nginx/mods/
rm -Rf /root/nginx-1.15.2   # 폴더 삭제
cs

nginx 설정 파일에 반영

nginx.conf 파일을 열어서 맨 위부분에 컴파일된 모듈을 로딩합니다.

1
2
3
4
5
6
load_module mods/ngx_http_brotli_filter_module.so;
load_module mods/ngx_http_brotli_static_module.so;
user  www-data;
worker_processes  auto;  # 트래픽은 적은 사이트는 1을 선택하고 트래픽이 많은 사이트라면 Auto를 선택
cs

브로틀리 세팅

nginx.conf 파일에서 브로틀리를 설정합니다.
동적인 것과 정적인 것 모두 반영하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
##
# Brotli Compression Settings
##
# Dynamic mode.
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/vnd.microsoft.icon image/bmp image/svg+xml;
# Static mode.
brotli_static on;
cs

nginx 재가동

세팅이 끝났으면 nginx를 테스트해보고 문제가 없으면 nginx를 재가동시킵니다.

1
2
3
4
5
6
nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
service nginx restart
cs
spot_img

Latest articles

Related articles

spot_img