Active Storageを用いた画像読み込みが遅い問題を解決（リサイズとJOINが原因でした）

Active Storageを使って画像投稿をしていたら、ページ読み込みが遅くなる問題が発生しました。それの解決策です。

##画像のリサイズがサーバー負荷になっている
画像をアップロードしてからサーバーでリサイズをしていると、サーバー負荷がかかって読み込み速度が遅くなってしまいます。
つまり、画像を送信する前に、フロント側でjsやMiniMagickを使ってリサイズをするのが理想的です。
個人的にはJSよりもMiniMagickを使う方が開発が早くておすすめです。

posts_controller.rb

  def create    
    @post = current_user.posts.build(post_params)
    if @post.images.present?
      resize_image(800,800)　
      @post.images.attach(params[:post][:images])
    end
       #--------省略-------
   end

  def resize_image(width = 1280,height = 1280)
    if post_params[:images].present?
        post_params[:images].each do |image|
          image.tempfile = ImageProcessing::MiniMagick.source(image.tempfile).resize_to_fit(width, height).call
      end
    end   
  end

ちなみに、このようにViewでリサイズをする方法がよく記載されていますが、自分は読み込み速度が遅くなりました。

view.rb

<%= image_tag user.avatar.variant(resize: "100x100") %>

参考：https://railsguides.jp/active_storage_overview.html

##データモデルで勝手にjoinされている
私の場合は、Tagモデルで外部キー制約をつけていたせいでActive Storageの関連モデルと勝手にJOINされていました。JOINしていると、情報量が多くなりすぎてサーバー負荷が大きくなってしまいます。
これについては、binding pryを使って、データをどのようにとってきてるのか確認しましょう。

##おわり
初心者で至らない点が多々あると思います。間違えていたり、より良い方法がある場合は気軽にご連絡ください！！楽しいプログラミングライフを⭐️

参考文献：
https://vitobotta.com/2020/09/24/resize-and-optimise-images-on-upload-with-activestorage/
https://qiita.com/komakomako/items/8efd4184f6d7cf1363f2
https://railsguides.jp/active_storage_overview.html