前回の記事「PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた!」で当ブログの壊滅的なページスピードの遅さに気づき、なんとか危機的状況から脱することができました!それでもブログの高速化は必須なので改善したことを記録していきます!
photo credit: Tambako the Jaguar via photopin cc
リソースを圧縮して転送サイズを減らしブログを高速化する方法を実行
@designlikes11 カードしか調べてなかったので、タイルがここまで悪いと思っていませんでした。JavaScriptで動的に表示されるからなのかも。タイルでもリソースの圧縮もすれば、もう少しはよくなるかもしれません。http://t.co/cwtRvEsmRC
— わいひら@寝ログ (@MrYhira) 2014, 11月 21
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
これをすることによりhtml、css、JavaScriptなどのソースをサーバー側で圧縮して転送サイズを小さくすることで通信料を減らし高速化できるそうです。それではリソース圧縮の前後のサイトスピードを計測してみたので確認してみます!
パソコン
リソース圧縮前
リソース圧縮後
▲圧縮することにより「82→84」とアップしました!
モバイル
リソース圧縮前
リソース後
▲圧縮することにより「60→62」とアップしました!
さいごに
多少のスピードアップとはいえ、やらないよりもやった方がいいですよね?このカスタマイズもファイルに追加するだけでオッケーな簡単なやつなので助かりました!わいひら先生の記事で他にも高速化できそうなものがあったので次はそれをやってみます!
コメント