Stimulus and Turbo (Hotwire) in Ruby on Rails - Performance & Optimization

Performance: Stimulus and Turbo (Hotwire)

MEDIUM IMPACT

This affects page load speed by reducing full page reloads and improves interaction responsiveness by updating only parts of the page.

Updating page content after user interaction without full reload

Ruby on Rails

<button data-action="click->controller#update">Update</button>

import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
  update() {
    fetch('/partial_update')
      .then(response => response.text())
      .then(html => {
        this.element.outerHTML = html
      })
  }
}

Only updates the changed part of the page without full reload, reducing load and rendering cost.

📈 Performance Gainsingle reflow and repaint limited to updated element; avoids full page reload

Updating page content after user interaction without full reload

Ruby on Rails

document.querySelector('#button').addEventListener('click', () => { window.location.reload(); });

Reloading the entire page causes a full reload, blocking rendering and increasing load time.

📉 Performance Costblocks rendering for 500-1000ms depending on page size; triggers full reflow and repaint

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload on interaction	High (entire DOM replaced)	Multiple (full page)	High (full repaint)	[X] Bad
Turbo partial page update	Low (only changed fragments)	Single or few (targeted)	Low (partial repaint)	[OK] Good
Stimulus event-driven update	Low (targeted elements)	Single	Low	[OK] Good

Rendering Pipeline

Turbo intercepts navigation and form submissions to fetch HTML fragments, updating the DOM partially. Stimulus manages event-driven updates without full reloads, minimizing layout recalculations.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to DOM updates

Core Web Vital Affected

LCP, INP

This affects page load speed by reducing full page reloads and improves interaction responsiveness by updating only parts of the page.

Optimization Tips

1Avoid full page reloads; use Turbo to update only changed HTML fragments.

2Use Stimulus to handle user interactions with minimal DOM updates.

3Target specific elements for updates to reduce layout recalculations and repaints.

Performance Quiz - 3 Questions

How does Turbo improve page load performance compared to full page reloads?

A By caching the entire page in the browser

B By fetching and updating only changed HTML fragments without full reload

C By disabling JavaScript during navigation

D By preloading all pages at once

DevTools: Performance

How to check: Record a session while interacting with the page. Look for long tasks and layout shifts during navigation or updates.

What to look for: Check for reduced long tasks and fewer layout recalculations indicating efficient partial updates.