웹 서비스 성능 개선 - 텍스트 리소스 압축(gzip) 전송

 

웹 사이트도 보여주기 위해서는 화면 구성에 필요한 정보를 네트워크를 통한 다운로드 한 다음, 웹 브라우저로 보여주기 때문에 화면엘 구성하는 파일의 수, 파일의 크기에 따라 걸리시는 시간이 달라집니다.

파일의 수는 적을수록, 파일 당 크기는 작을수록 좋습니다.​
파일의 크기를 작게 하기 위해서 파일을 압축하여 전달하도록 설정하는 방법입니다.

웹 브라우저는 압축(gzip)을 풀 수 있는 기능이 포함되어 있기 때문에 텍스트로 구성된 파일을 웹 서버에서 압축 전달할 경우 다운로드 속도가 빨라집니다.

브라우저 별 GZIP 지원 현황​

GZIP 압축 전송 설정 전/후 성능 비교

• 다운로드 시간

​기존 12MB 다운로드되던 파일이 설정한 다음 3.5MB로 압축되었으며, 그 결과 다운로드 시간이 줄어들어 최종 걸린 시간이 7.5초에서 4.5초로 변경되었습니다.

• requests: 총 요청 건수
• transferred: 총 다운로드 용량(물리적)
• resources: 실제 리소스 용량
• Finish: 총 소요 시간(sec)
• DOMContentLoaded: 화면 표시에 걸린 시간(sec)
• Load: 화면 그리기 전 준비 시간(리소스 다운로드)
  ​
• 파일 용량

• 변경 전/후 수치 비교

​

항목	변경 전	변경 후	감소율
데이터 전송 용량(mb)	12.5	3.5	72%
총 소요시간(sec)	7.53	4.55	40%
화면 갱신 시간(sec)	5.35	2.10	61%
준비 시간(sec)	6.91	3.61	48%

 

Apache Httpd gzip 압축 설정

• Apache httpd.conf 파일 수정

mod_deflate는 주석 해제

# 주석 해제
LoadModule deflate_module modules/mod_deflate.so # gzip

<Location />
  SetOutputFilter DEFLATE

  # 오래된 브라우저는 압축 적용 안하기
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  # 압축 제외대상(이미지, 압축파일) 지정
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|bmp|zip|t?gz|7z)$ no-gzip dont-vary
  Header append Vary User-Agent env=!dont-vary
</Location>

Tomcat gzip 압축 설정

​Tomcat conf/server.xml 파일 수정

# 설정 전
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

# 설정 후
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"
    compressibleMimeType="text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json,application/xm" 
    compression="on" 
    compressionMinSize="2048" 
/>

• compressibleMimeType: TTP 압축이 사용될 수 있는 MIME 유형
• compression: gzip 압축 여부
• compressionMinSize: 압축할 최소 파일 크기(byte)

참고

• https://caniuse.com/?search=gzip
• https://httpd.apache.org/docs/current/mod/mod_deflate.html
• https://tomcat.apache.org/tomcat-8.5-doc/config/http.html