php, css, js 파일 압축해서 보내기 (htaccess 이용)

munilive
Written by munilive on (Updated: )

웹사이트의 트래픽을 줄이기 위해 전송할 문서를 gzip으로 압축해서 보내는 방법이다.

PHP, CSS, JS 파일만 압축해서 보내는 것을 예제로 첨부한다. 이미지 파일은 이미 이미지 자체가 압축되어 있기 때문에 한 번 더 압축해봐야 오히려 용량이 늘어 날 수 있기 때문에 사용하지 않는다.

참고로 해당 기능을 사용하기 위해서는 아파치에서 mod_gzip 사용이 가능해야 한다.

작동되는 방식은 서버에 CSS, JS파일에 대한 요청이 들어오면 .htaccess 파일을 통해 미리 지정된 PHP 파일을 통해 압축 후 전송하도록 하는 방식으로 이 방식을 사용할 경우 요청 시 마다 압축을 해서 보내야 하므로 많은 요청에서는 매우 비효율적으로 작동 할 수 있다.

PHP 압축

  1. gzip_php.php 파일 생성

    <?php
    ob_start("ob_gzhandler");
    ?>
    
  2. .htaccess 파일에 내용 추가

    # Gzip 압축 사용하기
    <FilesMatch "\.(html|htm|php)">
        ForceType application/x-httpd-php
        php_value auto_prepend_file /home/munilive/blog/gzip_php.php
    </FilesMatch>
    

JS 압축

  1. gzip_javascript.php 파일 생성

    <?php
    ob_start ("ob_gzhandler");
       
    header ("content-type: text/javascript; charset: UTF-8");
       
    header ("cache-control: must-revalidate");
    $offset = 60 * 60 * 60 * 7;
    $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
    header ($expire);
    ?>
    
  2. .htaccess 파일에 내용 추가

    <FilesMatch "\.(js)">
       ForceType application/x-httpd-php
       php_value auto_prepend_file /home/munilive/blog/gzip_javascript.php
    </FilesMatch>
    

CSS 압축

  1. gzip_css.php 파일 생성

    <?php
    ob_start ("ob_gzhandler");
       
    header ("content-type: text/css; charset: UTF-8");
       
    header ("cache-control: must-revalidate");
    $offset = 60 * 60 * 60 * 7;
    $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
    header ($expire);
    ?>
    
  2. .htaccess 파일에 내용 추가

    <FilesMatch "\.(css)">
       ForceType application/x-httpd-php
       php_value auto_prepend_file /home/munilive/blog/gzip_css.php
    </FilesMatch>
    

참고로 .htaccess파일에 적용하는 경로는 절대 경로를 지정해야 한다.
적용하고 제대로 작동하는지 확인하려면, 아래 사이트에 접속해 본다.
https://www.whatsmyip.org/http-compression-test/ 또는 https://redbot.org/ 로 접속해서 헤더에 Content-Encoding: gzip을 포함하고 있는지 확인한다.

참고 사이트

Comments

comments powered by Disqus