Layouts and content_for in Ruby on Rails - Performance & Optimization

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

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

A It increases the number of HTTP requests.

B It reduces HTML duplication and speeds up server rendering.

C It delays JavaScript execution on the page.

D It 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.

Practice

1. What is the main purpose of using content_for in Rails layouts?

easy

A. To define the main layout file for the application

B. To insert specific content into named sections of a layout

C. To create a new controller action

D. To style the page with CSS

Solution

1. Step 1: Understand the role of layouts

   Layouts provide a shared structure like headers and footers for pages.

2. Step 2: Understand content_for usage

   content_for allows views to add content to specific named areas in the layout.

3. Final Answer:

   To insert specific content into named sections of a layout -> Option B

4. Quick Check:

   content_for inserts content into layout spots [OK]

Hint: Remember: content_for fills layout placeholders [OK]

Common Mistakes:

• Confusing content_for with layout definition
• Thinking it styles pages directly
• Mixing it up with controller actions

2. Which of the following is the correct syntax to define a content block named :sidebar in a Rails view?

easy

A. <%= yield :sidebar %>

B. <% content_for :sidebar = 'Sidebar content' %>

C. <% sidebar_content 'Sidebar content' %>

D. <%= content_for :sidebar do %>Sidebar content<% end %>

Solution

1. Step 1: Recall content_for block syntax

   The correct way is to use content_for :name do ... end with ERB tags.

2. Step 2: Check each option

   <%= content_for :sidebar do %>Sidebar content<% end %> uses <%= content_for :sidebar do %> ... <% end %> which is correct syntax. <% content_for :sidebar = 'Sidebar content' %> tries assignment incorrectly. <%= yield :sidebar %> is for yielding, not defining. <% sidebar_content 'Sidebar content' %> is invalid.

3. Final Answer:

   <%= content_for :sidebar do %>Sidebar content<% end %> -> Option D

4. Quick Check:

   Use content_for :name do ... end to define content [OK]

Hint: Use content_for :name do ... end to define blocks [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Confusing yield with content_for
• Missing ERB tags or using wrong ones

3. Given the layout code:

<html>
<body>
  <header><%= yield :header %></header>
  <main><%= yield %></main>
  <footer><%= yield :footer %></footer>
</body>
</html>

And the view code:

<%= content_for :header do %>Welcome Header<% end %>
Main content here
<%= content_for :footer do %>Footer Info<% end %>

What will be rendered inside the <main> tag?

medium

A. Footer Info

B. Welcome Header

C. Main content here

D. Nothing

Solution

1. Step 1: Understand yield usage in layout

   yield without arguments renders the main view content. yield :header and yield :footer render named content blocks.

2. Step 2: Identify main content in view

   The main content is the part outside content_for blocks: <p>Main content here</p>.

3. Final Answer:

   <p>Main content here</p> -> Option C

4. Quick Check:

   Main content = yield without args = <p>Main content here</p> [OK]

Hint: Main content is outside content_for, shown by plain yield [OK]

Common Mistakes:

• Thinking content_for blocks appear in main yield
• Confusing named yields with main yield
• Ignoring content outside content_for

4. You have this layout snippet:

<header><%= yield :title %></header>

And this view code:

<% content_for :title = 'Page Title' %>

Why does the title not appear in the header when rendering?

medium

A. Because content_for must use a block, not assignment

B. Because yield is missing in the layout

C. Because the layout file is not linked properly

D. Because content_for only works in controllers

Solution

1. Step 1: Check content_for syntax in view

   The code uses assignment content_for :title = 'Page Title', which is invalid syntax.

2. Step 2: Correct usage of content_for

   content_for requires a block: content_for :title do 'Page Title' end or content_for(:title) { 'Page Title' }.

3. Final Answer:

   Because content_for must use a block, not assignment -> Option A

4. Quick Check:

   content_for needs blocks, not assignment [OK]

Hint: Always use blocks with content_for, not assignment [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Forgetting to yield named content in layout
• Assuming content_for works in controllers

5. You want to create a layout that shows a custom page title if provided, or a default title otherwise. Which layout code correctly uses content_for and yield to achieve this?

hard

A. <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title>

B. <title><%= yield(:title) || 'Default Title' %></title>

C. <title><%= content_for(:title) || 'Default Title' %></title>

D. <title><%= yield :title if content_for?(:title) %></title>

Solution

1. Step 1: Understand content_for? and yield

   content_for?(:title) checks if content was provided. yield(:title) outputs it.

2. Step 2: Check each option for fallback logic

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> uses a ternary to show yield(:title) if present, else 'Default Title'. <title><%= yield(:title) || 'Default Title' %></title> uses yield(:title) || 'Default Title' but yield(:title) returns nil if no content, so fallback works but less explicit. <title><%= content_for(:title) || 'Default Title' %></title> uses content_for(:title) which returns nil and does not output content. <title><%= yield :title if content_for?(:title) %></title> only yields if content exists but shows nothing otherwise.

3. Final Answer:

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> -> Option A

4. Quick Check:

   Use content_for? to check, then yield or fallback [OK]

Hint: Use content_for?(:name) to check before yielding [OK]

Common Mistakes:

• Using content_for instead of content_for? for checking
• Assuming yield(:name) returns empty string instead of nil
• Not providing fallback content