[Server & Network General] Apache: mod_deflate, mod_expire でページの表示速度を改善する【設定編】

公開日: 2016/05/19
更新日: 2018/10/15

サーバを変更したら最適化されていなかったので自己対応します。

[markdown]
「さくらのレンタルサーバスタンダード」の例です。

> * [WordPress、EC-CUBE、concrete5等CMSが使えるスタンダードプラン – レンタルサーバーはさくらインターネット](http://www.sakura.ne.jp/standard.html)

2016-05-18_google_01

関連エントリー。

> * [Apache: mod_deflate, mod_expire でページの表示速度を改善する | deadwood](https://www.d-wood.com/blog/2013/12/26_5150.html)

## 症状

さくらのレンタルサーバでは mod_deflate の自己対応が必要でしたので、mod_expire とあわせて対応します。

### Before: PageSpeed Insights スコア

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) でチェックしておきます。
こちらのエントリーを対象とします。

> * [Grunt: Webページの表示高速化について考える（画像最適化編） | deadwood](https://www.d-wood.com/blog/2013/12/27_5159.html)

– モバイル: 62/100
– PC: 67/100

がっつりスコアが下がってました。

### Before: Response Headers

また、HTTP Header と転送量、速度を確認しておきます。

> * [Chrome Developer Tools で HTTP Header を確認する方法 | deadwood](https://www.d-wood.com/blog/2013/12/06_5088.html)

style.css を確認。

“`prettyprinted
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:28502
Content-Type:text/css
Date:Tue, 17 May 2016 13:33:48 GMT
ETag:”99b1c43-6f56-4f13e954d9a80″
Keep-Alive:timeout=5, max=19
Last-Modified:Fri, 31 Jan 2014 06:50:02 GMT
Server:Apache/2.2.31
“`

– DOMContentLoaded: 5.73s
– Load: 11.33s
– Transferred: 2.9MB

## 対応

速度を測りながら、設定をしていきます。

### mod_deflate

まず mod_deflate のコンテンツ圧縮から。
いまのサーバは Apache/2.2.31 とのことなので、ドキュメントを確認します。

> * [mod_deflate – Apache HTTP サーババージョン 2.2](http://httpd.apache.org/docs/2.2/mod/mod_deflate.html)
> * [mod_deflate – Apache HTTP Server Version 2.2](http://httpd.apache.org/docs/2.2/en/mod/mod_deflate.html)

サンプルを参考に圧縮するものだけを指定します。
画像はアップロード前に圧縮済なので指定しません。

“`:.htaccess

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript

“`

設定後。style.css を確認。

“`prettyprinted
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:6829
Content-Type:text/css
Date:Tue, 17 May 2016 13:35:18 GMT
ETag:”99b1c43-6f56-4f13e954d9a80″
Keep-Alive:timeout=5, max=19
Last-Modified:Fri, 31 Jan 2014 06:50:02 GMT
Server:Apache/2.2.31
Vary:Accept-Encoding
“`

mod_deflate については、ベストプラクティスとされている設定も試しましたが、このサーバでは逆に遅くなってしまったためシンプルなものにしました。

## mod_expire

次に mod_expire でキャッシュ制御します。

> * [mod_expires – Apache HTTP サーババージョン 2.2](http://httpd.apache.org/docs/2.2/mod/mod_expires.html)
> * [mod_expires – Apache HTTP Server Version 2.2](http://httpd.apache.org/docs/2.2/en/mod/mod_expires.html)

残念ながらドキュメントのみでは最適な設定が決められなさそうなので、文末のサイトを参考にさせて頂きました。

“`:.htaccess

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 days”
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType text/js “access plus 1 weeks”
ExpiresByType text/javascript “access plus 1 weeks”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType application/javascript “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
ExpiresByType application/pdf “access plus 1 weeks”
ExpiresByType application/x-font-ttf “access plus 1 year”
ExpiresByType application/x-font-woff “access plus 1 year”
ExpiresByType application/x-font-opentype “access plus 1 year”
ExpiresByType application/vnd.ms-fontobject “access plus 1 year”

“`

設定後。style.css を確認。

“`prettyprinted
Accept-Ranges:bytes
Cache-Control:max-age=604800
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:6829
Content-Type:text/css
Date:Tue, 17 May 2016 13:36:30 GMT
ETag:”99b1c43-6f56-4f13e954d9a80″
Expires:Tue, 24 May 2016 13:36:30 GMT
Keep-Alive:timeout=5, max=16
Last-Modified:Fri, 31 Jan 2014 06:50:02 GMT
Server:Apache/2.2.31
Vary:Accept-Encoding
“`

## 結果

外部読込の影響が大きいので、まぁこんな感じですかねぇ。

### After: PageSpeed Insights スコア

– モバイル … 71/100
– PC … 78/100

### After: Response Headers

– DOMContentLoaded: 4.22s
– Load: 9.4ss
– Transferred: 2.2MB

## 参考ソース

> * [.htaccessのmod_deflateでファイル圧縮送信で高速化でSEO対策！ | エス技研](http://blog.s-giken.net/222.html)
> * [.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策！ | エス技研](http://blog.s-giken.net/223.html)
> * [【Apache】Webページの読み込みを高速化する設定(gzip圧縮/Expire) | バシャログ。 | 横浜でWeb制作を行うシーブレインスタッフによる技術情報ブログ](http://bashalog.c-brains.jp/12/08/14-141410.php)
> * [正しく圧縮、素早く送信、mod_deflateの設定方法 | 純規の暇人趣味ブログ](http://jyn.jp/apache-setting-deflate/)
[/markdown]