遅延ロードさせてWebアプリを高速化する

2021-05-10T22:06:08+09:00

遅延ロードとは

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

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

実装

gem 'render_async'

を書きbundle

次にrenderを書き直します。

変更前：

```erb:index.html
<%= render "data", posts:@posts %>


これを

```erb:index.html
<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>

このようにする。

次にルーティング

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

  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

最後はレイアウトに

```erb:application.html.erb
<%= content_for :render_async %>


を追加。
これだけで遅延ロードが完成します。
![スクリーンショット 2021-05-10 192747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e7e53d4b-7114-b09c-cf2e-a54ec754d08c.png)


# 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

まとめ

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

宣伝

https://ammot.net/

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

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

「render_async」の記事 - Crieit

遅延ロードさせてWebアプリを高速化する

遅延ロードとは

実装

jqueyを使う

まとめ

宣伝