Minify와 Gzip이 페이지 로딩시간(PLT)에 미치는 영향

카테고리 FE Development | 작성일

안녕하세요 NTS 최인숙입니다. 

 

서버 환경과 Network Protocol을 막론하고 packet의 사이즈가 작으면 페이지 로딩시간(Page Loading Time) 이 빨라진다는 것은 기본적인 사실이죠? 또 데이터사용이 직접적으로 비용으로 연결되는 모바일 환경에서는 packet 사이즈를 최적화 하는것이 무엇보다도 중요한 일이라고 할 수 있겠습니다. 

Minify, gzip하면 오래된 얘기를 굳이 꺼내느냐고 하시는 분들이 계실텐데요, 요즘에 최적화에 대한 자료들을 보면서 최적화가 잘 되어있는 사이트부터 잘 되어있지 않은 여러가지 사이트들을 접하게 되는데 아쉽게도 이미지 최적화도 뿐만 아니라 Gzip이나 minify등과 같이 간단하고도 효율적인 최적화조차도 되어 있지 않은 웹싸이트들을 어렵지 않케 볼 수 있었습니다.  

안타까운 마음에 gzip과 minify의 효과가 어느정도인지 보여드릴수 있는 실험한 결과를 살펴보도록 하겠습니다. 소소한 차이라고 생각하고 혹시 무시하고 계셨다면 이 글이 그 차이에 대한 이해를 돕는데 일조할 수 있을거라는 생각이 듭니다. 

 

일단 minify와 gzip이라는 용어가 낯선 분들을 위해 간단히 용어를 설명드리고 시작하겠습니다. 

Minify라는 기술은 파일의 용량(byte size)을 줄이기 위해서 CSS와 JavaScript의 불필요한 white space를 아래의 예와 같이 제거하는 작업입니다.  불필요한 byte size를 줄이고 필요한 정보만 한줄에 보내기 때문에 traffic 사이즈가 상당부분 줄어들게 됩니다. 이렇게 된 파일들은 읽기가 힘들다는 점을 생각하시는 분들이 계실텐데요 클라이언트 쪽에 beautify 시키는 툴들이 많이 있으므로 걱정하지 않으셔도 될 것 같습니다. 

 

(before minifying)

#topnav 

float: right

clear: both

list-style: none

margin-top: 18px;  

}

 

(after minifying)

#topnav{float:right;clear: both;list-style:none;margin-top:18px}

 

Gzip은 파일의 압축과 압축풀기에 사용되는 응용 소프트웨어 이며 대부분의 모던 브라우저에서 지원되고 있기 때문에 서버쪽에서 기능추가를 했을 경우 쉽게 압축된 파일을 보내고 풀고 할 수 있게 됩니다. 

브라우저에서 사용되는 encoding의 종류는 Accept-Encoding이라는 Request Header의 attribute를 통해서 서버쪽에 알려지며 서버쪽에서는 이 Accept-Encoding의 값을 보고 브라우저에서 decoding이 가능한 압축 파일을 보내게 되는 것입니다. 서버쪽에서 어떤 encoding을 사용했는지는 Content-Encoding이라는 Response-Header를 통해서 알 수 있습니다.  (아래 Header 이미지 참조)

 

그럼 같이 실험 결과를 살펴보도록 하겠습니다. 일단 실험을 위해서 서버에 간단한 사이트를 구축하고 몇개의 Javascript과 CSS을 다운받게 html파일을 작성했습니다.  

테스트는 환경에 따라서 페이지 로딩시간의 차이는 분명 있을 것이라고 생각하지만 이 글은 minify와 gzip이라는 효과를 보여드리고자 하는데 촛점을 맞추고 있기 때문에 최적화 전과 후의 다른점에 대해 중점을 두고 읽어 주셨으면 합니다. 

 

테스트 환경은 다음과 같습니다. 

서버: Apache Server 2.2.22

브라우저: FireFox 19.0.2

테스트 툴: Firebug 1.11.2

 

1. HTML 

다음의 이미지는 Html 텍스트가 Gzip처리되지 않고 보내졌을 때와 Gzip처리되어 보내진 Html문서의 Response Header를 각각 보여주고 있습니다.  

 




Server 환경에서 mod_deflate를 이용하여 Gzip을 활성화 한 후에 다운로드되는 html 파일의 사이즈 변화를 살펴봤을때 129KB에 가까운 파일 사이즈가 26KB로 80%가까이 줄었습니다. 100KB.. 뭐 별거 아니라고 생각하시고 계실수도 있죠.. 파일 하나 한번 받는 정도는 괜찮다라고 넘기실수 있습니다. 그럼 다른 text파일들을 살펴보도록 하겠습니다. 


2. CSS


CSS의 경우 파일들을 합쳐서 Request의 수를 줄이는 방법은 사용하지 않고 단순히 minify와 gzip만을 사용하여 파일사이즈를 줄였을 경우 어느정도의 사이즈 변화가 있고 또 페이지 로딩 시간(PLT)에  어느정도 영향을 미치는지 실험해 보았습니다. 

