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

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

ブラウザに表示するためのデータ転送の際、その内容を圧縮することで転送量を減らし、表示速度を高めるための手法としてgzip圧縮があります。今回はこの方法を解説します。例えば、当ブログの各ページはgzip圧縮に対応していて、本来なら25kbほどのファイルサイズが4kbほどにまで軽量化されています。

gzip圧縮とは?

「gzip」とは、ファイルを「圧縮」する方法の1つです。圧縮というのは、独自のデータ形式でファイルサイズを一時的に小さくすること。つまり、ウェブページのサーバーとユーザーのパソコン間で通信しているデータサイズを少なくするのが、今回設定する「gzip圧縮」の効果なんです。サイズが小さくなることで、ページの表示がより高速になることはもちろん、転送量が減るので利用しているサーバによっては、料金の節約にも繋がります。

技術的・専門的な内容については、下記の、t32kさんのページが分かりやすいので、興味のある人は、ぜひ、参考にしてみて下さい。

gzip圧縮を有効にする方法

mod_deflateで一括設定する

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

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

.htaccessの記述

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

.htaccess

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にするだけです。

.htaccess

zlib.output_compression = On

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

.htaccess

zlib.output_compression = Off

gzipファイルを自作する

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

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

.htaccess

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>

gzip圧縮ファイルの作り方

gzipファイル自作の道を選んだ人向けに、gzipファイルの作り方を紹介します。方法はどれも簡単ですが、PHPなどのプログラムを利用して自動化するのがお勧めです。

Windowsの場合

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

Macの場合

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

ターミナルを立ち上げる
ターミナルを立ち上げる

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

ターミナルのウィンドウを確認する
ターミナルのウィンドウを確認する

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

圧縮コマンドを打ち込む
圧縮コマンドを打ち込む

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

ドラッグ&ドロップ
ドラッグ&ドロップ

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

gzip圧縮されたファイル
gzip圧縮されたファイル

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

PHPの場合

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

PHP

<?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 ) ;

gzip圧縮されているか確認する方法

設定後は反映されているかチェックしておきましょう。gzip圧縮が有効になっているかを確認するには、下記のwebツールが便利です。

使い方

HTTP Compression Test
HTTP Compression Test

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

gzip圧縮が有効な場合
gzip圧縮が有効な場合

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

gzip圧縮が有効じゃない場合
gzip圧縮が有効じゃない場合

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

さいごに

作業コストを減らしたい場合はmod_deflate、サーバー負荷を抑えたい場合は、php.iniの編集とgzipファイルの自作を組み合わせて下さい。自身が利用するサーバーの環境も考慮して調整しましょう。

例えば、Googleの検索結果のランク付けには、微々たるウェイトながらも、表示速度が関係していると言います。それ以前に、ウェブサイトを利用するユーザーにとっても、表示速度はより快適になるという意味で重要ですね。この記事で説明する通りの、簡単な設定で表示速度が向上するなら、やっておいて損はないと思います。よろしければ、ご参考下さい。