': Web' 카테고리의 글 목록 (3 Page)

: Web

htaccess 로 PHP, CSS, JS 압축하기 2012.10.25

htaccess 로 PHP, CSS, JS 압축하기

2012. 10. 25. 16:13

출처 : http://idchoi2.tistory.com/entry/웹-최적화-htaccess로-PHP-CSS-JS-압축하기

대한민국의 웹 현주소를 보면 방대하게 성장한 만큼 최적화가 이루어져있지 않은게 현실입니다.
처음 구성을 할때 10분만 투자를 하기만 해도 사용자들이 웹에 접근할때 크기가 줄어들면서 자연스레 대역폭도 아낄 수 있습니다.
특히 스맛폰, 태플렛 PC등을 사용이 빈번해지면서 최적화는 이제 필수가 되가고 있습니다.

최적화는 Steve Souders의 유명한 High Performance Webistes 에 잘 설명이 되어 있습니다.

그 중 저는 여기서 아주 간단하게 htacess파일로 할 수 있는 GZip압축과 만료기간 (Expire Date)를 표기하는 방법 알아보겠습니다.GZip은 GNU프로젝트에서 개발된 현재 가장 많이 사용되는 압축 기술로 거의 모든 브라우저에서 지원이됩니다. 어떤 파일들을 압축해야할가요?

1. PHP
2. CSS
3. Java Script

위 세가지를 제외한 이미지 파일들나 PDF는 이미 압축이 되어있는 형태로 압축을 해버리면 오히려 용량이 늘어나고 엄청 느려집니다.

1. PHP 압축

- php을 이용할때 가장 간단한 방법은 파일 압에 ob_start() 메쏘드를 이용해주는 겁니다. 단순히 아래와 같이 말이죠.

<?php
ob_start("ob_gzhandler");
?>

간단하죠? 위 파일을 적당한 폴더로 gzip-php.php 로 저장합니다.

그리고 htaccess에서

<FilesMatch"\.(txt|html|htm|php)">
ForceType application/x-httpd-php
php_value auto_prepend_file /적당한폴더의절대경로/gzip-php.php 
</FilesMatch>

이렇게 써주면 됩니다. 꼭 절대경로를 써주세요. 그럼 모든 문서 (txt, html, htm, php)가 GZip으로 압축됩니다.

2. CSS 압축

- 비슷한 원리로 압축합니다. 아래 코드를 gzip-css.php로 저장.
여기서는 만료기간도 추가해서 넣어봤습니다. 만료기간을 넣게된다면 사용자가 한번 읽어들이고 만료기간동안은 사용자 컴퓨터 캐쉬에서 쓰기때문에 쓸데없는 시간과 대역폭이 낭비되지 않죠. 꼭 넣어줍시다잉.

<?php
// 압축해서 보내집니다.
ob_start ("ob_gzhandler");
// 헤더정보를 명시. CSS파일이라고 알려줌.
header ("content-type: text/css; charset: UTF-8");
// 만료기간 명시.
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>

그리고 htaccess에서 아래와 같이 입력합니다.

<FilesMatch "\.(css)">
ForceType application/x-httpd-php
php_value auto_prepend_file /적당한폴더의절대경로/gzip-css.php 
</FilesMatch>

그럼 모든 스타일시트 (css)가 GZip으로 압축됩니다.

3. Java Script 압축

- 감이 잡히죠? js파일도 같은 원리입니다. 아래내용을 gzip-js.php로 저장.

<?php
// 압축해서 보내집니다.
ob_start ("ob_gzhandler");
// 헤더정보를 명시. 자바스크립트라고 알려줌.
header ("content-type: text/javascript; charset: UTF-8");
// 만료기간 명시.
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>

그리고 htaccess에선 다음과 같이.

<FilesMatch "\.(js)">
ForceType application/x-httpd-php
php_value auto_prepend_file /적당한폴더의절대경로/gzip-js.php 
</FilesMatch> 

그럼 모든 자바스크립트 (js)가 GZip으로 압축됩니다.

4. 결과 확인

자 그럼 접속을 해 봅니다. 접속했을시 에러가 난다거나 스타일시트가 적용이 안되는 경우 htaccess에서 경로를 확인해보시기 바랍니다.

GZip압축은 최적화의 일부분에 지나지 않습니다. 하지만 약간의 수고로 훌륭한 효과를 가져다 줍니다.

http://www.whatsmyip.org/http_compression/

위 링크에서 url을 입력하면 GZip의 압축유무와 압축이 되었다면 얼만큼이 절약되었는지 알 수 있습니다.
다음 (daum.net) 은 얼마나 절약을 하고 있을까요?

우왕~
73.86퍼센트를 절약했네요.
그렇다면 압축을 했을때 css와 js가 얼마나 줄어드는지 확인해볼까요?

YSlow로 제가 만든 웹사이트가 압축이 되었을때의 파일 크기를 비교해 보겠습니다.

GZIP으로 되어있는 부분이 압축이 된 후의 데이터양입니다.
정말 많이 줄었네요. 대부분 60~80퍼센트대의 압축률을 보여줍니다.
안할 이유가 없겠죠? 우리 모두 압축합시다!

저작자표시

': Web' 카테고리의 다른 글

카카오 MAP 을 이용하여 위/경도 좌표 구하는 방법 (0)	2019.11.06
ab (ApacheBench) - 아파치 웹서버 성능검사 도구 (1)	2012.10.26
Apache 서버 .htaccess 활용 (사이트 접근 제어 - 아이피 제어) (0)	2012.10.25
톰캣 앞에 꼭 아파치를 두어야 하나 (0)	2012.06.08
tomcat out of memory 메모리 설정 (0)	2012.05.22

PREV 1 2 3 4 5 6 ···24 NEXT

안나푸르나