- 追加された行はこの色です。
- 削除された行はこの色です。
[[WordPressめも]]
WordPressはプラグインも豊富で便利ですが、使っていて遅いな。と思うことが多々あります。~
なんとかならんものかと試してみました。
*HTML, CSS, JavaScriptを縮小する [#yd998ab0]
Autoptimizeプラグインをインストールします。~
[[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|
