読者です 読者をやめる 読者になる 読者になる

雨ときどき晴れ

最近はC#やASP.NET MVCやってます。NetduinoやCerbuinoも活用できるようになりました。

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

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


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

ウェブマスターツール

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


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


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

手順

  1. Online YUI Compressorを使って、コメントや空白などを削除することでファイル容量を減らす。
  2. 1.で作ったファイルをgzipに圧縮する。
  3. apacheの設定で「○○.css.gz」や「××.js.gz」を読み込むように設定する。
  4. 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>

この設定では、gzipに対応したブラウザに対して、.jsと.cssのファイルを読み込もうとしたときに
対応する.gzなファイルがあったら、そっちを読み込ませるようになっています。
.gzファイルがない場合は、.cssや.jsのファイルを読み込ませます。

4. 1.と2.で作ったファイルをアップロードする。

3.までの設定を終えたら、1.と2.で作成したスリム化したファイルとgzip圧縮したファイルを
Webサーバーにアップロードして終わりです。

結果

参考にボクがやってみた結果を書いておきます。

CSS
内容 サイズ 圧縮率
元ファイル 58.7KB 100.0%
スリム化 36.8KB 62.69%
スリム化+圧縮 11.1KB 18.91%
JavaScript
内容 サイズ 圧縮率
元ファイル 222KB 100.0%
スリム化 155KB 69.82%
スリム化+圧縮 52.7KB 23.74%

結果を見ると、おおむね1/5までファイルのスリム化ができたみたいです。

これにより、どこまでページの読み込み速度が上がったかは、よく分かってませんが、
分かりそうなデータが出てきたら、紹介したいと思います。