Why forms drive user interaction in Ruby on Rails - Performance Evidence

Performance: Why forms drive user interaction

MEDIUM IMPACT

Forms impact how quickly users can interact with a page and how smoothly the page responds to input.

Handling form submissions with minimal delay

Ruby on Rails

form_with url: '/submit', method: :post, local: true, data: { turbo: false } do |form|
  = form.text_field :name
  = form.submit 'Send'
end

# Submits synchronously with minimal DOM updates

Avoids unnecessary AJAX and page re-render, improving responsiveness.

📈 Performance GainReduces input delay, no blocking re-render

Handling form submissions with minimal delay

Ruby on Rails

form_with url: '/submit', method: :post, local: false do |form|
  = form.text_field :name
  = form.submit 'Send'
end

# Submits via AJAX but triggers full page re-render on response

Triggers full page re-render causing input delay and blocking user interaction.

📉 Performance CostBlocks rendering for 200-300ms on submission response

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
AJAX form with full page re-render	High (many nodes updated)	Multiple reflows	High paint cost	[X] Bad
Synchronous form with minimal DOM update	Low (only form elements)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Form interactions start with user input triggering event listeners, then browser processes input, sends data, and updates DOM based on response.

→Event Handling

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint during form submission response rendering

Core Web Vital Affected

INP

Forms impact how quickly users can interact with a page and how smoothly the page responds to input.

Optimization Tips

1Avoid full page reloads on form submission to reduce input delay.

2Minimize DOM updates triggered by form responses to lower layout and paint costs.

3Batch DOM changes and use synchronous submission when possible for better responsiveness.

Performance Quiz - 3 Questions

Which form submission pattern improves input responsiveness the most?

A Submitting synchronously with minimal DOM updates

B Submitting via AJAX with full page re-render

C Submitting via AJAX with multiple DOM updates

D Submitting with page reload

DevTools: Performance

How to check: Record a performance profile while submitting the form and observe the Main thread activity and Layout events.

What to look for: Look for long tasks blocking input responsiveness and multiple layout or paint events after submission.