Ruby on Railsframework~8 mins

Layouts and content_for in Ruby on Rails - Performance & Optimization

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Performance: Layouts and content_for

MEDIUM IMPACT

This affects the server-side rendering speed and the size of the HTML sent to the browser, impacting initial page load time.

Injecting page-specific content into a shared layout

Ruby on Rails

<!-- layout.html.erb -->
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <%= yield %>
    <%= yield :sidebar %>
  </body>
</html>

<!-- page.html.erb -->
<h1>Welcome</h1>
<div>Content here</div>
<% content_for :sidebar do %>
  <div>Sidebar content</div>
<% end %>

Separates sidebar content using content_for, allowing layout to render it only if present, reducing duplication.

📈 Performance GainSmaller HTML output and simpler rendering logic, improving server response and LCP.

Injecting page-specific content into a shared layout

Ruby on Rails

<!-- layout.html.erb -->
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <%= yield %>
    <%= yield :sidebar %>
  </body>
</html>

<!-- page.html.erb -->
<h1>Welcome</h1>
<div>Content here</div>
<div>Sidebar content</div>

Sidebar content is duplicated in the page template instead of using content_for, causing layout and content mixing.

📉 Performance CostIncreases HTML size and server rendering complexity, causing slower response times.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using content_for to inject sidebar content	Minimal extra DOM nodes	No additional reflows	No extra paint cost	[OK] Good
Duplicating sidebar content in page templates	More DOM nodes due to duplication	Potential reflows if layout changes	Higher paint cost due to larger HTML	[X] Bad

Rendering Pipeline

Rails processes layouts and content_for during server-side rendering to assemble the final HTML before sending it to the browser.

→Server Rendering

→HTML Generation

⚠️ BottleneckServer Rendering when layouts and content_for are misused causing redundant HTML or complex template logic.

Core Web Vital Affected

LCP

This affects the server-side rendering speed and the size of the HTML sent to the browser, impacting initial page load time.

Optimization Tips

1Use content_for to separate optional content from main layout to avoid duplication.

2Keep layouts simple and avoid mixing page-specific content directly in them.

3Smaller HTML responses from clean layouts improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

Test your performance knowledge

How does using content_for in Rails layouts affect page load performance?

AIt increases the number of HTTP requests.

BIt reduces HTML duplication and speeds up server rendering.

CIt delays JavaScript execution on the page.

DIt causes more CSS reflows in the browser.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect the HTML response size and content.

What to look for: Look for smaller HTML size and absence of duplicated sidebar content in the response to confirm efficient layout usage.