Minify로 CSS/자바스크립트 전송량 줄이기

HTML에 들어가는 외부 CSS(Cascading Style Sheet) 및 자바스크립트(JAVAScript, 약칭 JS)는 수가 많고 용량이 클수록 문서가 늦게 뜨는 원인이 된다. 그러므로 누리집(사이트)이 조금이라도 빠르게 뜨게 하려면 이들을 통합하고 압축하여 전송량(트래픽)을 줄여야 한다.

JSMin, YUI Compressor, Creativyst^®CSS & JavaScript Compressor 등은 문법이 어긋나지 않는 범위에서 아래와 같이 CSS와 JS의 쓸모 없는 문자를 없앤다.

@charset "utf-8";
* {
 margin: 0;
 padding: 0;
}

html {
 background-color: #a8a8a8;
}

body {
 background: url('./images/bg_bodyTop.gif') 50% top repeat-x;
 color: #666;
 font: 1.2em/1.7 Helvetica, AppleGothic, Gulim, '굴림', sans-serif;
 font-size: 75%;
 padding-top: 30px;
}

↓

@charset "utf-8";*{margin:0;padding:0}html{background-color:#a8a8a8}body{background:url('/images/bg_bodyTop.gif') 50% top repeat-x;color:#666;font:1.2em/1.7 Helvetica,AppleGothic,Gulim,'굴림',sans-serif;font-size:75%;padding-top:30px}

또다른 방법으로 GZip 압축이 있다. CSS와 JS는 글(텍스트) 위주여서 GZip 압축만으로도 70~80%에 이르는 전송량을 줄일 수 있다. 두 방식을 함께 쓰면 차이는 크지 않더라도 전송량이 좀 더 줄일 수 있다.

두 압축 방식 모두 원본을 가공하는 과정을 거치므로, 자주 갱신되는 파일은 수동으로 관리하기가 보통 일이 아니다. 누리집의 규모가 크고 작음을 떠나 자동 도구의 도움을 받는 편이 여러 모로 편리하다.

워드프레스에서는 JS/CSS를 GZip로 압축전송하는 도구로 WP Super Cache를 꼽을 수 있다. XpressEngine(제로보드 XE)은 내부에서 쓰는 CSS, JS를 자체에서 ?.css.php와 ?.js.php로 묶어 GZip로 전송하는데, 다른 외부 파일은 그대로 전송한다.

반면에 텍스트큐브는 이런 기능이 아예 없다. 도아님의 압축전송 플러그인으로 HTML은 압축할 수 있지만, CSS와 JS는 압축하지 못한다. 텍스트큐브는 다른 블로그 틀보다 기본 전송량이 많아서 압축전송 기능이 없는 게 매우 아쉬웠다.

다행히 누리집 또는 블로그 틀에 얽매이지 않고 계정에 설치해 쓰는 압축전송 도구들이 몇 있다. 여기에서 소개할 Minify는 JSMin 등 여러 압축기를 내장하고, GZip 압축전송도 지원한다. Minify는 압축전송에 관한 종합판이라 해야 할 만큼 부가 기능을 많이 담고 있다.

Minify 설치

Minify는 mod_rewrite와 PHP 5.2.1 이상을 지원하는 계정에서 쓸 수 있다.(PHP 4를 지원하는 판은 따로 있다.) .htaccess 파일과 Minify 안에 포함된 config.php 파일을 조금 손보아야 한다.

먼저 http://code.google.com/p/minify에서 ZIP 형식으로 묶인 Minify를 받는다. 파일 안에는 /min 과 /min_test_units가 들어 있는데, 압축 전송에 필요한 파일은 /min에 있고 /min_test_units은 작동 상황을 시험하기 위한 것이다. 압축을 풀어서 /min을 되도록 누리집의 뿌리 경로(public_html) CSS와 JS의 경로를 좌우하는 .htaccess의 경로 안에 올린다. (.htaccess가 없었다면 뒤 과정에서 만듦)

그리고 /min/config.php의 매개변수를 손수 고쳐서 올린다.

Minify는 압축했던 파일을 저장했다가 다시 쓰는 시렁(캐시) 기능이 있다. $min_cachePath에 시렁 경로를 넣으면 기능이 작동한다. 가령 /min/cache를 시렁 경로로 쓰려면, /min/cache를 방을 만들고 다음처럼 값을 넣는다.

$min_cachePath = './cache';

$min_documentRoot에는 계정 기본 주소의 절대경로를 넣는 곳이다. /min이 public_html의 바로 밑에 올 때는 값을 지정하지 않아도 알아서 처리한다. 서브도메인 정책 등으로 /min이 public_html 바로 밑에 올 수 없을 때는 주석문으로 되어 있는 다음 값으로 바꿔 준다.

$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);

그리고 계정 뿌리 경로 CSS와 JS 경로를 좌우하는 .htaccess에 다음 내용을 끼워 넣는다. 첫 문장은 .htaccess에 이미 들어 있으면 무시해도 된다.

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

압축전송 확인

웹에서는 HTTP Compression Test에서 압축 상황을 확인할 수 있다. 아래에 시험한 test.css는 실제 용량이 26.2KB인데, JSMin으로 먼저 처리되어 18.9KB로 줄었다. 오른쪽에서 test2.css는 test.css와 같은 파일이다. Minify는 ~.net/aaa.css,bbb.css처럼 쉼표로 파일들을 열거하면 파일들을 병합하여 전송한다. 내용이 같은 파일을 합쳤으므로 GZip로 압축된 전송량(오른쪽)은 단일 파일을 압축한 전송한 것(왼쪽)과 비슷하다..

단일 CSS 전송

통합 CSS 전송

파이어폭스(FireFox)에서는 부가 기능으로 설치하는 YSlow로 전송 상황을 확인할 수 있다. (YSlow는 Firebug 안에서 돌아가므로 Firebug를 먼저 설치해야 쓸 수 있다.) 아래는 이 블로그의 전송량을 YSlow로 본 화면이다. SIZE(KB)에 나온 수치는 JSMin으로 먼저 처리된 용량이다. Minify를 막 설치하고 나서는 파이어폭스의 시렁(캐시)에 옛 파일들이 남아서 압축되지 않는 것으로 나올 수 있으므로, 도구→설정→고급→네트워크에서 '오프라인 보관소'를 비우고 확인해야 정확하다.