RSS구독하기:SUBSCRIBE TO RSS FEED
즐겨찾기추가:ADD FAVORITE
글쓰기:POST
관리자:ADMINISTRATOR

컴퓨터를 사용하는 사람이라면 1GB(1,024MB)짜리 1개를 처리하는 속도가 더 빠를까 아니면 1MB짜리 1,024개를 처리하는게 더 빠를까 한번쯤은 다들 생각해봤을 것입니다. 용량면에서는 똑같지만 알고보면 전자가 더 빠릅니다. (0.1초의 차이로 빠른 경우가 아니라 사람이 느낄 수 있을 정도로 처리속도에서 차이가 남.) 인터넷도 마찬가지입니다.
웹을 다루는 사람이라면 고려해야 할 것이 한 두가지가 아니지만 일단은 기능면이나 디자인, 그리고 빼놓을 수 없는 속도, 대표적으로 이 3가지를 고려해야 합니다. 기능이나 디자인은 세상에서 제일 좋은데 10초이내에 로딩 안시켜주면 브라우저의 X를 과감히 누르는게 인터넷을 사용하는 우리나라 사람들이라고 하지요.

가정의 인터넷 속도는 갈수록 빨라지고 있지만 인터넷은 아직도 kb(킬로바이트) 차이가 속도를 결정 짓고 있습니다. 구글 같은 경우도 필요없는 글씨나 공백을 지워서 몇 byte라도 더 줄이려고 애쓰는 것이 바로 이것 때문이죠.

대표적으로 php를 사용하는 웹에서는 문서가 늦게 뜨지 않도록, 속도가 빠르도록 하는데에는 gzip 압축기술이 동원됩니다. (php가 아닌 다른 웹언어는 모름.) 말 그대로 압축해서 보내주는 기술입니다. 파일을 그대로 다운로드 해서 보여주느냐 아니면 압축했다가 받아서 또 압축풀고 보여주기냐 그게 그거 아니냐 하겠지만 확실하게 후자가 더 빠릅니다. 또, 이걸 사용하는 이유는 속도 뿐만 아니라 인터넷에서 돈이 되는 데이터 전송량(트래픽)을 줄여 서버 관리자의 비용 부담을 줄일 수도 있기 때문입니다.

php의 경우 gzip는 문서를 약 70~80%까지의 압축률을 보여주는데 간단하게 문서의 상단에 <? ob_start("ob_gzhandler"); ?>라고만 넣어주면 gzip로 40kb짜리 문서를 평균 8kb로 압축을 해서 전송해주는데 이는 가장 보편화된 방법이니 여기서는 설명하지 않겠습니다.
그런데 문제는 웹문서를 꾸며주는데 사용되는 CSS나 추가적으로 멋진 기능을 사용할 수 있도록 해주는 Javascript도 *.css나 *.js 형태의 파일로 저장시켜서 로딩해오는데 CSS나 Javascript는 php 파일이 아니라서 ob_start를 사용할 수가 없습니다. 그래서 다른 방법을 이용해야 합니다. 오늘 소개할 것이 바로 이 Minify입니다.

Minify 설치
Minify는 php버전이 5.2.1이상, zlib extension이 설치가 설치되어 있어야 사용 가능합니다.
일단 Minify 배포주소( http://code.google.com/p/minify/ )로 가서 Minify_2.1.3.zip 파일을 다운로드 받습니다. Minify_2.1.3.zip 파일의 압축을 풀면 /min 이라는 폴더와 /min_test_units라는 폴더가 있는데 /min 폴더만 계정의 /public_html 최상위 루트에 업로드 합니다. (min_test_units 폴더는 필요 없습니다.)
다음으로 /min 폴더의 config.php라는 파일을 열어 $min_cachepath 라는 변수에 $min_cachepath = './캐쉬폴더명'; 형식으로 수정해줍니다. ex) $min_cachepath = './cache';
이렇게 config.php 파일을 수정했으면 계정의 /min 폴더안에 $min_cachepath에서 지정한 폴더를 만들어주고(/min/폴더명) 그 폴더를 퍼미션 권한을 707로 줍니다. 이것으로 설치는 일단 끝입니다.

Minify 사용
Minify의 원리는 일단 css나 js파일이 계정의 어느 곳인가 있다고 할 때, 원래 주소로는 압축되지 않은 css, js파일을 전송해주고 /min/index.php?f=파일명.css 같은 주소로는 압축된 형태로 불러올 수 있도록 해줍니다. 웹문서에서 압축시켜 전송하고 싶은 css나 js 파일을 불러오는 부분을 저렇게 고쳐주면 되겠습니다.
그러나 꼭 이렇게 할 필요 없이 계정에서 mode_rewrite를 지원하는 경우 루트의 .htaccess 파일에 아래와 같은 문구를 추가로 넣어주면 웹문서를 일일히 수정하지 않아도 자동으로 계정의 모든 css, js파일을 압축형태로 전송할 수 있습니다.
(확장자가 css 또는 js일 경우 자동으로 min/index.php?f=css,js 주소로 바꿔서 전송한다는 의미.)

