遅延ロードとは

基本的にwebアプリは表示するデータを読み込んでからページを表示します。
しかしそれだと重いデータを取得・表示する場合、ページの表示速度が落ちて重たい動作になります。
なので先に軽い部分だけを読み込みそのページに移動してから重いデータを読み込むことで
すべてを表示するまでの時間は変わらない（むしろ少し落ちる）がページの移動速度を大幅に上げることができます。
体感上はかなりサクサクした動作になります。

↓ツイッターの遅延ロード

実装

gemfile

gem 'render_async'

を書きbundle

次にrenderを書き直します。

変更前：

index.html

<%= render "data", posts:@posts %>

これを

index.html

<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>

このようにする。

次にルーティング

routes

get "data", to: "posts#data", as: "data"
# ↓パラメーターが必要な場合
get "data_user/:id", to: "posts#data_user", as: "data"

controller

  def index
    #@posts = Post.all
  end

  def data
   @posts = Post.all
   render partial: "data", locals: {posts:@posts}
  end

  def data_user
    @user = User.find_by(name: params[:id])
    @posts = @user.posts.all
    
    render partial: "data_user", locals: {posts:@posts}
  end

最後はレイアウトに

application.html.erb

<%= content_for :render_async %>

を追加。
これだけで遅延ロードが完成します。

turbolinksを使用している場合

このままだと時々表示されない場合があります。

<%= render_async data_path, html_options: { 'data-turbolinks-track': 'reload' } %>

html_options: { 'data-turbolinks-track': 'reload' }を追加して
config/initializersにrender_async.rbを作りましょう

render_async.rb

RenderAsync.configure do |config|
  config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end

jqueyを使う

kaminariやjscrollで無限スクロールなどを実装している場合、これをしないと動きません。

config/initializers/render_async.rb

RenderAsync.configure do |config|
  config.jquery = true
end

まとめ

遅延ロードって大きなサービスだと結構使われているのに日本語の情報が少なくて困ったので書きました。
体感上の動作速度がかなり変わるのでぜひやってみてください。

宣伝

AmmotというSNSを作りました。
文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能な自由なSNSです。
マークダウンにも対応しているので皆さん大好きなソースコードもきれいに載せれます。
ぜひ使ってみてください。

僕のツイッターアカ
https://twitter.com/yamada1531