Lazy-loading Turbo Frames for performance

5377 views

                  <article class="post">
  <h1><%= @post.title %></h1>
  <%= simple_format @post.body %>

  <!-- Lazy load comments when scrolled into view -->
  <%= turbo_frame_tag "post_#{@post.id}_comments",
      src: post_comments_path(@post),
      loading: :lazy do %>
    <div class="text-center py-8">
      <div class="spinner"></div>
      <p class="text-gray-500">Loading comments...</p>
    </div>
  <% end %>

  <!-- Lazy load related posts -->
  <%= turbo_frame_tag "related_posts",
      src: related_posts_path(@post),
      loading: :lazy do %>
    <div class="h-64 bg-gray-100 animate-pulse"></div>
  <% end %>
</article>

                  class CommentsController < ApplicationController
  def index
    @post = Post.find(params[:post_id])
    @comments = @post.comments.includes(:author).order(created_at: :desc)

    # Return just the frame content, no layout
    render layout: false
  end
end

                  <%= turbo_frame_tag "post_#{@post.id}_comments" do %>
  <div class="comments">
    <h2 class="text-xl font-bold mb-4"><%= @comments.count %> Comments</h2>

    <div class="space-y-4">
      <%= render @comments %>
    </div>
  </div>
<% end %>

Loading everything on initial page render slows perceived performance. Lazy-loaded Turbo Frames defer expensive content until it's needed, keeping initial page loads fast. Setting loading='lazy' with a src attribute tells Turbo to fetch content when the frame enters the viewport. I use this for comment sections, user activity feeds, or related content that's below the fold. The server endpoint returns just the frame content, not the full page layout. Users on slow connections get the critical content first, then secondary content streams in as they scroll. The pattern also works for click-to-reveal scenarios where loading='lazy' is omitted but src is still provided.

Jordan Lee

More from Jordan Lee

Lazy-loading Turbo Frames for performance

0 Comments

More from Jordan Lee