Google PageSpeedが終了するよという情報が流れてきて、初めてGoogle PageSpeedを知った。どんなものかと思っていたら、URLを入力したら高速化できていない部分を指摘してくれるものだった。うわー、もっと早く知っていれば…。私が開発に携わっているサービスも徐々に表示速度が遅くなってきていたので、これを参考に高速化を行ってみた。

ちなみに2015年5月12日現在、本番環境はHerokuでプログラムはRails4.2でできている。

Google PageSpeed

静的リソースのキャッシュの有効期限を設ける

PageSpeedで怒られた中でズラーッと並んでいたのがこれだったので、とりあえず設定することに。

参考ページ: qiita: herokuでブラウザのキャッシュを利用する

config/environments/production.rbに以下を設定。

  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.static_cache_control = "public, max-age=31536000"
  config.assets.compress = true
  config.assets.compile = false
  config.assets.digest = true

追加したのは2行目と3行目だが、2行目だけでもいいかもしれない。

これをcommitして、Herokuのstaging環境にデプロイ。そしてPageSpeedでチェックしようとしたら、ステージングにはBasic認証をつけていたのだった…。テストできんやん…と思っていたら、Chrome Extensionを入れるとできる模様。

Chrome Extension: PageSpeed Insights

そして分析したところ、警告がでなくなった。有効期限がなかったらずっとキャッシュするかと思ってたんですが、違うんですかね…。

htmlのgzip圧縮

htmlが圧縮されてないよと言われた。静的ファイルは圧縮してるんだけれど、Railsが出力するhtmlは圧縮できてなかったのか…と思い、調べたところ、以下の参考ページを見つけた。

herokuで静的ファイルをgzip圧縮して配信する

これに倣って、heroku-deflaterを導入してみた。

Gemfileに追加。

group :production do
  gem 'rails_12factor'
  gem 'heroku-deflater'
end

そしてインストール。

bundle install

そしてcommit。Herokuのステージング環境にデプロイして何回か時間を計測。

これを行ったら、明らかに速くなった。ここまでで、完全に読み込みが終わるまでに5〜6秒くらいかかっていたのが、1秒〜3秒くらいになった。

画像のリサイズ

PageSpeedに指摘された。大きい画像をリサイズして読み込んでいるところがあったので、それを読み込むサイズにリサイズしておいた。やはり文字を削るよりも素材を削るほうが容量は減る。今度でいいわーと思っていて忘れていたのを思い出させてくれた。ありがたい、ありがたい。

まとめ

キャッシュの有効期限や、出力するhtml自体をgzip圧縮するというのは完全に見落としていた…。JSやCSSなどの静的ファイルの圧縮はできていたので、もう大丈夫だろうと思っていたが、まだまだあるものだ。