, ,

[WP Plugin] WP Super Cache でページの表示速度を改善する

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

サーバ移転後、キャッシュサーバがなくなったので WP Super Cache を投入。

[markdown]
以下、さくらレンタルサーバー スタンダード。
## インストール

管理画面からインストール。

> * [WP Super Cache — WordPress Plugins](https://wordpress.org/plugins/wp-super-cache/)

## 設定

「管理画面 > 詳細」タブから、下記を設定。

キャッシング

– ヒットしたページをキャッシュし、素早くアクセスさせる。 (推奨)
– レガシーなページキャッシング。【mod_rewrite の利用は保留】

その他

– ページを圧縮し、訪問者により速くページを供給する。 (推奨)
– 既知のユーザー向けにはページをキャッシュしない。 (推奨)
– キャッシュリビルド。新しいファイルの生成中にこのサイトの登録ユーザー以外のユーザーに supercache のファイルを供給する。 (推奨)

詳細

– Clear all cache files when a post or page is published or updated.
– 追加のホームページチェック。(非常にまれにホームページのキャッシングを止めることがあります) (推奨)

有効時間とガーベージコレクション

– Cache Timeout: 3600秒
– Scheduler: HH:MM (UTC)【お好みの時間】

## テスト

「管理画面 > 簡易」タブから、キャッシュテスターでテスト。

以下の表示で完了。

“`prettyprinted
両方のページのタイムスタンプがマッチしました !
“`

### キャッシュテスターのエラーについて

なお「キャッシュファイルの提供に PHP を利用する。 (推奨)」と設定時に以下のエラーが表示された。

“`prettyprinted
ページがマッチしません ! タイムスタンプが違うか見つかりません !
“`

エラーメッセージを読むと、WordPress の管理画面にログインしていない別ブラウザでトップページを表示し、HTML ソース最後尾のタイムスタンプを確認。
リロードしてもタイムスタンプが同じであれば、キャッシュが効いているとのこと。

“`prettyprinted

“`

インストール時のディフォルトである「レガシーなページキャッシング。」に変更すると、タイムスタンプが同じであることが確認でき、キャッシュテスターもパスできた。

## 結果

### Apache Bench

いちおう `ab` で WP Super Cache 導入前後を確認。
手元の Mac からでサンプル数も少ないので参考程度だが、速くなってますね。

Before

“`prettyprinted
% ab -c 2 -n 10 https://www.d-wood.com/blog/2013/12/27_5159.html
This is ApacheBench, Version 2.3 <$Revision: 1706008 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.d-wood.com (be patient)…..done
Server Software: Apache/2.2.31
Server Hostname: www.d-wood.com
Server Port: 80
Document Path: /blog/2013/12/27_5159.html
Document Length: 33827 bytes
Concurrency Level: 2
Time taken for tests: 11.453 seconds
Complete requests: 10
Failed requests: 0
Total transferred: 342240 bytes
HTML transferred: 338270 bytes
Requests per second: 0.87 [#/sec] (mean)
Time per request: 2290.680 [ms] (mean)
Time per request: 1145.340 [ms] (mean, across all concurrent requests)
Transfer rate: 29.18 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 70 79 8.0 77 96
Processing: 1656 2182 223.7 2266 2404
Waiting: 1129 1416 219.4 1506 1749
Total: 1752 2261 219.2 2355 2478
Percentage of the requests served within a certain time (ms)
50% 2355
66% 2367
75% 2413
80% 2470
90% 2478
95% 2478
98% 2478
99% 2478
100% 2478 (longest request)
“`

After

“`prettyprinted
% ab -c 2 -n 100 https://www.d-wood.com/blog/2013/12/27_5159.html
This is ApacheBench, Version 2.3 <$Revision: 1706008 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.d-wood.com (be patient)…..done
Server Software: Apache/2.2.31
Server Hostname: www.d-wood.com
Server Port: 80
Document Path: /blog/2013/12/27_5159.html
Document Length: 33950 bytes
Concurrency Level: 2
Time taken for tests: 34.571 seconds
Complete requests: 100
Failed requests: 0
Total transferred: 3428200 bytes
HTML transferred: 3395000 bytes
Requests per second: 2.89 [#/sec] (mean)
Time per request: 691.417 [ms] (mean)
Time per request: 345.708 [ms] (mean, across all concurrent requests)
Transfer rate: 96.84 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 63 72 3.3 73 81
Processing: 521 618 162.4 558 1440
Waiting: 156 183 35.7 176 400
Total: 590 690 162.8 628 1513
Percentage of the requests served within a certain time (ms)
50% 628
66% 654
75% 699
80% 729
90% 848
95% 1083
98% 1351
99% 1513
100% 1513 (longest request)
“`

### 前回との比較

他にもいくつか手を入れたので単純に比較はできないけれども、現状を確認してみた。

WP Super Cache のオプションを「既知のユーザー向けにはページをキャッシュしない。」に一時的に変更後の結果。

> * [Apache: mod_deflate, mod_expire でページの表示速度を改善する【設定編】 | deadwood](https://www.d-wood.com/blog/2016/05/19_8036.html)

After: PageSpeed Insights スコア

– モバイル … 71 -> 76/100
– PC … 78 -> 82/100

After: Response Headers

– DOMContentLoaded: 4.22s -> 3.20s
– Load: 9.4s -> 12.59ss
– Transferred: 2.2MB -> 2.4MB

Load の数値が悪くなった気もするけれども、バナーがあるんでしょうがないかな。

## 追記: 2017/08/17

サイトの HTTPS 化後に再度設定と測定。

“`prettyprinted
WordPress v4.8.1
WP Super Cache v1.5.3
“`

### 設定

`設定>詳細` から設定。

– キャッシング – キャッシュを有効化
– キャッシュ配信方法 – シンプル (推奨)

### Before

“`prettyprinted
% ab -c 2 -n 100 https://www.d-wood.com/blog/2013/12/27_5159.html
This is ApacheBench, Version 2.3 <$Revision: 1757674 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.d-wood.com (be patient)…..done
Server Software: Apache/2.2.34
Server Hostname: www.d-wood.com
Server Port: 443
SSL/TLS Protocol: TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256
TLS Server Name: www.d-wood.com
Document Path: /blog/2013/12/27_5159.html
Document Length: 40099 bytes
Concurrency Level: 2
Time taken for tests: 110.790 seconds
Complete requests: 100
Failed requests: 0
Total transferred: 4054400 bytes
HTML transferred: 4009900 bytes
Requests per second: 0.90 [#/sec] (mean)
Time per request: 2215.807 [ms] (mean)
Time per request: 1107.904 [ms] (mean, across all concurrent requests)
Transfer rate: 35.74 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 66 77 8.8 77 139
Processing: 1243 2137 840.1 1900 5029
Waiting: 1105 2003 824.3 1744 4888
Total: 1317 2214 842.4 1973 5102
Percentage of the requests served within a certain time (ms)
50% 1973
66% 2170
75% 2630
80% 2853
90% 3471
95% 4286
98% 4900
99% 5102
100% 5102 (longest request)
“`

### After

“`prettyprinted
% ab -c 2 -n 100 https://www.d-wood.com/blog/2013/12/27_5159.html
This is ApacheBench, Version 2.3 <$Revision: 1757674 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.d-wood.com (be patient)…..done
Server Software: Apache/2.2.34
Server Hostname: www.d-wood.com
Server Port: 443
SSL/TLS Protocol: TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256
TLS Server Name: www.d-wood.com
Document Path: /blog/2013/12/27_5159.html
Document Length: 40271 bytes
Concurrency Level: 2
Time taken for tests: 18.806 seconds
Complete requests: 100
Failed requests: 0
Total transferred: 4048200 bytes
HTML transferred: 4027100 bytes
Requests per second: 5.32 [#/sec] (mean)
Time per request: 376.125 [ms] (mean)
Time per request: 188.062 [ms] (mean, across all concurrent requests)
Transfer rate: 210.21 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 67 81 12.5 78 148
Processing: 256 295 28.3 289 414
Waiting: 118 154 27.8 147 264
Total: 328 376 31.8 368 483
Percentage of the requests served within a certain time (ms)
50% 368
66% 376
75% 389
80% 399
90% 427
95% 442
98% 483
99% 483
100% 483 (longest request)
“`

キャッシュが効くと「PageSpeed Insights スコア」がこれくらい向上するよう。

– モバイル … 65 -> 82/100
– PC … 75 -> 90/100

## 補遺

> * [Wordpressが加速するWP Super Cacheの設定方法 | ITオフィスサポートとシステム開発|システムガーディアン　AWSクラウド導入|東京都中央区八丁堀](http://sys-guard.com/post-6435/)
> * [WordPressの「キャッシュプラグイン」に関するプロフェッショナルな方々のTwitter話が為になりすぎる](http://rentalhomepage.com/post-8836/)
[/markdown]