ツクリンクの表示速度を改善するためにやったこと

こんにちは。ハンズシェアでマネージャー/エンジニアをやっているkyonsukeです😀

今日は弊社プロダクト「ツクリンク」で行った表示速度改善について書き残しておきます。

速度改善の結果

2017年10月から12月末にかけてツクリンクでは集中的に速度改善に取り組み、結果として5秒前後だった平均読み込み時間が現在3.2秒前後まで短縮することに成功しました。またGooglePageSpeedInsightのスコアも以前はPoorだったのがNeedsWorkもしくはGoodまで改善することが出来ました👍

ツクリンクの環境

  • Rails 5系
  • Ruby 2.3系
  • インフラ周りはHerokuを利用
  • 画像配信はS3、CDNはCloudFront

ステップ1 サーバースペック変更と速度調査

取り急ぎまずはサーバーのスペック変更を行いました。この辺りの変更がコンソールから簡単に行えるのがHerokuの利点ですね。このスペックを切り替えながら速度を取り、最適なスペックに合わせることで0.2秒ほどの短縮が出来ました。

次にページが描画されるまで、どこに時間がかかっているかを調査しました。

http://www.webpagetest.org/

https://gtmetrix.com/

これらWebツールを使い、ツクリンクではトータル5秒のうちレスポンスが返るまでは1秒ほどで、残りはフロントということが分かり、影響幅が大きいフロントから改修していくことにしました。

ステップ2 改修

基本的にはGooglePageSpeedInsightで指摘される事項と、HTML構造及び先のツールでボトルネックになっている部分を探し、手を入れていきました。

  • JSの遅延ロード設定(async)
  • こちら側から配信している画像のHTTP/2による並列配信
    • CDNにCloudFrontを使っている場合、HTTP/2の設定をすることで並列配信が可能になりました
  • ユーザーがS3にアップした画像のHTTP/2による並列配信
    • S3とCloudFrontが連動できたので、設定後、画像の配信先ドメインをCloudFrontにすることで並列配信が可能になりました
  • 画像の遅延ロード設定(lazysizes)
  • ユーザーがアップした画像の自動圧縮
  • ファイルサイズが大きく、圧縮されていない外部のJSを内部に入れ込み圧縮して配信
  • ユーザーがアップした画像を表示形式に合わせて適切な画像サイズを使うように
  • FaceBookの旧Likeboxを削除
  • WebFontのFontAwesomeを遅延ロードするように

こうやって上げてみると、細かな改修を積み重ねていった形になりますね。

この中で速度的な影響で大きかったのはJSの遅延ロード設定で0.4秒前後変わっています。基本的なところですが、そういったところこそが極めて重要であるということがよく分かる一例ですね。

HTTP/2の並列配信は今どきな感じがあり、大きな改善があるかもと思いましたが、速度にすると0.2秒とかでした。恐らくツクリンクではそこまで画像を使ってない関係で、大きな影響とはならなかったのかもしれません。

終わりに

画像周りとJSの最適化を積み重ねていくことでじわじわと効果が出て、トータルで大きな改善となり、2秒近く短縮できました👍

今後も定期的に速度をウォッチしつつ、Railsのデフォルト仕様だとCSS、JSを全ページ分まとめてしまうので、これを切り分けたり、CDNやRailsによるキャッシュ周りをより活用したりと改善を積み重ねていこうと思っています🐳

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です