[워드프레스 최적화] gzip 압축으로 워드프레스 로딩 속도를 개선 방법

인터넷 웹라우저 통신에서 http는 많은 부분을 차지하는데요. 이런 웹 브라우저 통신에서 속도 개선하기 위해서 gzip 압축, 브라우져 캐싱, js & css 압축 그리고 CDN(contents delivery network)과 같은 방법들이 적용되고 있습니다.

이러한 위의 웹 사이트를 최적화 방법 중 gzip 압축을 적용해 사이트 속도를 높이고 트래픽도 감소시키는 방법에 대해서 알아 봅니다.

아래 내용은 저자와의 협의하에 웹서버 최적화 -NGINX에서 gzip 압축으로 트래픽과 로딩 속도를 개선해 보자를 그대로 인용하였습니다.

1. gizip이란 무엇일까요?

위키백과 에서 gzip 설명 내용을 토대로 다시 정리해 보면

• gzip은 GNU zip의 준말로 유닉스시스템에서 사용하는 압축 프로그램으로 시작되었다.
• 1992년 10월 31일 Jean-loup Gailly와 마크 애들러가 만들어 처음 배포하였다.
• 압축 구현 방법은 LZ77과 허프만 코딩을 조합한 DEFLATE알고리즘에 기반한다고 알려져 있다.

즉 gzip은 웹서버에서 사용하는 압축 프로그램으로 여기서 압축한 방식을 대부분의 웹 브라우저에서 지원하는 범용성때문에 웹서버 최적화 시 많이 사용하는 소프트웨어입니다.
리눅스계열등을 설치 시 기본으로 배포하는 프로그램으로 이를 사용하기 위해 프로그램을 설치할 필요가 없습니다.

2. gzip설정 옵션

gzip의 옵션에는 아래와 같은 것들이 있습니다.

• gzip [on/orr] : gzip의 설정을 on/off하는 명령
• gzip_disable [regex] : 해당 명령어 다음에 오는 문장이 요청 헤더에 User-Agent와 일치 시 압축하지 않음
• gzip_vary [on/off] : gzip, gzip_static, or gunzip 설정이 on일 시 응답 헤더에 “Vary: Accept-Encoding”를 넣을지 말지에 대한 명령
• gzip_proxied : 요청과 응답에 따라서 프록시된 요청을 압축할지 말지에 대한 설정으로 “any”로 설정하면 모든 응답에 대해 gzipping 압축을 수행
• gzip_comp_level [level] : 응답에 대한 압축의 정도를 의미하며 level의 값은 1부터 9까지 가능
• gzip_buffers [num] [size] : num은 버퍼의 갯수, size는 버퍼의 크기를 의미
• gzip_http_version [versino] : minimum HTTP 통신 버전
• gzip_types [types in array] : “text/html”외 추가로 gizip항 타입 정의

3. nginx에서 gzip설정

nginx에서 gzip을 설정하는 방법은 /etc/nginx 경로에 있는 nginx.conf 파일을 수정해서 설정합니다.

gzip을 적용 시 주의할 점이라고면 욕심에 모든 파일 압축을 요구하는데 이는 오히려 서버의 부하를 가중시켜 속도를 떨어뜨린다고 합니다.

• gzip_min_length 1024;와 같이 압축해야 할 최소 크기를 지정, 어느 정도 큰 파일만 압축하라고 가이드 함
• 이미지 파일은 압축이 안되기 때문에 압축 타입에서 빼라고 함
• 단 이미지 파일이지만 SVG 파일은 코드 형태로 되어 있으므로 적용 가능

3.1. SVG 파일 압축 가능한지 확인

SVG 파일을 gzip 압축이 가능하게 하려면
먼저 NGINX에 이를 가능케 되어 있는지 mime types을 확인해야 합니다.

• /etc/nginx/mime.types 파일을 열어 image/svg+xml svg svgz;가 있는지 확인하고 없으면 추가
• 최근 NGINX에는 포함되어 있음

3.2. gzip 설정

아래와 같이 gzip 옵션을 적용합니다.

# enable gzip compression

gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";  # IE 6이하에는 적용시키지 않음
gzip_vary on;
gzip_min_length  1024;
gzip_buffers     16 8k; 
gzip_proxied any;
gzip_comp_level 6; # 압축 레벨 1~9 사이 선택 
gzip_http_version 1.1;
gzip_types       text/html application/x-javascript text/css application/javascript text/javascript text/plain application/json application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/xml font/eot font/opentype font/otf image/svg+xml ;

#end gzip configuration

저장하고 nginx가 제대로 작동하는 지 테스트 한 후 문제가 없다면 nginx를 재 가동시킵니다.

nginx -t
service nginx reload

10$ 제휴 프로모션으로 Vultr 가입하기