Flash messages for user feedback in Flask - Performance & Optimization

Performance: Flash messages for user feedback

LOW IMPACT

Flash messages impact page load speed and interaction responsiveness by adding small DOM updates and rendering changes after user actions.

Displaying user feedback messages after form submission

Flask

from flask import flash, redirect, url_for

@app.route('/submit', methods=['POST'])
def submit():
    flash('Form submitted successfully!')
    return redirect(url_for('form'))

Redirect after flashing avoids re-rendering the form template directly, enabling browser to load fresh page and show flash efficiently.

📈 Performance GainReduces blocking time by 100-300ms; improves LCP and INP

Displaying user feedback messages after form submission

Flask

from flask import flash, redirect, render_template

@app.route('/submit', methods=['POST'])
def submit():
    flash('Form submitted successfully!')
    return render_template('form.html')

Rendering the whole page again with flash messages causes full page reload and blocks rendering.

📉 Performance CostBlocks rendering for 200-500ms depending on page size; increases LCP and INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload with flash	High (full DOM rebuild)	Multiple (full page)	High (full repaint)	[X] Bad
Redirect after flash message	Medium (new page load)	Few (initial load)	Medium	[!] OK
innerHTML append for flash	Medium (subtree rebuild)	Multiple (subtree)	Medium	[X] Bad
DOM appendChild for flash	Low (single node)	Single	Low	[OK] Good

Rendering Pipeline

Flash messages update the DOM and CSS styles, triggering style recalculation, layout, paint, and composite stages in the browser.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to reflows caused by DOM changes for flash messages.

Core Web Vital Affected

INP

Flash messages impact page load speed and interaction responsiveness by adding small DOM updates and rendering changes after user actions.

Optimization Tips

1Avoid full page reloads to show flash messages; use redirects or partial updates.

2Use DOM methods like appendChild instead of innerHTML to add flash messages.

3Minimize DOM changes to reduce layout recalculations and improve interaction speed.

Performance Quiz - 3 Questions

Which pattern improves interaction responsiveness when showing flash messages?

A Using redirect after flashing message

B Rendering flash message directly in template without redirect

C Appending flash message using innerHTML += operator

D Reloading entire page manually

DevTools: Performance

How to check: Record a performance profile while triggering flash messages; look for long tasks and layout events after DOM updates.

What to look for: Check for multiple layout and paint events; fewer and shorter events indicate better performance.