워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess

워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess

워드프레스 홈페이지를 운영하다보면 트래픽 문제가 신경이 많이 쓰입니다.

이와 관련하여 PHP와 htaccess (정식으로는 .htaccess)를 사용하여 css, js, html, txt 파일들을 gzip 압축 전송하는 방법에 대해서 포스팅합니다.

워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess _MG_1655_600

알고 있는 바로는 , 파일 들을 gzip 압축 전송하는 방법은 크게 다음의 세가지가 있습니다.

1. mod_deflate 모듈을 이용하는 방법

2. mod_gzip 모듈을 이용하는 방법

3. PHP 함수를 이용하는 방법

등 입니다.

이 중에서, mod_deflate.c는 웹 호스팅을 하는 회사라면 그리 달가와 하지 않는 모듈(module)인 것 같습니다. 왜냐하면, 서버 프로세서에 부하를 주어서 그런 것 같습니다. mod_gzip도 마찬가지입니다.

만약에, mod_deflate.c와 mod_gzip을 통해 gzip 압축 전송을 하고 있다면, 저렴한 비용으로 좋은 서비스를 받고 있다고 할 수 있습니다.

일반적으로 위의 두가지 서비스가 제공되지 않는 곳에서 PHP로 gzip 압축 전송을 하는 방법을 안내 드리며, 주의 점을 한 두가지 알려 드립니다.

검색을 통하여 포스팅된 블로그 내용들을 보고 그대로 따와서, 내 사이트에 적용해보면 제대로 안되는 경우가 제법 많습니다.

즉, 거의 완전하게 이해하지 않은 상태에서 적용만 하면 많은 시행 착오를 거쳐야 합니다.

왜 그러한 coding이 되었는지 모르면 수정하기도 쉽지 않습니다. 알아야 수정하죠.

아래는 php로 gzip 압축 전송을 하게 될 때의 .htaccess에 삽입되는 문장입니다.

<FilesMatch “\.(txt|html|htm)”>
ForceType application/x-httpd-php
php_value auto_prepend_file /home/hosting_users/my_account/www/gzip-enable.php
</FilesMatch>
<FilesMatch “\.(js)”>
ForceType application/x-httpd-php
php_value auto_prepend_file “/home/hosting_users/my_account/www/gzip-js.php”
</FilesMatch>
<FilesMatch “\.(css)”>
ForceType application/x-httpd-php
php_value auto_prepend_file “/home/hosting_users/my_account/www/gzip-css.php”
</FilesMatch>

위의 첫 문장을 해석하면 이렇습니다.

파일 종류가 txt 또는 html 또는 htm이면, 이 파일들을 php 문서로 취급하고, gzip 압축전송을 위해 그 파일들에 gzip-enable.php를 파일의 최상단에 자동 삽입하라는 이야기입니다.

/home/hosting_users/my_account/www/gzip-enable.php <- 이 부분은 내 홈페이지의 절대경로를 말합니다. 호스팅 회사에 물어보거나 보통 자주 묻는 질문답 코너에 가보면 안내되어 있습니다.



gzip-css.php의 내용

<?php

// initialize ob_gzhandler function to send and compress data
ob_start (“ob_gzhandler”);

// send the requisite header information and character set
header (“content-type: text/css; charset: UTF-8”);

// check cached credentials and reprocess accordingly
header (“cache-control: must-revalidate”);

// set variable for duration of cached content
$offset = 60 * 60 * 24 * 30 ;

// set variable specifying format of expiration header
$expire = “expires: ” . gmdate (“D, d M Y H:i:s”, time() + $offset) . ” GMT”;

// send cache expiration header to the client broswer
header ($expire);
?>

gzip-enable.php의 내용

<?php
if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’))
ob_start(“ob_gzhandler”);
else
ob_start();
?>

gzip-js.php의 내용

<?php

// initialize ob_gzhandler function to send and compress data
ob_start (“ob_gzhandler”);

// send the requisite header information and character set
header (“content-type: text/javascript; charset: UTF-8”);

// check cached credentials and reprocess accordingly
header (“cache-control: must-revalidate”);

// set variable for duration of cached content
$offset = 60 * 60 * 24 * 30 ;

// set variable specifying format of expiration header
$expire = “expires: ” . gmdate (“D, d M Y H:i:s”, time() + $offset) . ” GMT”;

// send cache expiration header to the client broswer
header ($expire);
?>

이렇게 하면 html, htm, txt, css,js 파일들을 gzip 압축 전송(클라이언트의 브라우저가 압축전송을 받을 수 있는 것이라면)할 수 있어 트래픽(대역폭, bandwidth)를 대폭 절감할 수 있습니다. 참고로 $offset 부분은 클라이언트 브라우저에서 압축 전송된 파일 들의 만료기간을 정하는 것입니다. 초단위이니 60 x 60 x 24 x 30이면 30일, 즉 약 한달로 정한 것이니, 내게 맞게 끔 변경하시면 됩니다.

워드프레스 홈페이지 gzip 압축전송  대역폭 트래픽 절감워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess

주의할 점

물론 이미지 파일들은 제외하였습니다. 그런데, 위의 파일들도 압축해서 전송하면, 클라이언트쪽에서 보면 일부 브라우저, 서버쪽에서 보면 특정 css, js 파일들은 오류를 일으켜 원치 않는 화면 렌더링, 또는 오류를 자주 볼 수도 있습니다. 즉, 만능은 아니라는 것입니다.

많은 경험을 하다보면 그러한 사례를 접할 수 있습니다.

이상으로 워드프레스 홈페이지 php로 css, js, html gzip 압축전송  htaccess에 대해서 간략히 살펴보았습니다.

즐거운 워드프레스 홈페이지 만들기 생활되시길 바랍니다.


3 thoughts on “워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess

  1. 안녕하세요
    워드프레스로 웹페이지 만드는데 어려움이 많네요
    gzip js.php 내용이 안나와있네요..
    css가 두개 중복되어 올려져있는데
    js 내용도 올려주시면 안될까요??

    1. js관련 내용도 수정하여 올렸으나, cs-gzip 내용과 거의 같습니다. gzip 전송은 워드프레스의 테마와 플러그인의 활성화와 연관이 좀 있습니다. 일단, 상기 내용 적용하시면 압축전송하는 데에는 아무 문제가 없습니다. 다만, 특정 css나 js는 압축전송했을 때 화면이 깨지는 등의 문제가 발생할 수도 있으니, 적용 후에 데스크탑 몇 개 브라우저 뿐만 아니라 모바일 상에서도 화면이 이상없이 렌더링 되는 지 확인해보셔야 합니다.
      적용해보시고, 압축 전송 테스트사이트 관련 글
      http://www.tomylove.net/IT-wordpress/http-compression-regular-expression-pagespeed-insights.html
      에서 확인해보시기 바랍니다.
      아참… 그리고, 댓글 아바타가 좀 이상하게 적용되고 있으니 수정에 시간이 좀 걸리겠습니다.

      1. 네.. 감사드립니다
        워드프레스 이제 막 접하기 시작했고 php가 뭔지도 몰랐던 그냥 인문계 출신 회사원이라..
        어려움이 참 많네요
        하나하나 배워가는데 도움 주셔서 정말 감사드립니다
        좋은일만 가득하시길 바랍니다

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.