【Apache】Webページの読み込みを高速化する設定(gzip圧縮/Expire)

DB&サーバ

2012.08.14

こんにちは、tanakaです。クロスバイクのタイヤが早速パンクしたので、お店まで5,6km 歩いて直しに行きました。ついでに自分で修理する方法も教えてもらいました。
シーブレインサイトリニューアルにあたり、Webページの読み込みが速くなるように2つ設定を追加しました。今日はその設定について紹介します。

テキストコンテンツを gzip 圧縮して転送(mod_deflateを使う)

次の記述をVirtualHostディレクティブに追加します。

    <IfModule mod_deflate.c>
            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
    </IfModule>

設定の内容は、サーバのコンテンツを圧縮してからブラウザに送るというものです。 mod_deflate の設定のままですね。 gzip 圧縮非対応のブラウザの場合と画像は圧縮しないよう設定しています。画像はもともと圧縮されていることが多く、再圧縮してもほとんど意味がないので除外します。 CPUがもともと高負荷でなければ、気軽に試せる設定だと思います。

Expireヘッダーの最適化(mod_expiresを使う)

同様に、次の記述をVirtualHostディレクティブに追加します。

    <ifModule mod_expires.c>
            ExpiresActive On
            ExpiresDefault "access plus 1 seconds"
            ExpiresByType image/x-icon "access plus 1 days"
            ExpiresByType image/vnd.microsoft.icon "access plus 1 days"
            ExpiresByType image/jpeg "access plus 1 days"
            ExpiresByType image/png "access plus 1 days"
            ExpiresByType image/gif "access plus 1 days"
            ExpiresByType text/css "access plus 1 days"
            ExpiresByType text/javascript "access plus 1 days"
            ExpiresByType application/x-javascript "access plus 1 days"
            ExpiresByType text/html "access plus 600 seconds"
            ExpiresByType application/xhtml+xml "access plus 600 seconds"
    </ifModule>

一度ブラウザで取得したコンテンツはキャッシュさせて、一定期間再取得しないようにブラウザにお願いします。この設定、かなり強力です。このバシャログのWebページでも使われていますので、表示が速くなったと思います。(ただしFacebookのソーシャルプラグインなどのサードパーティコンテンツを除く) 今回シーブレインのサイトには初めて導入するということもあり、キャッシュの有効期間は短め(画像/css/jsは1日)に設定しています。

動作確認する

Firebug の「ネット」タブで、受信したリソースのレスポンスヘッダを確認します。

gzip圧縮している場合は Content-Encoding がgzip になり、Varyというヘッダが追加されます。(mod_deflate を使った設定が反映されている)
Expires の日時が Date のちょうど1日後になり、Cache-Control が「max-age=86400」になりました。(mod_expires を使った設定が反映されている)

まとめ

シーブレインウェブサイトのリニューアルでも利用している、Webサイトの表示を速くするための設定を2つ紹介しました。 mod_expires 設定の方は、もしファイルの内容を頻繁に修正することがある場合は、ファイル名を修正したり、クエリを付ける(例：style.css?20120813)などして、リソース再読み込みを強制させる工夫が必要になることがあります。