[Others] ページの表示速度を改善するために色々やってみました

以前から「PageSpeed」にやれやれと言われ続けていたのと、
"PageSpeed" の Chrome版がリリースされたのもあるので、ページの表示速度を改善するために色々やってみました。
やったことを簡単に書き留めておきます。

リソースの圧縮

一つ目は、gzip や deflate を使用したリソースの圧縮です。
リクエストされる各ファイルの容量を圧縮することで転送量を減らし、速度改善につなげる施策です。対象のファイルを一個ずつ gzip 圧縮するのが面倒臭かったので、今回は apache の mod_deflateモジュールを使用して対応しました。

mod_deflate

具体的には .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)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

何やら色々書いてありますが、要は mod_deflateモジュールを使用して、画像ファイル（gif, jpg, png）以外のリソースを、ネットワークを通してクライアントに送る前に gzip 圧縮するという内容です。

AddOutputFilterByType

前述の方法の他には AddOutputFilterByType を使用する方法もあります。
AddOutputFilterByType を使用する場合は .htaccess に以下のように記述します。

AddOutputFilterByType DEFLATE text/css text/javascript application/x-javascript

DEFLATE の後に圧縮したいファイルの MIMEタイプを記述します。
このサイトで使用しているレンタルサーバでは使用できないようでしたので、
今回はこちらの方法は採用しませんでした。

ブラウザのキャッシュの活用

これには少し注意点もありますが、簡単に表現すると httpレスポンスに Expiresヘッダを追加することでリソースをクライアント側にキャッシュさせ、httpリクエストの数を減らして速度改善につなげる施策です。
このサイトでは .htaccess に以下のような感じに記述を追加しました。

ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/svg+xml "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/x-icon "access plus 1 month"

比較的更新や修正が少ないと思われるリソースに対してキャッシュを有効にして有効期間を指定しています。
この時注意が必要なのは、キャッシュの有効期間として指定した期間内はブラウザはローカルのキャッシュを見にいってしまうため、キャッシュ対象にしたリソースに何かしらの変更を加えた場合はファイル名を変更しなければならないということです。
例えば、このサイトの場合は、ファイル名にバージョンを含めることでこの問題を回避しています。

<link rel="stylesheet" href="/common/css/template.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/module.201206211900.css" media="all">
<script src="/common/js/heading.201206211900.js"></script>
<script src="/common/js/smoothscroll.201206211900.js"></script>
<script src="/common/js/accordion.201206211900.js"></script>

ファイルを更新した場合は、HTMLのファイル読込みの記述のバージョン番号を変更する感じです。

その他の細かい色々

前述した二つの他に次のようなこともしてみました。

外部CSSファイルの読込みで @import 構文を使用するのを止めた

これについては各サイトの運用ルールなどもありますし、自身ではまだ詳細に検証していないので一概には良い悪いと言えませんが、とりあえず自分のサイトなのと対応が難しくないので一応やってみた程度です。
参考サイトにこちらに関して記載しているページを載せておきました。

// import.css内に次のように記述していたものを
@import "format.css";
@import "template.css";
@import "module.css";

// 次のようにHTMLで直接読み込むように変更
<link rel="stylesheet" href="/common/css/format.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/template.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/module.201206211900.css" media="all">

画像ファイルの圧縮

これは単純に僕が面倒くさがっていただけです。
特に容量の大きい画像ファイルやサイト内のページで共通して表示されるような画像を圧縮しました。

CSS や JavaScript の圧縮や CDN の利用など、
突き詰めればその他にもまだ色々とやることはあるのですが、今回はこんな感じです。
どうでしょうか。少しは表示の体感速度が速くなったでしょうか？
なんやかんや言っても、ソーシャルサービスの共有ボタンとか、
カスタム検索や analytics の読み込みに一番時間掛かっている気がします。