Googleのウェブマスターツールがgzip圧縮をオススメするのでやってみた。

最近、EC-CUBEをカスタマイズして通販サイトをオープンしてみました。
それでGoogle Analyticsやウェブマスターツールを設定して様子を見ていたのですが、
10日ほど経ってから、いろいろ情報が表示されるようになりました。

その一つがサイトの読み込み時間を短縮するために「gzip 圧縮を有効にする」です。

ウェブマスターツール

これは、ウェブマスターツールの「Labs」→「サイトのパフォーマンス」のページにある
「Page Speed が提案する読み込み時間の短縮方法」のところに書いてありました。

他にもリクエスト数削減のために「外部 JavaScript ファイルをまとめる」や
「外部 CSS ファイルをまとめる」といった方法が書いてあるのですが、
今後もいじっていくことを考えると面倒そうなので今は放置しておきます。

ということで、今回は、cssやjsなファイルたちをできるだけスリムにして、
圧縮することで転送料を減らすように頑張っていきたいと思います。

手順

Online YUI Compressorを使って、コメントや空白などを削除することでファイル容量を減らす。
1.で作ったファイルをgzipに圧縮する。
apacheの設定で「○○.css.gz」や「××.js.gz」を読み込むように設定する。
1.と2.で作ったファイルをアップロードする。

1. Online YUI Compressor を使って、コメントや空白などを削除することでファイル容量を減らす。

まず、現在あるファイルの無駄な部分をカットしてみたいと思います。
ここでの無駄な部分とは、cssやjsの動作に関係ないコメントや改行、空白などのコード以外の部分です。

上記の無駄な部分をカットしてくれるサイトがあります。
それが「Online YUI Compressor」です。
ここにcssやjsのファイルをアップロードして、「Compress」ボタンをクリックすると
コードだけのファイルができあがります。あとはそれをダウンロードするだけ。
また、複数のファイルを一つにまとめることも可能です。

ただ、注意点として、ここで作成したファイルはWebサーバーに置いておくためのファイルなので、
元のファイルも今後の編集用に置いておいてください。

2. 1.で作ったファイルをgzipに圧縮する。

gzipに圧縮するには、LinuxなOSを使うと楽です。

$gzip -c hoge.css > hoge.css.gz

で元のファイルを残したまま、gzipに圧縮したファイルが生成できます。
Webサーバーには、.cssと.css.gzの2種類のファイルを置いておきます。
2種類のファイルを置く理由については、後ほど説明します。

あと.gzなファイルはWindowsでも作成可能です。
ただ、圧縮するためにソフトをインストールしたりするのが面倒なので、Linux環境があればそちらを使った方が楽かと。。。

3. apacheの設定で「○○.css.gz」や「××.js.gz」を読み込むように設定する。

今まで、.cssや.jsのファイルを読みこむように各ファイルで設定していました。
そのため、新たに.gzのファイルを読み込ませるために各ファイルに拡張子.gzを付け加える作業はとても面倒なため、
apacheの方で読み込むファイルを判断してもらいたいと思います。
また、ブラウザには.gzのファイルを処理できないものもあるため、

.gz対応ブラウザには.gzファイルを渡す。
.gz未対応ブラウザには.cssや.jsのファイルを渡す。

といった処理をするようにしました。

下記がその設定です。これをapacheや.htaccessファイルなどに書いてあげてください。

RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.js$ [OR]
RewriteCond %{REQUEST_FILENAME} \.css$
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

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

<FilesMatch "\.css\.gz$">
    ForceType text/css
    AddEncoding x-gzip .gz
</FilesMatch>