gzip圧縮でCSSやJSなどの転送量を減らす方法

mod_deflateで一括設定する

「mod_deflate」というモジュールを利用して、サーバーからブラウザに転送するデータを圧縮する方法です。.htaccessを編集します。レンタルサーバーを利用している場合は、このモジュールが使用可能かを、確認しておきましょう。

この方法のメリットは、CSSやJavascriptなど、あらゆるファイルを細かい設定なしに自動で圧縮してくれること、要は「これだけ設定しておけば後は勝手にやってくれる」というお手軽さです。対してデメリットは、ブラウザがアクセスする度に、圧縮処理をするため、サーバーのCPU負荷が上がってしまうことです。

.htaccessの記述

.htaccessに下記のコードを追加して下さい。1行目のSetOutputFilter DEFLATEで全てのファイルを有効にし、5行目で画像(.gif、.jpg、.png、.ico)を除外するよう設定しています。2〜4行目は古いブラウザへの対応で、Apache公式サイトのガイド通りとなっています。

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

Apache公式サイトのサンプルコードを実際に確認したい人は下記ページへどうぞ。

PHPの出力をgzip圧縮する

「mod_deflate」による一括設定ではなく、個別に設定したい場合は以降をご参考下さい。まずはPHPによる出力をgzip圧縮する方法を紹介します。WordPressでブログを運用している人などは有効ですね。

PHPの設定を司る、php.iniを編集して下さい。レンタルサーバーを利用している人は、各サーバーのヘルプ、FAQなどから「php.iniの編集方法」を探せば、見つかるはずです。具体的には、zlib.output_compressionという項目の値をOnにするだけです。

zlib.output_compression = On

逆に無効にしたい場合は、Offにして下さいね。

zlib.output_compression = Off

gzipファイルを自作する

当ブログで採用している方法です。SSやJavascriptなどのファイルを自分でgzip圧縮し、ユーザーにそのファイルを読み込ませる方法です。gzipに対応していないブラウザを利用している人向けに、通常のファイル(style.css)と圧縮済みのファイル(style.css.gz)の2種類をサーバー上に用意しておくことが重要です。gzip圧縮ファイルの作り方は次章をご参考下さい。

自作したgzip圧縮ファイルの転送を有効にするには、.htaccessに下記のコードを追加して下さい。gzip圧縮に対応しているブラウザには圧縮済み(.gz)のファイルを、対応していないブラウザには通常のファイルを転送する設定です。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

#スタイルシート (.css)
<FilesMatch "\.css\.gz$">
	ForceType text/css
	AddEncoding x-gzip .gz
</FilesMatch>

#Javascript (.js)
<FilesMatch "\.js\.gz$">
	ForceType application/x-javascript
	AddEncoding x-gzip .gz
</FilesMatch>

#HTML (.html)
<FilesMatch "\.html\.gz$">
	ForceType   text/html
	AddEncoding x-gzip .gz
</FilesMatch>

Windowsの場合

Windowsの場合、定番のファイル圧縮・解凍ソフトであるLhaplus(ラプラス)を利用して下さい。圧縮方法に.gzを指定すれば、簡単にgzip圧縮ファイルを作成することができます。

Macの場合

Macの場合は標準でインストールされているターミナルというソフトを使うのですが、初めてだと分かりにくいので解説します。

まずはターミナルを立ち上げます。画面右上メニューバーに虫眼鏡マークのアイコン(Finder)があるのでクリックします。検索バーが出てくるので、そこに「ターミナル」と打ち込んで下さい。検索結果として表示された「ターミナル」をクリックします。

ターミナルのウィンドウが現れました。何やら取り扱いが難しそうな印象を受けますが、操作は超簡単なので、気軽に次の項目にどうぞ！

まずはキーボードでgzipと入力して、さらに半角スペースを入力して下さい。

次に、.cssや.jsなど、圧縮したいファイルをターミナルのウィンドウ内にドラッグ&ドロップして下さい。その後、ターミナルのウィンドウに戻り、キーボードのEnter(決定)をクリックすると作業が完了です。

このように、元ファイルがgzipファイルとして上書きされます。拡張子が.gzになっているのを確認して下さい。これをダブルクリック(解凍)すると、元ファイルが別途作成されます。

PHPの場合

当ブログで採用しています。PHPプログラムを利用してgzip圧縮されたファイルを作成するには、下記の通り、処理して下さい。元ファイル(index.html)と同フォルダ内に、別途、gzip圧縮済みのファイル(index.html.gz)を作成します。

<?php
/**************************************************

	GZIPファイルを作成する

	* 基本的に元ファイルのパスを指定するだけ

**************************************************/

	// 元ファイルのパス
	// 例: index.html
	$file_org = "/var/www/syncer.jp/index.html" ;

	// 作成するgzipファイルのパス
	// 例: index.html.gz
	$file_gzip = $file_org . '.gz' ;

	// 元ファイルの内容を読み込む
	$code = @file_get_contents( $file_org ) ;

	// gzip圧縮処理して同一フォルダにファイルを作成
	$gzip = gzopen( $file_gzip , 'w9' ) ;
	gzwrite( $gzip , $code ) ;
	gzclose( $gzip ) ;

使い方

ページにアクセスしたら、真ん中のフォームに、調べたいページのURLアドレスを入力し、Testをクリックして下さい。

gzip圧縮が有効になっているページの場合、図のように、グリーンのチェックマークが表示されます。Page Sizeがオリジナルのファイルサイズ、Compressed Page Sizeが圧縮後のファイルサイズ、そしてPotential Savingsが節約されたパーセンテージを示しています。

gzip圧縮が有効じゃないページの場合、レッドのマークが表示されます。この場合も、圧縮をしたらどのようにファイルサイズを抑えることができるか、その情報が表示されます。