画像/CSS/jsをキャッシュ化して高速化する

Googel AnalyticsのPageSpeed Insightという機能で
画像/CSS/jsをキャッシュ化して高速化対応せよと注意されました。

そこでApacheの.htaccessに以下を追加してキャッシュ化しました。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

参考) http://nelog.jp/wordpress-browser-cache

圧縮を有効化する

次は、不要な画像やcss/jsをgzipせよとの注意です。

これもApacheの.htaccessに以下を追加してキャッシュ化しました。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

参考) http://webkaru.net/wordpress/p……s-deflate/

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

・javascript/cssを非同期に読み込ませる
Autoptimizeというプラグインを入れると非同期に読み込んでくれます。

※非同期通信を行うため、「画像-jsで表示する機能-画像」というレイアウト実装をしている場合に読み込み順が前後しレイアウトが崩れるので注意ください。

参考) http://wp-kappa.com/eliminate-……d-content/