[b]リソース圧縮してブログの高速化を試みてみました!

photo credit: Tambako the Jaguar via photopin cc

前回の記事「PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた!」で当ブログの壊滅的なページスピードの遅さに気づき、なんとか危機的状況から脱することができました!それでもブログの高速化は必須なので改善したことを記録していきます!
photo credit: Tambako the Jaguar via photopin cc

スポンサーリンク

リソースを圧縮して転送サイズを減らしブログを高速化する方法を実行


Simplicity作成者わいひら先生からリプを頂き解決策を教えていただきました!内容はわいひら先生の記事にもありますが.htaccessファイルに下記テキストを追加するだけです。

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

#圧縮の設定
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-font-ttf application/x-font-opentype image/svg+xml

参考:リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)

これをすることによりhtml、css、JavaScriptなどのソースをサーバー側で圧縮して転送サイズを小さくすることで通信料を減らし高速化できるそうです。それではリソース圧縮の前後のサイトスピードを計測してみたので確認してみます!

パソコン

リソース圧縮前
resouce03
リソース圧縮後
resouce02

▲圧縮することにより「82→84」とアップしました!

モバイル

リソース圧縮前
resouce04
リソース後
resouce01

▲圧縮することにより「60→62」とアップしました!

さいごに

多少のスピードアップとはいえ、やらないよりもやった方がいいですよね?このカスタマイズもファイルに追加するだけでオッケーな簡単なやつなので助かりました!わいひら先生の記事で他にも高速化できそうなものがあったので次はそれをやってみます!