Form helpers (form_with) in Ruby on Rails - Performance & Optimization

Performance: Form helpers (form_with)

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how forms are rendered and submitted in Rails applications.

Creating a form that submits data without reloading the page

Ruby on Rails

form_with model: @post, remote: true do |form|
  form.text_field :title
  form.submit 'Save'
end

Submits the form via AJAX, avoiding full page reload and improving interaction speed.

📈 Performance Gainnon-blocking submission, faster INP by 200-400ms

Creating a form that submits data without reloading the page

Ruby on Rails

form_with model: @post, local: true do |form|
  form.text_field :title
  form.submit 'Save'
end

This submits the form with a full page reload, blocking rendering and causing slower interaction feedback.

📉 Performance Costblocks rendering for 200-500ms depending on server response

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
form_with local: true	Standard form elements	Triggers 1 reflow on submit (page reload)	Full page repaint	[X] Bad
form_with remote: true	Standard form elements + JS handlers	No reflow on submit	Partial repaint on response	[OK] Good

Rendering Pipeline

The form_with helper generates HTML forms that can submit data either synchronously or asynchronously. When remote: true is used, JavaScript intercepts the submit event to send data via AJAX, avoiding a full page reload.

→DOM Construction

→JavaScript Execution

→Network Request

→Paint

→Composite

⚠️ BottleneckNetwork Request and JavaScript Execution during synchronous form submission

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how forms are rendered and submitted in Rails applications.

Optimization Tips

1Use remote: true with form_with to submit forms asynchronously and avoid full page reloads.

2Avoid synchronous form submissions to reduce blocking and improve interaction responsiveness.

3Test form submission performance using browser DevTools Performance panel to identify blocking reloads.

Performance Quiz - 3 Questions

What is the main performance benefit of using form_with with remote: true in Rails?

A It disables JavaScript on the page.

B It reduces the size of the HTML form elements.

C It submits the form without a full page reload, improving interaction speed.

D It automatically caches form data in the browser.

DevTools: Performance

How to check: Record a performance profile while submitting the form. Compare the time taken for full page reload vs AJAX submission.

What to look for: Look for long tasks caused by page reload and network blocking in local: true; shorter tasks and no reload in remote: true.