JS, CSS파일 압축전송으로 페이지 로딩속도 향상

1/2

Niels Leenheer씨는 HTML 페이지의 로드를 가속화하기 위해 포함하는 자바스크립트 및 스타일시트 파일에 gzip을 사용하여 압축하고  모드리라이트(mod_rewrite) 모듈을 이용하여 자동-전송하는 방법을 자신의 개인 블로그에 소개했다. 좌축의 이미지는 파이어버그(firebug)의 Net 콘솔 화면으로 압축전과 압축후의 로딩속도와 파일용량을 비교한 것이다. 압축률은 1: 0.23~0.25 이며, 자료의 크기는 줄지만 완전히 투과하도록 작동하기 때문에 종전의 소스코드에는 변화를 줄 필요가 없다.

파일의 압축전송은 브라우저가 한정된 수만을 동시에 다운로드하므로 몇몇 파일이 완료될때 까지 기다리는 문제가 발생한다. 이 문제의 해결책은 1개의 큰 파일로 결합하여 전송 대역폭을 줄이는 방법을 제공한다. 예를 들자면 아래와 같다.

분리된 자바스크립트 라이브러리 URL :
http://www.firejune.com/javascripts/prototype.js
http://www.firejune.com/javascripts/builder.js
http://www.firejune.com/javascripts/effects.js
http://www.firejune.com/javascripts/dragdrop.js
http://www.firejune.com/javascripts/slider.js

하나로 결합하기 :
http://www.firejune.com/javascripts/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

그리고 웹서버의 리소스 확보를 위해서 파일들의 요청이 있을때마다 압축하는 작업을 거치지않고 캐시를 사용하도록 설정되어 있다.(끌 수 있음) 설치를 시작하기 전에 우선 아래의 주소에서 소스를 다운로드하고 파일명을 'combine.php'로 저장다.

combine.php 다운로드 : http://rakaz.nl/projects/combine/combine.phps

설정을 위해 다운로드한 파일을 열어 자바스크립트, 스타일시트, 캐시 폴더의 경로를 설정한다. 만약 웹서버에 캐시폴더가 없다면 쓸수있는 권한이 있는 폴더를 생성해야한다. 그리고 웹서버의 루트(root)에 업로드 하자. 두번째로 모드리라이트를 손볼 차례이다. 루트의 .htaccess파일을 열어 아래와같은 내용을 삽입하자. 1번과 2번라인은 이미 설정되어 있다면 무시해도 무방하다. 이 또한 마찬가지로 php에서 설정한 자바스크립트가 있는 폴더와 스타일시트가 있는 폴더이름만 변경하면 된다.

RewriteEngine On
RewriteBase /
RewriteRule ^stylesheets/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascripts/(.*\.js) /combine.php?type=javascript&files=$1

다소 간편한 몇가지의 조작만으로 속도향상을 꾀할수 있었다. 자바스크립트와 스타일스트의 양이 많은 곳이라면 꼭한번 써봄직한 솔루션이다.

출처 : http://firejune.com/1080