nginx 서버에서 gzip 을 사용하여 전송속도를 향상시키기

HYEONG HWAN, MUN/ 7월 15, 2017/ 미분류/ 2 comments

이 글을 통해 nginx 웹서버에서 gzip 이라는 압축전송을 통해 전송속도 향상시키는 방법에 대해 알아보도록 하겠습니다.

 

일반적으로 웹 페이지는 다음과 같은 과정으로 표시됩니다.

(서버에서) 코드 생성 -> 전송 -> (웹브라우저가) 코드 표시

 

블로그의 이 글을 Chrome 브라우저에서 -> 오른쪽 클릭 -> 검사 -> Network 탭 -> Doc 필터 -> 본문 선택 -> Timing 선택 하시면 다음과 같은 화면을 볼 수 있습니다.

웹브라우저 코드 표시는 편의상 0초가 걸린다고 하겠습니다. 대부분의 정상적인 상황이라면 전송 받자마자 표시되는게 맞습니다.

 

 

이 때 gzip 이라는 압축 후 전송을 사용하면

(서버에서) 코드 생성 -> 코드 압축 -> 전송 -> (웹브라우저가) 코드 압축해제 -> (웹브라우저가) 코드 표시

웹 브라우저가 하는 쪽은 0초가 걸린다고 가정합니다. 만약 문제가 있다면 HTML 문서를 최적화 하도록 합시다.

 


 

실제 적용 예시 : 이 블로그 글에 대해서 압축을 끄고 측정, 압축을 켜고 측정

< 그림 : gzip 압축을 끄고 측정 >

 

< 그림 : gzip 압축을 켜고 측정 >

 

직관적으로 이해가 가시나요?

gzip 압축을 사용하지 않으면 서버가 더 빠르게 반응합니다.

gzip 압축을 사용하면 문서 데이터를 받는데 시간이 덜 걸립니다.

 


제가 몇가지 테스트를 하였고 그 결과를 알려드리겠습니다.

- 이럴 때 gzip 을 사용하지 마세요.

*사이트의 방문자가 많지 않음. 일간 페이지뷰(page hit)가 5000이하.
*서버가 저사양임. (1코어 1GB 같은)
*타겟 대상자가 동일 지역일 때. (서버가 한국에 있고, 방문자도 한국에 있을때)

즉 전송속도가 > 압축속도보다 이득일 때에는 사용하지 않는게 좋습니다. (한국같은 곳)

 

- 이럴 때 gzip 을 사용하세요.

*사이트 방문자가 많음. 트래픽 절감 효과가 있습니다. (서버 사양도 좋아야 합니다.)
*서버가 고사양임. (서버가 충분히 좋음. SSD 서버일 경우 사용하세요.)
*타겟 대상자가 다른 지역일 때. (서버가 일본에 있고, 방문자는 한국에 있을때)

즉 압축속도가 > 전송속도보다 이득일 때에는 사용하는 것이 좋습니다.

 

대부분의 경우 체감속도 차이가 크지 않으므로 잘 모르겠으면 gzip 을 사용하는 것이 좋습니다.

 


 

적용 방법.

 

1) nginx 환경설정 파일 열기

#vi /etc/nginx/nginx.conf

 

다음 내용을 그림과 같이 추가합니다.


gzip on;
gzip_min_length 10240;
gzip_buffers 32 32k;
gzip_comp_level 9;
gzip_types text/plain application/x-javascript text/xml text/css application/json;
gzip_vary on;
# end gzip configuration

 

 

2) 설정 적용

#service nginx reload

 

 

 

gzip 을 켜거나 꺼보면서 테스트 해보세요.

체감 속도가 더 빠른게 좋습니다. 만약 체감 속도가 별로 차이가 나지 않는다면 gzip 을 켜는 것을 권장합니다.

 

2 Comments

  1. 오랜만에 좋은 포스트 감사합니다.
    맨 마지막줄에
    체감속도가 차이가 안나면 gzip를 켜두는게 맞나요?

    굳이 차이를 못느끼면 off 하는게 맞지않나요?

    그리고 nginx.conf 파일에 수정하면 전체적용될거같은데
    vhost 단에서 설정도 가능할까요??

    1. gzip 구문은 server 나 location 구문 안에서 사용할 수 있습니다. 따라서 가능합니다.
      체감속도 차이가 없으면 전송량이 작을수록 좋습니다. 트래픽 비용을 절약하고, 모바일 사용자를 배려하는 것이죠.

Leave a Comment

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*