Nginx Brotli 모듈 설치. 사이트 속도 개선 설정

사이트의 속도 향상을 위해서 서버에 압축 기술을 적용 합니다. 전송 데이터를 압축하여 데이터의 크기를 줄여서 서버와 클라이언트간의 전송시간을 줄이는 방법입니다.

Brotli는 Gzip보다 더 나은 압축 성능으로 최신 브라우저들에서는 모두 Brotli를 지원하므로 사용하지 않을 이유가 없어보입니다.

일반적으로 Gzip을 많이 사용하지만 이 글에서는 Brotli라는 구글에서 개발한 압축 알고리즘을 적용하는 방법을 설명합니다.

Ubuntu 서버에 Nginx Brotli 모듈 설치

우분투 서버에서는 apt-get 명령어로 간편하게 모듈 설치를 진행합니다. 아래 명령을 차례로 입력하여 모듈 설치를 진행합니다.

sudo apt-add-repository -y ppa:hda-me/nginx-stable
sudo apt-get update
sudo apt-get install brotli nginx-module-brotli

Brotli 사용 설정

Nginx 설정 파일을 수정하여 Brotli 관련 설정을 추가하도록 합니다.

sudo nano /etc/nginx/nginx.conf

아래 두 가지 Brotli 관련 모듈을 로드하도록 nginx.conf 상단에 추가합니다.

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Brotli 관련된 설정은 http { … } 사이에 적당한 곳에 기록합니다.

이때 Gzip과 Brotli 설정을 함께 기록해 주면 Brotli 압축 알고리즘을 지원하지 않는 브라우저의 경우엔 Gzip을 사용하여 압축 전송하도록 하게 됩니다.

user www-data;
# www-data for php-fpm, nginx user works with static content only
worker_processes auto;
pid /var/run/nginx.pid;

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

events {
    worker_connections 768;
}

http {
    ....
    
    # Gzip
        gzip on;
        gzip_disable "msie6";
        gzip_vary off;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_min_length 1000;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/atom+xml;

    # Brotli
        brotli on;
        brotli_static on;
        brotli_comp_level 6;
        brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript  application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;

    ....
}

설정을 추가 하였다면 서버를 재시작하여 작성한 설정 내용이 적용되도록 합니다.

sudo systemctl restart nginx

Brotli와 Gzip 압축 적용 테스트

적용한 압축 알고리즘이 서버에 제대로 적용 되었는지 테스를 위해서는 헤더에 accept-encoding 항목으로 ‘br’ 또는 ‘gzip’값을 넣어서 전송 해 보면 확인할 수 있습니다.

curl -IL https://signpen.net -H "Accept-Encoding: br"

-- 응답 --
HTTP/2 200 
server: cloudflare-nginx
date: Fri, 23 Jul 2021 13:25:56 GMT
content-type: text/html; charset=UTF-8
cf-edge-cache: cache,platform=wordpress
link: <https://signpen.net/wp-json/>; rel="https://api.w.org/"
content-encoding: br

Brotli 테스트땐 curl 명령어로 ‘br’을 헤더에 넣어서 보냅니다. content-encoding: br로 응답을 받았다면 정상 적용된 것입니다.

curl -IL https://signpen.net -H "Accept-Encoding: gzip"

-- 응답 --
HTTP/2 200 
server: cloudflare-nginx
date: Fri, 23 Jul 2021 13:29:32 GMT
content-type: text/html; charset=UTF-8
cf-edge-cache: cache,platform=wordpress
link: <https://signpen.net/wp-json/>; rel="https://api.w.org/"
content-encoding: gzip

gzip 역시 정상 작동하는 것을 확인 했습니다

---

참고

How To Enable GZIP & Brotli Compression for Nginx on Linux

Nginx HDA Bundle – Dynamic Modules Power

---