본문 바로가기
개발/PHP

CSS, Javascript 전송량 줄이기!! [Minify]

by 비손 2014. 7. 4.

모바일 브라우저 사용도 많이 늘어나고, 빠른 피드백이 중요시 되는 사회가 되면서 사이트 속도에 대한 이슈가 늘어나는 것 같습니다.

사이트 속도를 높이는 방법은 여러가지가 있습니다.

Image sprites나 lazy loading, gz 압축 등의 방법이 있는 것 같네요.


Minify는 CSS, Javascript 에서 불필요한 부분을 제거하고 변수길이등을 조절하는 것으로 파일 크기를 줄이고, 캐쉬와 만료일 지정을 통해 사이트 트래픽을 줄여주는 소프트웨어 입니다.


PHP로 제작이 되어 있으며 단순 복사 및 .htaccess 를 수정하는 것으로 설치가 가능하기 때문에 비교적 쉽게 적용 가능합니다.



설치과정!

1. https://code.google.com/p/minify/ 로 이동해서 배포중인 압축 파일을 다운 받아서 압축을 풉니다.

2. 압축 푼 후에 min 디렉토리를 찾아서 적용하려는 사이트의 원하는 위치에 복사해 넣습니다(보통은 루트)

3. config.php 파일 내 변수를 수정합니다.

4. 캐쉬로 사용할 디렉토리를 만들고 퍼미션을 707로 설정합니다.

5. .htaccess 파일을 수정합니다.


위 과정에서 막힐만한 부분은 3, 5번 입니다.



config.php 변수 수정하기


$min_cachePath = ‘./tmp’;


이 부분은 처음에 주석 처리되어 있습니다. 이 변수는 위와 같은 값이 지정된 라인 주석 해제만 해 주시면 됩니다. 여기서 tmp 대신 다른 디렉토리 이름을 지정해도 됩니다.

./tmp는 당연히 min 디렉토리 내의 서브 디렉토리임을 나타냅니다.


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


이 부분도 역시 처음에 주석 처리되어 있습니다.

/min 과 같이 루트에 min디렉토리를 지정한 경우에는 값을 설정할 필요가 없습니다.

다만! 특정 서브디렉토리에 지정한 경우에는 해당 디렉토리의 값을 지정해 주어야 합니다.


예를들어  '/plugin/minify/min' 과 같은 디렉토리에 minify를 설치한 경우에는 

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

와 같이 상위 디렉토리 두 단계 이동하는 것으로 해결할 수 있습니다.


또는 위의 코드를 

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

와 같이 표현할 수 있습니다.


여기서의 -29 라는 값은 -15에 /plugin/minify 의 문자열 길이 값인 14 를 더 빼서 나온 것입니다.



.htaccess 값 수정

루트 디렉토리에 .htaccess 파일을 생성합니다. 있는 경우에는 그냥 수정하시면 됩니다.

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

위의 값을 뒷부분에 붙여넣으시면 됩니다. 여기서 주의할 것은 /min이 루트에 있지 않은 경우에는 경로를 변경해 주어야 한다는 것입니다.
위의 예에 이어서 /plugin/minify/min 에 위치한 경우에는

RewriteRule ^(.*\.(css|js))$ /plugin/minify/min/?f=$1 [L]

로 입력해 주시면 됩니다.


적용하고 나면?

아래 사진은 크롬에 yslow 를 설치해서 확인해 본 결과입니다.
yslow는 파이어폭스나 크롬에서 설치 가능합니다.


EXPIRES 값이 생겼네요. 사이즈도 조금 줄었는데, 크게 티는 안납니다.

적용 전에는 'No Expires' 라고 되어 있었습니다.

기본적으로 캐쉬기간이 30분이라서 오늘 날짜로 표시가 되네요.


config.php 파일의 주석을 살펴보면 "Despite this setting, if you include a number at the end of the querystring, maxAge will be set to one year. E.g. /min/f=hello.css&123456" 라고 적힌 부분이 있습니다.

즉, 끝에 엠퍼센트와 숫자값을 넣으면 캐쉬기간을 1년으로 늘려준다는 것이네요.


이 부분은 따로 처리해야 하는 것 같으니 나중에 소스 수정을 해서 캐쉬 기간을 좀 늘리는 작업을 해야 할 것 같습니다.


CSS 나 js 파일을 병합전송 하는 기능도 있는데, 이것 또한 특별하게 소스 수정을 해 줄 필요가 있는 부분일 것 같습니다.



여기까지 작업하니까..


얼만큼 빨라졌는지 잘 모르겠지만, 속도에 조금 이득은 있는 것 같습니다.

위에도 적었지만 몇가지 조치를 더 가하면 조금 더 빨라질 여지가 있겠지만, 다른 부분도 손볼 곳이 많아서 일단은 이정도로 마무리 짓고 다른 작업을 해봐야 할 것 같습니다.