以前スマホでアクセスしたときに「若干遅いな」と思ったため、できる範囲で改善しました。

やったこと


背景画像の一部を削除

背景をスライドショーにしているのですが、この背景は6枚設定していました。この画像の合計が750KBあり、データ転送量のうち90%を占めていました。これを4枚に減らし、200KBくらい削りました。

nginxのブラウザキャッシュを有効に

一時期、頻繁にCSSとJSを更新していたというのもあって、ブラウザキャッシュ設定を行っていなかったのですが、設定しました。nginx.confに下記を記述しました。

1
2
3
location ~ .*\.(jpeg|jpg|JPG|gif|png|css|js|ico|woff) {
expires 10d;
}

画像系とcss、JS、あとはフォントのファイルとかを対象にしました。大文字のJPGがあるのはカメラで撮った写真の拡張子が大文字でそのままサーバに上げてるからですね。期限は10日にしてます。これは適当に決めた値なので、特に根拠ないです。

結果は?


サイトのパフォーマンスを計測できるサイト3つ(GTmetrix・Pingdom・PageSpeed Insights)を使って試してみました。

GTmetrix

一つ目はGTmetrixです。このサイトは有名ですね。
カナダのバンクーバーから測定してます。ここは改善前は80前半だったので大きく上がりました。

Pingdom

二つ目はPingdomです。こちらは結果の画面がモダンな感じで見やすくて好きです。ただ、短時間で複数回やるとしばらくの間は前回の結果がキャッシュされていてそれが表示されるっぽいです。
アメリカのサンノゼから測定してます。ここも改善前のスコアは80前半だったので10近く上がりました。

PageSpeed Insights

最後はGoogleのPageSpeed Insightsです。
NeedsWorkと言われてます。なかなか手厳しいですね。ちなみにモバイル版のスコアは66です。

まとめ


ブラウザキャッシュは測定サイトでの評価が大きく上がるみたいですね。ただ、ブラウザのキャッシュなので何回も訪れてくれている人でないと役に立たないですね。アナリティクスを見る感じでは再訪問のユーザーさんは全体で15%くらいなのですが(むしろそんなにいはるのか)効果がでればいいなと思います。海外からで2秒ちょっとなので、国内だと1秒台で表示されるのではないかと思います。もちろん環境によりますが…。

もっと段的に速くしようと思うと、AWSのEC2辺りに移してCloudFront使ってCDNとかやらないとムリでしょうね。まあ、これで十分だと思います。後は背景画像の枚数をもっと削るとかですが、これはやるつもりはないです。また、各測定サイトでのアドバイスだともう少し画像を圧縮しろとかリサイズしろとか表示されてるのですが、気が向いたらやります。

おまけ


アナリティクスのJSがブラウザキャッシュ有効になってないのですが…。Googleさんうぇぇぇ…。Googleさん…。