웹마스터 팁

제로보드 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의 개수가 많으면 사이트가 느려지기 때문에 한개의 파일로 만들어서 전송하는 추세인데.. 사용하실 분은 코어를 수정해야 할 것 같아서 추천드리진 않습니당;




gzip.JPG
common/js/common.js의 파일은 원래 19.4KB였는데
적용한 뒤에  6.34kb로 압축하여 전송하는 것을 볼 수 있습니다.

사용할때마다 압축을 해서 전송해주는게 아니라 cache를 만들어서 보내기 때문에 서버에 부담도 적습니다 :)
파일이 바뀌면 cache도 다시 생성되구요.

제목 글쓴이 날짜
XE를 처음 설치하면 기본적으로 필요한 자료들 - 초보자용 V2013-05-20 [11] Treasurej 2012.03.26
알림센터 사용환경 수집 무력화하기 [19] CMD 2013.05.10
XE 1.5 관리자 첫화면에 1.4 통계현황 추가하는 방법입니다. [21] file sejin7940 2012.09.14
너도나도 다 아는 팁... 한/영키 안먹힐때 [15] 오델라가루 2010.02.02
자료실에 있는 LNB메뉴 위젯 사용 시 참고 사항 퍼니엑스이 2013.05.19
출석부 스킨에서 개근 표시하기 [소시랑 출석부기준] [25] 10000kg 2012.12.09
XE Board 2007 스킨에서 Table 속성을 W3C 표준에 맞추기. [3] Paul 2013.05.17
어드민이 미쳐날뛰고 있습니다. (파비콘(favicon) 16px 이상의 ico적용했을때 admin 바가 미쳐날뜁니다.) file 장포크 2013.05.16
XE 1.7.3.0 default 스킨 IE9 드롭다운메뉴 안보이는 현상 [4] 장포크 2013.05.13
위젯 페이지 또는 메인 페이지에서 게시판 첨부파일 바로 다운로드 할 수 있도록 만들기 최르토스 2013.05.10
XE로 접속 장치 구분하기 (모바일, PC + 타블렛 PC) mobile class 이용. (PHP) (수정: 템플릿 추가) [19] misol 2012.06.24
APM에서 XE 설치시 깨짐현상 발생될때... file 비밀M 2013.05.14
파일박스 사용에 관하여 [2] wooildang 2013.04.26
이미지 리사이즈 적용이 안되는 경우 [4] 아고라 2009.06.30
[수정] CSS, JS 파일 gzip로 한꺼번에 압축해서 전송하기 [20] file SCAC 2011.09.02
모바일에서 댓글 자동 펼치기 (스킨:스케치북5모바일) [2] 준스타일 2013.05.03
array 함수와 in_array함수 이용한 시간 체크 똑디 2013.05.03
상담용 게시판 - 확장 변수 이용 [4] file 어라얼랑 2012.06.23
XE를 위한 DEBUG 이야기 [5] 우진홈 2013.04.30
xe 속도 엄청 빨라집니다. [4] 투투투쓰리 2013.03.12