RewriteEngine On
RewriteRule ^(.*\.(css|js))$ /min/index.php?f=$1 [L]

그러나 만약 웹문서 말고 텍스트큐브나 기타 여타 자체적인 rewrite를 사용하고 있는 하위 폴더에서는 /public_html의 .htaccess 파일에 저 문구를 넣어도 하위 폴더에서는 작동하지 않을 수 있습니다.
(만약 계정이 /public_html인데 텍스트큐브는 /public_html/tc에 설치 되어 있을 경우 /tc에서는 자동으로 압축전송이 되지 않습니다.)
그럴 경우에는 tc폴더의 .htaccess 파일에 아래와 같이 넣어주세요.

RewriteEngine On
RewriteRule ^(.*\.(css|js))$ ../min/index.php?f=tc/$1 [L]

위와 같이 넣으면 별도 수정이 필요없이 압축전송을 시작하게 됩니다.

Minify는 압축전송뿐만 아니라 파일을 통합시켜 전송하는 기능도 지원합니다. 예를 들어 /min/index.php?f=a.css,b.css 라고 입력할 경우 a.css와 b.css 파일을 합쳐서 보여준다는 의미입니다. 이는 웹문서 제작시 문서에서 불러오는 개체의 수를 줄여야 속도 향상을 꽤할 수 있다는 점에서 아주 유용한 기능이므로 사용에 참고하시기 바랍니다.

resize_image

Minify 작동여부 확인
압축 전송이 되는지 안되는지 확인은 다음 사이트에서 확인하면 됩니다.
HTTP Compression Test : 이곳에서 테스트를 해보면 호쯔넷 블로그의 메인페이지는 원래 파일의 크기가 40~41kb하는데 압축되어 대략 8~9kb로 전송이 되고 있습니다. (다만, 주의하실 점은 HTTP Compression Test 사이트는 익스플로러에서 정상적으로 작동이 안되므로 파이어폭스나 구글 크로 등 기타 웹브라우저를 사용하여 확인하시기 바랍니다.)
Site-perf.com : 이곳에서는 웹페이지에서 어떤 파일이 어떤 형태로, 로딩 시간이 얼마나 걸리는지를 보여줍니다. 물론 일반 웹문서나 css, js 파일이 얼마나 압축되어 전송되는지도 확인이 가능합니다. (왼쪽의 스크린샷이 그 결과물입니다.)

이 글은 Minify로 CSS/자바스크립트 전송량 줄이기 :: 팥빙산의 글걸이(http://pat.bingsan.net/657)를 보고 사용해 본 뒤 쓴 글입니다.
기타 문의사항 있으면 댓글로 달아주시기 바랍니다. 확인하는대로 답변 드리겠습니다.

"프로그램(컴)" 카테고리의 다른 글
2008/07/28
2007/12/30
2008/01/02
2010/02/09
2008/08/14
2008/01/23
2010/02/09 15:32 2010/02/09 15:32
http://www.hozz.net/tc/trackback/167
from.팥빙산의 글걸이  2010/02/16 14:53
HTML에 들어가는 외부 CSS(Cascading Style Sheet) 및 자바스크립트(JAVAScript, 약칭 JS)는 수가 많고 용량이 클수록 문서가 늦게 뜨는 원인이 된다. 그러므로 누리집(사이트)이 조금이라도 빠르게 뜨게 하려면 이들을 통합하고 압축하여 전송량(트래픽)을 줄여야 한다. JSMin, YUI Compressor, Creativyst® CSS & JavaScript Compressor 등은 문법이 어긋나지 않는 범위에서...
from.HOZZ.NET  2010/03/05 14:48
이전에 작성한 포스팅(Minify로 CSS, Javascript 압축[gzip] 전송하기)에 이어 웹 페이지 로딩 속도 최적화를 위한 또 다른 방법인 CSS Sprite 사용법을 포스팅하겠습니다. gzip가 웹 문서를 압축해서 전송하는 방법이었다면 CSS Sprite는 HTTP Request를 줄이는 방법의 일환으로 속도 향상의 효과가 아주 뛰어납니다. 웹 문서를 열 때 사용하기 위한 A라는 웹 브라우저가 있다면 이 A브라우저는 동시에 다운로드 할...
SCAC:Aren't I a clever boy?
Aren't I a clever boy?
전체 (153)
이야기 (65)
도움이 되는 글 (19)
취미 (27)
게임&컴퓨터&TV (29)
사진&그림 (2)
엽기 (11)
«   2012/02   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      
Valid XHTML 1.0 Strict Valid CSS!
count total 742515, today 22, yesterday 440