はしばみあきら blog

プログラミングアウトプットするブログ。202010スタート

トップ > Ruby on Rails > 【RailsでLINEを作る】トーク内容の画面表示速度改善

【RailsでLINEを作る】トーク内容の画面表示速度改善

Ruby on Rails

友だちをクリックすると内容一覧を表示させるのですが、速度が恐ろしくかかる問題が発生しました

結論からすると

  • N+1問題の改善
  • eachの中のrender

この２つの影響で読み込み速度がかなり遅くなっていました

今回修正した部分をつらつらと書いていきます

トーク内容の画面表示速度改善

まず、何もない状態での速度です

f:id:hashibamiakira:20201028162813p:plain

表示するまでに1134msとなっています

1秒でも、体感としては長く感じます

N+1を解決します

ルームに紐づくトークテーブルは現状全て取得できていたのですが、そのトークのユーザーを表示させるために毎回SQLにアクセスしていました

each文を変更します

_user-talk-index.html.slim

talks.includes(:user).each do |talk|

これでユーザーの情報も全て取得します

これでviewを読み込みます

f:id:hashibamiakira:20201028163257p:plain

533msと、約半分になりました

しかしトーク内容がどんどん増えると時間は伸びます

テストで150件ほどトークを送ってみました

f:id:hashibamiakira:20201028163354p:plain

1895msと、ほぼ2秒かかっています

ラインで友達からメッセージが来て開こうとするたびにこれだけ時間がかかるとユーザビリティが悪い...

部分テンプレートを呼びまくっているので、部分テンプレートをやめて直書きにします

= render partial: 'users/attachment', locals: { user: talk.user}
  .talk = talk.talk
  .time
    span = talk.created_at.strftime('%H:%M')

⇩

  .user-talk-index__talks--left
    - if user.profile_image.attached?
       = image_tag(user.profile_image)
    - else
       = image_tag('usagi.jpg')
    .talk = talk.talk
    .time
       span = talk.created_at.strftime('%H:%M')

これで読み込み

f:id:hashibamiakira:20201028164015p:plain

198ms!!

each文の中になるべくrenderは書かないようにしようという今日の教訓でした

またボチボチ更新していきます