WordPressで作成しているサイトをPageSpeed Insightsで評価するとこんなに改善が。
色んな修正案が出てますね。
この中で今回対応したのは
①ブラウザのキャッシュを活用する
②圧縮を有効にする
③CSSを縮小する
以上の3点です。
ブラウザのキャッシュを活用する
参考にしたサイト
.htaccessに下記の記載をして対応しました。
#cache setting
ExpiresActive On
ExpiresByType text/css "access plus 5 days"
ExpiresByType text/js "access plus 5 days"
ExpiresByType text/javascript "access plus 5 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"
これでひとまずキャッシュの活用はOK!!
圧縮を有効にする
参考にしたサイト
WordPress の最適化/出力の圧縮 - WordPress Codex 日本語版
.htaccessでの対応とPHPでの対応の2種類ありますが、
今回は.htaccessでの対応にしました。
(どちらも手間は掛かりませんが)
.htaccessに下記を追記。
<IfModule mod_deflate.c>
# Insert filters
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
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
これで圧縮への対応は完了!!!
CSSを縮小する
ちょっと調べたりしましたが、なかなか良いのが出てこなくて、
あまり頼りたくなかったプラグインで対応することに。
使用したのは
これを導入して対応。
結果
全て対応した結果
3点だけ上がりました。
そんなに上がらへんかったかな。
でも自分で表示をさせるとやはりキャッシュの影響が大きいのか表示速度はめっちゃ上がったように感じます。
まとめ
.htaccessだけで2項目も改善できました。
これならすぐに対応できます。
しかしまだまだ表示のエラーは出ているので全部解消したいなぁと思ってます。
少しづつ対応していけたらって感じですね。