현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기162/323다음 글 보기

추천하기
추천 횟수 :1
조회수
13,479
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

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

UI 개발

안녕하세요 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의 경우는 서버쪽에서 해결할 수 있는 너무나도 간단한 일이며 사이즈의 변화 또 그러므로 생기는 페이지 로딩타임의 변화에 큰 영향을 줄 수 있으므로 무시해서는 안되겠습니다. 

 

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

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

 

 

댓글보기

전체 댓글
14
로그인
JunHak Kim

회원 등급 : 1

좋은 글 감사합니다
Dongkyu Lee

회원 등급 : 1

Minify 같은경우에는 적용하고 싶어도 이상하게 오류 뿜어내면서 안되서 포기한 기억이 있어요.. T^T
Insook choe

회원 등급 : 1

@Dongkyu Lee헉.. 궁금해서 그러는데 혹시 어떤 종류의 에러였나요? Request Error인가요? 아니면 코드 자체가 제대로 작동을 안하는지 Js와 CSS가 충동하는 오류인지.. 나눠 주실수 있으면 리서치 하는데 도움이 될거 같아요. 감사합니다. 
Dongkyu Lee

회원 등급 : 1

@Dongkyu Lee서버오류 500 이 항상떠요... 저는 프로그래밍쪽에 무지한지라 적용을해도 구글같은데서 다른 분들이 써주신 내용 그대로 보고 적용하거든요... http://pat.im/657 여기보고 참고했구요~~ 스크립트 오류라 제가 잘못한거 같은데... 잘 모르겠어요.. PHP 환경에서 Gzip 적용할때는 잘될때도 있고 안될때도 있고..ㅠㅠ 도움이 되시려나요jQuery17102864422940183431_1365677473852 ^^;;
김덕홍

회원 등급 : 1

@Dongkyu LeeHTTP Status Code 가 500 을 내뿜는경우 실행프로그램의 문제가 아닌 서버환경에 에러가 있다는 것입니다. Rewrite module 설정에 문제가 있는거 아닌지 확인해 보시는게 좋을거 같습니다.  
김덕홍

회원 등급 : 1

@Dongkyu Leephp 환경과 gzip과는 그닥 관계가 없을거 같네요. 서버가 gzip encoding 된 응답을 클라이언트(브라우저)로 전달하는 것은 php가 아닌 웹서버가 처리해주는 것입니다. 이글에 잘나와있듯 apache server 설정을 해주거나 프로그램 언어에서 강제로 header 를 추가해주는 방법이 있는데 HTTP에 사용되는 메세지는 바이너리형태의 메세지 포멧이 아닌 일반적인 텍스트 형식으로 이루어진 녀석들이기에 프로그램 언어와는 무관한 경우죠. 전적으로 서버설정을 살펴보셔야 합니다. 
김덕홍

회원 등급 : 1

@Dongkyu Lee참고하신 링크에 나온 .htaccess 를 이용한 rewrite_module을 사용하기 위해서 설정해야하는 apache 설정인 http.conf(apache.conf)의 LoadModule 부분과 DIRECTORY 설정 부분을 살펴보셔야 할듯합니다. 
Dongkyu Lee

회원 등급 : 1

@김덕홍답변 감사합니다,^^ Gzip 적용할때에는 500오류보다 인코딩오류가 나오는데 그것도 서버관련 문제인가보군요... 참고하겠습니다! 좋은하루 보내세요~~
Insook choe

회원 등급 : 1

@Dongkyu Lee음.. php 쪽의 인코딩 오류는 딱히 서버쪽 문제라고 하기가 힘든데요.. 여러가지 경우의 수가 있는데 php 5.3.x의 경우 encoding에 대한 issue들이 좀 있었구요, 그러니 php 버전에 따른 문제일수도 있고, 또 php에서 gzip 출력을 위해 사용되는 ob_start(ob_gzhandler)라는 데서 오는 문제일수도 있고... 이리저리 파헤치다 보면 에러의 근원이 나올거에요. 도움이 좀 되겻으면 합니다. 
Dongkyu Lee

회원 등급 : 1

@Insook choe답변 감사합니다.^^
김덕홍

회원 등급 : 1

@Dongkyu LeeHTTP Status Code 5xx  가 아니라면 서버 설정 문제가 아닌거 같네요. 지극히 프로그램적인 문제일수도 있고 인코딩 오류라는게 gzip compress 에 error  가 있다는 것이라면 zlib 문제이거나 compress를 하기 위해 사용한 function 사용에 문제가 있을 것 같네요
안중희

회원 등급 : 1

Gizp은 Ecoding/Decoding 시간과 부하가 추가됩니다. 따라서 이미지 같은 압축효과가 거의 없는 컨텐츠나 Ecoding/Decoding 부하에 비해 크기가 작은 컨텐츠의 경우는 Gzip 을 사용하지 않는 것이 더 좋습니다. 즉, Gzip 은 항상 좋은 것은 아닙니다.
안중희

회원 등급 : 1

@안중희어이쿠, 등록이 안된줄 알고..여러번 눌렀더니...다 등록이 되어버렸네요. 본의 아니게 스펨 댓글이 되었습니다. 죄송. 
Nuli Nts

회원 등급 : 1

@안중희중복으로 등록 된 댓글은 삭제하였습니다^^

목록이전 글 보기162/323다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0