ERB template syntax in Ruby on Rails - Performance & Optimization

Performance: ERB template syntax

MEDIUM IMPACT

ERB template syntax affects how HTML and Ruby code are combined and rendered on the server, impacting server response time and initial page load speed.

Rendering dynamic content in a Rails view

Ruby on Rails

<% @processed_items = @items.map { |item| expensive_method_call(item) } %>
<% @processed_items.each do |processed| %>
  <%= processed %>
<% end %>

Precomputing data in the controller or before rendering reduces template processing time.

📈 Performance Gainreduces server render time by 50% or more

Rendering dynamic content in a Rails view

Ruby on Rails

<% @items.each do |item| %>
  <%= expensive_method_call(item) %>
<% end %>

Calling expensive methods inside the template causes slow server rendering and delays page delivery.

📉 Performance Costblocks rendering for 100+ ms depending on method complexity

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Expensive Ruby calls inside ERB	N/A (server-side)	N/A	N/A	[X] Bad
Precomputed data passed to ERB	N/A (server-side)	N/A	N/A	[OK] Good

Rendering Pipeline

ERB templates are processed on the server where Ruby code is executed and HTML is generated before sending to the browser.

→Server-side Rendering

→Network Transfer

→Browser Parsing

⚠️ BottleneckServer-side Rendering (template processing and Ruby execution)

Core Web Vital Affected

LCP

ERB template syntax affects how HTML and Ruby code are combined and rendered on the server, impacting server response time and initial page load speed.

Optimization Tips

1Avoid running expensive Ruby code directly in ERB templates.

2Precompute data in controllers or helpers before rendering templates.

3Use caching for partial templates to reduce repeated rendering costs.

Performance Quiz - 3 Questions

What is a common performance issue when using ERB templates in Rails?

A Running expensive Ruby code directly inside the template

B Using HTML tags in the template

C Serving static assets from CDN

D Caching partials

DevTools: Network and Performance panels

How to check: Use Network panel to measure server response time; use Performance panel to check time to first byte and LCP.

What to look for: Look for long server response times indicating slow ERB rendering; fast TTFB and LCP indicate good performance.