Performance: Flash messages
MEDIUM IMPACT
Flash messages affect page load speed and user interaction responsiveness by adding DOM elements and triggering reflows when shown or hidden.
0
0
Flash messages in Ruby on Rails - Performance & Optimization
Displaying flash messages on page load and after user actions
Ruby on Rails
Render flash messages conditionally only when present, and use CSS transitions with opacity for showing/hiding without layout changes.
Reduces DOM nodes and avoids layout thrashing by not toggling display properties that affect layout.
📈 Performance GainSingle reflow on flash message insertion; smooth opacity transitions avoid layout recalculations
Displaying flash messages on page load and after user actions
Ruby on Rails
In the layout, always render flash divs with content even if empty, and use JavaScript to show/hide them by toggling display styles on every page load.
This causes unnecessary DOM nodes and style recalculations on every page load, triggering multiple reflows and slowing interaction responsiveness.
📉 Performance CostTriggers 2-3 reflows per page load; increases DOM size unnecessarily
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Always render flash divs and toggle display | High (extra nodes always present) | Multiple reflows per page load | High (layout changes trigger paint) | [X] Bad |
| Render flash divs conditionally and use opacity transitions | Low (only when needed) | Single reflow on insertion | Low (opacity changes only trigger paint/composite) | [OK] Good |
Rendering Pipeline
Flash messages add or remove DOM elements and change styles, which flow through style calculation, layout, paint, and composite stages.
→Style Calculation
→Layout
→Paint
→Composite
⚠️ BottleneckLayout stage is most expensive due to toggling display properties causing reflows.
Core Web Vital Affected
INP
Flash messages affect page load speed and user interaction responsiveness by adding DOM elements and triggering reflows when shown or hidden.
Optimization Tips
1Render flash messages only when they have content to avoid extra DOM nodes.
2Use opacity and visibility CSS properties to show/hide flash messages instead of display toggling.
3Avoid frequent DOM updates for flash messages to keep interaction responsiveness high.
Performance Quiz - 3 Questions
Test your performance knowledge
What causes the most performance cost when showing flash messages?
DevTools: Performance
How to check: Record a performance profile while loading a page with flash messages. Look for layout and paint events triggered by flash message DOM changes.
What to look for: Multiple layout events indicate costly reflows; smooth paint/composite with minimal layout means good performance.