웹마스터 팁
[수정] CSS, JS 파일 gzip로 한꺼번에 압축해서 전송하기
2011.09.02 15:57
제로보드 xe의 일반적인 페이지(게시판 등등)들은 모두 gzip로 압축되어 있는데..
정작 더 신경써야할 css, js 파일들은 gzip가 적용이 안된상태로 쌩(?)으로 날리고 있더라구요..
css 파일들은 대게 5~10kb
js 파일들은 크면 40kb까지도 차지하는.. 따지고 보면 대용량인 파일들인데 그냥 날리기에는 트래픽이 아깝습니다.
물론 트래픽 뿐만 아니라 속도면에서도 체감할 수 잇을정도로 차이가 생기게 되죠.
gzip는 웹문서를 gzip로 압축해서 전송한 뒤에 클라이언트의 브라우저에서 압축을 풀어 웹페이지를 보여주는 방식입니다.
일반적으로 40kb짜리의 문서를 전송한다고 할 때 그냥 전송하면 트래픽을 40kb 까먹지만..
gzip로 전송할 경우 속도도 좀 빨라질뿐더러 좋은 압축률(60%~80%)을 자랑해서 40kb짜리를 8kb로 만들어서 보냅니다. 당연히 트래픽은 8kb만 까먹겠죠.
특히나 xe는 css, js 파일이 많던데..
일단
http://code.google.com/p/minify/
에 가셔서 minify 2.1.3을 다운받습니다. (베타가 있긴한데 중단된듯)
실행을 해보면 다른건 다 필요없고 min 폴더만 필요합니다.
min폴더의 config.php을 수정하면 되는데, $min_cachepath 를 찾아 캐쉬파일을 만들 폴더를 정합니다.
$min_cachepath = './cache' 로 하면 쉽겠죠.
업로드는 루트에 합니다.
ex) 제로보드가 public_html/xe/에 설치되어 있다고 가정할 때,,, public_html/min/
업로드 한 뒤에 min/cache/ 폴더를 만들어 퍼미션을 707로 줍니다.
xe폴더의 .htaccess를 열어.
Rewrite Engine On 밑에
RewriteRule ^(.*\.(css|js))$ ../min/index.php?f=xe/$1 [L]
위와 같은 한줄을 삽입해줍니다
죄송합니다;;;
.htaccess를 열어서 RewriteEngine On 밑에 바로 삽입하면 주소/xe/모듈명/게시글번호
일 경우 css를 제대로 못불러와 에러(레이아웃이 깨짐)가 나네요;; .htaccess 맨 마지막에
RewriteRule ^(.*\.(css|js))$ ../min/index.php?f=xe/$1 [L]
삽입해주시면 감사하겠습니다.
그러면 이제부터 xe폴더내의 모든 css, js 파일들은 gzip로 압축해서 전송을 시작합니다.
gzip로 정상적으로 압축되어 전송되는지는
http://www.whatsmyip.org/http_compression/ http://site-perf.com/
에서 주소를 삽입해서 압축률을 확인할 수 있습니다.
다른분 사이트에 모듈을 수정해드리다가 트래픽이 너무 많이 먹길래 왜그러나 해서...
제가 XE를 사용하는게 아니라서...
루트에 XE폴더를 따로 만들지 않고.. 직접 풀어서 사용하시는 분들은 제가 어떻게 적용하는지는 잘 모르겠습니다.
RewriteRule ^(.*\.(css|js))$ /min/index.php?f=$1 [L]
라고 하면 되 것 같기도 한데....
ps. minify는 여러개의 css... 여러개의 js를 한꺼번에 모아서 전송하는 기능도 가지고 있습니다.
호출하는 css개수, js의 개수가 많으면 사이트가 느려지기 때문에 한개의 파일로 만들어서 전송하는 추세인데.. 사용하실 분은 코어를 수정해야 할 것 같아서 추천드리진 않습니당;
common/js/common.js의 파일은 원래 19.4KB였는데
적용한 뒤에 6.34kb로 압축하여 전송하는 것을 볼 수 있습니다.
사용할때마다 압축을 해서 전송해주는게 아니라 cache를 만들어서 보내기 때문에 서버에 부담도 적습니다 :)
파일이 바뀌면 cache도 다시 생성되구요.
댓글 20
-
엄마네과일가게
2011.09.02 16:13
-
SCAC
2011.09.02 16:33
css건 js건 원래는 텍스트 파일이기 때문에.. 마찬가지이므로 여기에 빈공간이 많으면 압축률은 올라갑니다;;
cufon이 뭔진 모르겠는데.. 계정에 업로드 되어 있는 js 파일을 minify를 통해서 보내면 압축되므로 별 상관은 없을 것 같습니다. -
물비늘
2011.09.02 17:29
좋은 정보 정말 감사합니다.
며칠 전부터 minify에 대해서 풍월만 읊고 있었는데 이렇게 팁을 보니 정말 오아시스를 발견한 것 같이 기쁩니다.
SCAC님 정말 고맙습니다. ^^
제 경우는 아래와 같습니다.
Original Size: 184.64 KB
Gzipped Size: 23.4 KB
Data Savings: 87.33%
-
ezi
2011.09.02 18:45
오히려 속도가 더 느릴수도 있습니다.
서버에서 module_expires 모듈을 지원한다면 클라이언트 캐쉬를 활용하세요..
ExpiresActive On
ExpiresByType text/css A3600
ExpiresByType text/javascript A3600
ExpiresByType application/javascript A3600
ExpiresByType application/x-javascript A3600
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/bmp A2592000
ExpiresByType image/x-icon A2592000 -
SCAC
2011.09.02 19:35
손가락으로는 셀 수 없이 많은 css, js를 불러오는 xe는 다소 부담일 수도 있습니다. 본문에도 언급했지만 저와 달리 xe에 익숙하신 분들은 압축보다는 오히려 통합된 css, js 사용하시면 체감할정도로 속도 향상을 볼 수 있다고 봅니당. (브라우저당 동시 다운로드 수가 정해져 있어서 생기는 기다림을 없앨 수 있기 때문에)
minify 캐쉬 파일은 한번만 만들어지면 수정이 있기 전까지는 대부분 이미 만들어진 압축된 파일을 가지고 전송하기 때문에 속도가 떨어지는건 아주 드뭅니다.(물론, 캐쉬파일을 사용 안한다고 설정하면 트래픽에서만 효과가 있고, 속도는 글쎄요;;; 하지만 캐쉬파일 사용하면 처음 파일을 생성할때만 살짝 늦으려나? 늦었나? 하는 정도) 드물고 국제표준에 이미 많은 사이트에서 널리 사용되고 있어서 너도나도 모두 추천하는 gzip 죠. -
독도2005
2011.09.02 18:54
흐음.. 적용을 시키니 레이아웃이 깨져버리는군요.. ㅇㅅㅇ -
SCAC
2011.09.02 19:35
gzip로만 만들어서 뱉어주는 거라서 특별히 내용에는 손 안대는 건데요..
경로가 잘못된 것은 아닌지? -
독도2005
2011.09.04 18:05
경로 맞게 했습니다만... ㅇㅅㅇ -
SCAC
2011.09.05 22:31
혹시 모듈 리다이렉트 때문에 그러셨던가요?;; 그건 고쳤습니다만..
다른 원인이 있다면 제 능력밖인 것 같아요; -
ForHanbi
2012.07.27 23:28
압축해서 깨지는 경우는 js때문이 아닌가 싶은데요.
압축 안했을때는 ";"게 들어가야 할 부분에 안들어 가도 크게 문제 안되던 부분이 압축했을때 문제를 일으키는 경우가 있습니다.
-
sound4u
2013.01.24 05:31
본글에 $min_cachepath = './cache' 를 넣으라고 했는데, 정확하게는 $min_cachepath = './cache'; <- 세미콜론 을 넣어주신것을 확인해보세요.
그나 저나 tmp 폴더안에 화일이 생성이 안되는군요.. 이얘긴 작동이 안된다는 얘긴지...? 거참 모르겠네요.
-
노모모
2011.09.05 23:41
XE를 루트에 설치하신 분 중에 정상 작동하시는 분이 있나 궁금하네요.
제 경우에는 레이아웃이 깨지는군요 -
여행객
2011.09.06 00:50
웹호스팅 환경에서도 사용 가능한가요? 카페24 쓰고 있습니다.
적용해 봤는데 캐시가 생성이 안되더라구요..^^
-
SCAC
2011.09.06 11:22
$min_cachepath
앞에 // 주석 처리하는 부분을 지우셨는지 확인해주세욤. ㅎㅎ
캐쉬 폴더도 권한이 707로 설정하셔야 합니다.서버에서 mod_gzip가 설치되어 있으면 사용가능합니다. (요즘 대부분 다 설치되어 있고..)
저도 카페24에서 텍스트큐브에 적용해서 사용중입니다... ㅎㅎ -
여행객
2011.09.06 14:12
$min_cachePath 부분이 세군데 이던데 아래처럼 처리하면 되나요?
$min_cachePath = 'c:\\WINDOWS\\Temp';
$min_cachePath = './cache';
$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path()); -
여행객
2011.09.06 15:22
이제 캐시에 파일이 쌓이긴 합니다. ^^
위의 테스트 사이트에 가서 해보면 적용하기 전과 동일한 내용이 나오던데..정상인거죠?
Original Size: 225.28 KB
Gzipped Size: 27.2 KB
Data Savings: 87.93% -
똑디
2012.12.30 00:53
현재 제대로 cache 폴더에 파일이 쌓이고 있습니다.
그런데 https://developers.google.com/speed/pagespeed/insights 에서 확인해보면 아직 파일이 압축이 안되었다고 나오네요.
안된파일들이 나오더라구요.
혹시 전체 파일들을 압축해서 처리하는 팁이 있을까요?
-
한시운
2013.02.24 17:00
.htaccess 파일이 예전에는 있었는데
업데이트한후부터인지 갑자기 보이지가 않네요. 이럴경우에는 어떻게 해야하나요?
-
choco@_@
2013.05.05 21:34
nginx이실경우 rewrite 룰을 아래처럼 적용하시면 됩니다.
rewrite ^(.*\.(css|js))$ /min/index.php?f=$1; -
몽실아빠
2013.05.06 12:37
cashe 폴더에 파일이 쌓이지 않네요. 그런데 이것을 적용하던 안하던 압축이 되는 것 처럼 확인이 되는데 이유가 뭘까요 ?
코어는 1.7.3.2 입니니다.
Original Size: 155.95 KB
Compressed Size: 18.71 KB
Data Savings: 88%
테스트 해보니 저의경우는 85% 나 절약 할수 있네요.!!!
Original Size: 57.61 KB Gzipped Size: 8.45 KB Data Savings: 85.33%
혹시 cufon (폰트)을 압축하면 로딩때 문제가 있을까요?