, , ,

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

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

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

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

2016-05-18_google_01

関連エントリー。

Contents

症状

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

Before: PageSpeed Insights スコア

PageSpeed Insights でチェックしておきます。
こちらのエントリーを対象とします。

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

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

Before: Response Headers

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

style.css を確認。

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 とのことなので、ドキュメントを確認します。

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

.htaccess
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</ifModule>

設定後。style.css を確認。

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 でキャッシュ制御します。

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

.htaccess
<ifModule mod_expires.c>
  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"
</ifModule>

設定後。style.css を確認。

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

参考ソース