PageSpeed Insights

Nginx에서 gzip을 통해 컨텐츠 압축하는 방법

PageSpeed Insights

오늘 포스트는Nginx에서 gzip을 통해 컨텐츠 압축하는 방법 관련하여 공유드리고자 합니다.

최근 구글 사이트 속도 측정 사이트에서 제 사이트의 메인 페이지 로딩 속도를 측정했습니다.
100점 만점의 score로 표현이 되고 권고가 나오는데 매우 낮은 점수를 받고 Contents Compression 적용을 권고 받았습니다..ㅠ

사실 워드프레스를 이용하면서 플러그인에서 제공하는 caching을 사용하고 있었는데 이게 컨텐츠의 주소가 변경이 되면서 SEO에 안좋은 영향을 주는 것 같아 취소한 적이 있었고, 그 이후 정적인 컨텐츠를 제공하고 있었습니다.
그때그때 페이지 로딩이 필요할 때마다 계속 이미지를 불러오는 것이었죠.

한번 적용해보자는 마음으로 적용을 해보았는데, 방법은 매우 간단했습니다.
이제부터 이 방법에 대해 공유드리도록 하겠습니다.

Contents Compression이란?

Contents Compression(컨텐츠 압축)이란 서버와 클라이언트간 통신에서 전송되는 데이터 크기를 줄일 수 있으며, 그로인해 서비스 제공 속도를 향상시켜 서비스 품질을 향상시킬 수 있는 기술입니다.

이 기술로 사용자에게도 만족을 주지만, 웹사이트의 정보를 가져가는 ‘Webmaster Tool(웹마스터 도구)’ 등에도 좋은 영향을 줍니다.

아래 내용을 적용해보시기 전에 사이트 점수를 측정해보고 설정 전/후의 점수를 비교해보는 것도 재미있는 경험이 될 것 같습니다^^

Nginx에서 gzip을 이용하여 컨텐츠 압축 설정하기

이번 포스트에서는 Global하게 설정하는 방법에 대해 공유합니다.
제가 운영하고 있는 CentOS 7을 기준으로 nginx.conf 파일에 설정하게되면 Global하게 설정이 가능합니다.

[root@webserver /]# vim /etc/nginx/nginx.conf

...(생략)
http{
#Flature's gzip Contents Compression Setting
gzip on;

gzip_disable "msie6";

gzip_comp_level 6;
gzip_min_length 500;
gzip_buffers 16 8k;
gzip_proxied any;

gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/rss+xml image/svg+xml image/png;
#Flature's gzip Contents Compression Setting End
...(생략)
}
...(생략)

위와 같이 설정해주면 됩니다.
각 부분에 대해 간단하게 설명하자면 아래와 같습니다.

gzip on;

이 line을 통해 gzip을 사용할 것이라고 알려주는 것입니다.

gzip_disable "msie6";

위 gzip_disable은 gzip을 사용하지 않을 browser를 지정해주는 것입니다.
예전에 사용하던 익스플로러는 지원하지 않는다고 하네요.
위와 같이 지정해주도록 하시죠.

gzip_comp_level 6;
gzip_min_length 500;
gzip_buffers 16 8k;
gzip_proxied any;

gzip_comp_level은 압축의 정도를 설정하는 부분입니다.
1~9 사이에서 설정이 가능하며, 높은 숫자일 수록 압축율이 큰 대신 속도가 느려진다고 합니다. 서버의 성능을 고려하여 설정해주는 것이 좋을 것 같습니다.

gzip_min_length는 압축을 시도할 최소 사이즈를 설정하는 곳입니다.

gzip_buffers는 버퍼의 숫자와 크기를 설정하는 부분입니다. 앞의 숫자가 버퍼의 개수이고, 뒤의 숫자가 버퍼의 크기입니다.

gzip_proxied는 프록시에서 요청하는 등의 특정 상황에 따라 동작 유무를 설정할 수 있습니다.
기본값은 off 이며, ‘off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any’ 를 사용할 수 있습니다.

gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/rss+xml image/svg+xml image/png;

gzip_types는 gzip을 사용할 컨텐츠 타입들을 지정하는 부분입니다.
기본 값으로는 text/html 입니다. 설정은 MIME type을 따릅니다.
MIME type은 곧 업로드 하도록 하겠습니다.
페이지 검색을 통해 ‘mime’을 검색해주세요. (곧 링크연결 예정)

저는 이 설정을 통해 점수를 90점 이상으로 올리는 기적을 보았습니다ㅎ
여러분도 한번 시도해보시는 것도 좋을 것으로 보입니다.

지금까지 Nginx에서 gzip을 통해 컨텐츠 압축하는 방법 관련 글이었습니다.
다른 인프라 관련 글을 보시려면 이 링크를 눌러주세요.

Leave a Reply