첫번째로는 아무런 최적화도 되어있지 않은 상태일때 다운로드 사이즈를 측정한 것이고 두번째 이미지는 minify만 적용했을 경우, 세번째 이미지는 minify하지 않은 파일들을 gzip처리만 했을 경우 네번째로는 minify와 gzip을 모두 적용한 경우의 다운로드 사이즈를 나타낸 것 입니다. 

 


 


 


 


 

아무런 최적화도 외어 있지 않을 때와 (360.3KB) minify와 gzip처리 모두 적용된 경우(49.3KB)의 사이즈 차이가 보이시나요? 그리고 각각의 파일들이 다운되고 있는 속도의 차이도 확연히 보여지고 있습니다. 파일사이즈의 차이가 미묘하다고 하면 네트워크의 상태나 메모리의 차이 또 다른 변수들에 의해 다운로드 되는 속도의 차이가 거의 나타나지 않을 수 있지만 보여진 것과 같이 간단한 최적화 만으로도 파일사이즈의 큰변화가 생기고 또 그로인해 궁극적으로 목표하는 페이지 로딩시간의 급격한 변화를 관찰할 수 있었습니다. 

표로 간단히 정리해 보면 다음과 같습니다. 

 

최적화 적용 내용

 No Minify, No Gzip

Minify Only 

Gzip only 

Minify && Gzip 

전체 사이즈 (KB)

360.3KB 

314KB  (약 13% 감소)

57.9KB (약 84% 감소)

49.3KB(약 87% 감소) 

 

3. JavaScript

 

JavaScript의 경우는 대부분의 모던 웹사이트를 구성하는 요소중에서 이미지 다음으로 페이지 로딩시간에 기여(?)하는 부분이 큰 리소스입니다. 

다음에 보여지는 이미지는 실제로 현재 많은 사용자들이 방문하고 있는 한 국내 상업 사이트의 파일들을 그대로 이용하여 실험한 결과들인데 이 사이트의 경우 기본적인 최적화가 설정되어 있지 않아 페이지 로딩시간이 오래 걸리며 Javascript 파일만 따로 보았을때도 전체 사이즈가 701KB나 되는 것을 볼 수 있었습니다. 참고로 HttpArchive.org에 나와있는 자료를 보면 전세계 상위 1000개의 사이트들의 평균 페이지의 사이즈가 1.2MB에서 1.4MB며 JavaScript가 차지하는 부분은 200KB정도로 나타나고 있습니다.

그럼 701KB되는 JavaScript의 전체 사이즈가 얼마나 쉽게 줄여지고 또 다운로드에 미치는 영향이 얼마나 되는지 실험한 결과를 보여드리겠습니다. 

 


최적화 되지 않은 파일들의 전체 사이즈와 다운로드 속도를 나타내는 이미지 입니다. 

 


간단한 수작업으로 minify만 적용한 후 파일들이 다운되는 상황입니다. 사이즈의 50%이상이 감소하고 다운되는 시간이 축소되는걸 볼 수가 있습니다. 

 


이번에는 서버쪽 설정(mod_deflate)을 통해 Gzip만 적용했을 경우 입니다. 70%이상의 사이즈가 감소 하였고 다운로드 속도의 확연한 변화도 볼 수 있습니다.



Minify, Gzip 두가지를 다 적용했을 경우입니다. 사이즈의 변화가 보이시나요? 701.9 --> 94.3으로 줄었습니다. 보기 쉽게 표로 나타내 보면 다음과 같습니다. 


 

 최적화 적용 내용

 No Minify, No Gzip

Minify Only 

Gzip only 

Minify && Gzip 

 전체 사이즈 (KB)

701.9KB 

339.5KB  (약 52% 감소)

184.6KB (약 74% 감소)

94.3KB(약 87% 감소) 

 

이번 실험을 통해서 html, CSS 그리고 JavaScript등 텍스트 형태의 파일을 gzip과 minify를 적용했을때 1.2MB였던 전체 파일 사이즈(html+CSS+JavaScript)가 170KB로 85%이상 감소하는 결과를 볼 수 있었습니다. Minify의 경우 때에따라 약간의 수작업이 필요 할 수 있지만 (예를 들어 파일 업데이트를 할 경우) gzip의 경우는 서버쪽에서 해결할 수 있는 너무나도 간단한 일이며 사이즈의 변화 또 그러므로 생기는 페이지 로딩타임의 변화에 큰 영향을 줄 수 있으므로 무시해서는 안되겠습니다. 

 

간단한 얘기를 너무 장황하게 늘어놓은거 같네요.. 

다음에 또 좋은 내용으로 찾아뵙겠습니다.  

 

 

작성자NTS 접근성팀 최인숙
프로필 사진
안녕하세요, 최인숙입니다.
태그
Trackbacks 10480
엮인글 주소 http://html.nhncorp.com/1132468/trackback