WordPressめも

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

HTML, CSS, JavaScriptを縮小する

Autoptimize プラグインをインストールします。
プラグインを有効化するだけでなく、設定が必要になります。

Webフォントの利用を停止する

Googleが提供しているWebフォントの利用を停止することで速度向上が期待できます。
Disable Google Fonts プラグインをインストールします。

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

応答速度の向上が期待されるので、Remove Query Strings From Static Resources プラグインをインストールします。

画像を最適化する

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

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

キャッシュを有効化する

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"

コンテンツを圧縮する

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系になります。

対策結果

上記の対策の結果、PageSpeed Insightsでのポイントは以下のように向上しました。

デバイス対策前対策後
モバイル55/10060/100
パソコン67/10075/100

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-23 (土) 18:51:04 (1302d)