대한민국의 웹 현주소를 보면 방대하게 성장한 만큼 최적화가 이루어져있지 않은게 현실입니다.
처음 구성을 할때 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() 메쏘드를 이용해주는 겁니다. 단순히 아래와 같이 말이죠.
1
2
3
<?php
   ob_start("ob_gzhandler");
?>

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

그리고 htaccess에서 

1
2
3
4
<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로 저장.
여기서는 만료기간도 추가해서 넣어봤습니다. 만료기간을 넣게된다면 사용자가 한번 읽어들이고 만료기간동안은 사용자 컴퓨터 캐쉬에서 쓰기때문에 쓸데없는 시간과 대역폭이 낭비되지 않죠. 꼭 넣어줍시다잉.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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에서 아래와 같이 입력합니다.

1
2
3
4
<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로 저장.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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에선 다음과 같이.

1
2
3
4
<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퍼센트대의 압축률을 보여줍니다.
안할 이유가 없겠죠? 우리 모두 압축합시다!


* 다시 한 번 주의: 절대 이미지와 PDF는 압축하지 않습니다.! 



XE Login

서버에 요청 중입니다. 잠시만 기다려 주십시오...