WordPressパフォーマンスチューニング（1）

2016/3/7 2017/10/23 PHP, 技術系

この前Google PageSpeed Insightsで本ブログをチェックしたら、
酷い数値になっていたことに気づきました。

これはアカンと思い、即チューニングすることにしました。
先ずチューニング前のスコアは以下です。
パソコン：65
モバイル：55
(その時、記事を書くつもりがなかったので、スクリーンショットを取りませんでした・・・)

ステップ1：JavaScriptとCSSのサイズ圧縮

方法は沢山ありますが、WordPressを使っているので、ここはプラグインで何とかしましょう

今回使うプラグインはAutoptimizeです。
https://wordpress.org/plugins/autoptimize/

このプラグインはHTML、JavaScript、CSSを圧縮することができます。
しかも、設定も簡単ですね
「Optimize HTML Code」「Optimize JavaScript Code」「Optimize CSS Code」
をチェックするだけですね

ステップ2：キャッシュの活用

いろいろWordPress用のキャッシュプラグインはありますが、
ここは手っ取り早い方法でApacheの設定を弄りましょう。
直httpd.confを編集してもいいですが、一応他サイトのことも考えて.htaccessを作って
そこに設定を書きましょうね

・mod_deflate
コンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下します。
そのため導入後のリソースの監視と速度測定が必要になります。ただ、最近の高速なCPUであればどちらかと言えば回線がボトルネックになるため、多くの場合はmod_deflateの導入によって高速化されます。

・mod_expires
キャッシュ（cache）を設定することで同じファイルを何度も読み込む必要がなくなることで、画面表示を高速化するための仕組みを提供する Apacheのモジュールです。

・mod_rewrite
アクセスURLを正規表現で書き換えることができます。リダイレクト処理を行うのに便利なモジュールです。

AddType image/x-icon .ico

<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|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|xsl|js|css|jpe?g|png|gif|ico)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

ステップ3：CDNの活用

CDNとは、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと。
無料なサービスもいくつかあり、今回はJetpackに入っているCDNを使うことにしました。

まずはJetpackをインストールします。
https://ja.wordpress.org/plugins/jetpack/

Jetpackはかなり優秀なWordPress用プラグインですが、今回はCDNに絞って紹介します。
設定はともて簡単、「Photon」という機能をオンにするだけです。