当方結構古いスマホを使用していまして、拙ブログを表示させるのに非常に時間を要していました。そこで改善のため策を弄しまして。

まずは現状を知るべし。下記サイトにてどこに問題点があるか解析してくれます。Google先生イズムなコード表記に誘導されている気がしますが、細かいことは考えない。

PageSpeed Insights

http://developers.google.com/speed/pagespeed/insights/

で、今回注目するのがこの項目。

JavascriptやCSSはテキストベースなので、圧縮をかけることで、かなりファイルサイズを低減できます。ブラウザ側で圧縮ファイルを展開するので、CPU使用率は上昇しますが、Google先生曰く、ネットワーク負荷を低減することの方が重要らしい。

deflateはサーバー側がファイルを送信するたびに動的に圧縮する手法。サーバーのCPU使用率が上昇するので、普通のレンタルサーバーでは使用できないはず。

対してgzipは事前に用意した圧縮ファイルを静的に送信するので、サーバー側に負荷はかからないです。今回はこれで代替します。

まずは圧縮したいファイルをローカルで圧縮します。LhaplusやCubeICEなどなど多機能な圧縮ソフトなら.gz形式に対応しているはずです。MacやLinuxならターミナルからコマンドで圧縮できた、はず。

あとは圧縮ファイルをFTPでアップロード。注意するのは圧縮前のファイルも削除せず置いておくこと。まずないとは思いますが、古いブラウザではgzipを解凍できないので、非対応のブラウザでは元ファイルにアクセスするよう誘導しなければなりません。

なお既存のHTMLやPHPを編集する必要はありません。間違ってもsrc=”hoge.js.gz”とかにしないように。

続いて.htaccessを編集します。ここで対応・非対応ブラウザでアクセスするファイルを振り分けるよう設定します。

<IfModule mod_rewrite.c>
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
</IfModule>
AddEncoding x-gzip .gz
<files *.css.gz>
AddType text/css .gz
</files>
<files *.js.gz>
AddType application/javascript; .gz
</files>

.htaccessのことはほとんど知らないので、見よう見まねですが。

上から順に「mod_rewriteモジュールに対応しているなら」「gzip対応ブラウザなら」「拡張子がgzなら」「gz拡張子があるものとないもので同名のファイルがあるなら」「アドレスに.gzを付加する」という意味です。「IfModule」や「RewriteCond」はIF文みたいなもので、つなげていくと「AND」になります。

下半分は拡張子が.css.gzや.js.gzとなっているファイルのContent-Typeを、それぞれ「text/css」「application/javascript」に書き換えています。

以上でgzipへの対応作業は完了です。あとは各ブラウザのデベロッパ機能で、アクセスしたファイルのサイズを追っていけば、よりファイルサイズの小さいものをダウンロードしていることが確認できるかと。

改行削除するくらいなら gzip したらいいじゃない

http://hyper-text.org/archives/2012/11/webcontents_gzip.shtml

ウェブサイトをgzip圧縮で高速化する

http://www.koikikukan.com/archives/2012/06/19-015555.php