WordPressの速度向上の編集

[[WordPressめも]]

WordPressはプラグインも豊富で便利ですが、使っていて遅いな。と思うことが多々あります。~
なんとかならんものかと試してみました。

*HTML, CSS, JavaScriptを縮小する [#yd998ab0]

[[Autoptimize:https://ja.wordpress.org/plugins/autoptimize/]] プラグインをインストールします。~
プラグインを有効化するだけでなく、設定が必要になります。

*Webフォントの利用を停止する [#s5909be5]

Googleが提供しているWebフォントの利用を停止することで速度向上が期待できます。~
[[Disable Google Fonts:https://ja.wordpress.org/plugins/disable-google-fonts/]] プラグインをインストールします。

*CSSやJavaScriptファイルに付与されている文字列を削除する [#w49cefbb]

応答速度の向上が期待されるので、[[Remove Query Strings From Static Resources:https://wordpress.org/plugins/remove-query-strings-from-static-resources/]] プラグインをインストールします。

*画像を最適化する [#f561492d]

画像をロスレス圧縮すると転送量を抑えることができるため、速度向上が期待できます。~
ロスレス圧縮とは可逆圧縮とも言われ、圧縮しても展開しても同じデータ量になるというものです。

[[EWWW Image Optimizer:https://ja.wordpress.org/plugins/ewww-image-optimizer/]] プラグインをインストールします。~
次回からの画像アップロードで自動的に最適化されます。~
アップロード済みのものは メディア - Bulk Optimize から一括で最適化処理を実行することができます。

*キャッシュを有効化する [#vf02da53]

WEBサーバにApacheを利用している場合、キャッシュを有効化します。

mod_expires.so が有効になっていることを確認して、.htaccess にキャッシュするコンテンツタイプと期限を記述します。

ExpiresActive On
 ExpiresDefault "access plus 30 minutes"
 ExpiresByType text/html "access plus 10 seconds"
 ExpiresByType image/jpg "access plus 7 days"
 ExpiresByType image/jpeg "access plus 7 days"
 ExpiresByType image/gif "access plus 7 days"
 ExpiresByType image/png "access plus 7 days"
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType application/pdf "access plus 1 month"
 ExpiresByType text/x-javascript "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/x-shockwave-flash "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 year"
 ExpiresByType image/x-icon "access plus 1 month"

*コンテンツを圧縮する [#kfc70922]

WEBサーバにApacheを使用している場合、コンテンツを圧縮して高速化を図ります。

mod_filter.so と mod_deflate.so が有効になっていることを確認して .htaccess に圧縮するコンテンツタイプを記述します。

FilterDeclare Compression CONTENT_SET
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='text/html'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='text/xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='text/css'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='text/plain'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='image/svg+xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/xhtml+xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/rdf+xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/rss+xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/atom+xml'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='text/javascript'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/javascript'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/x-javascript'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/x-font-ttf'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='application/x-font-otf'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='font/truetype'"
 FilterProvider Compression DEFLATE "%{CONTENT_TYPE}='font/opentype'"
 FilterChain Compression

AddOutputFilterByTypeによる記述は非推奨となっているようです。~
またFilterProviderの記述方法はApache2.2系と2.4系で異なるようなので注意が必要です。~
上記の記述は2.4系になります。

*対策結果 [#d8e45432]

上記の対策の結果、[[PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/]]でのポイントは以下のように向上しました。

|~デバイス|~対策前|~対策後|
|モバイル|55/100|60/100|
|パソコン|67/100|75/100|

タイムスタンプを変更しない