Server-Sent Events alternative in Flask - Performance & Optimization

Performance: Server-Sent Events alternative

MEDIUM IMPACT

This concept affects how fast the page can receive live updates and how much CPU and network resources are used during continuous data streaming.

Sending real-time updates from server to client

Flask

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import eventlet
import time

eventlet.monkey_patch()

app = Flask(__name__)
socketio = SocketIO(app)

def send_time():
    while True:
        socketio.emit('time_update', {'time': time.ctime()})
        socketio.sleep(1)
socketio.start_background_task(send_time)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app)

WebSockets use a single persistent connection that allows two-way communication with less overhead and better scalability for many clients.

📈 Performance GainReduces network overhead and CPU usage per client; improves responsiveness and scales better

Sending real-time updates from server to client

Flask

from flask import Flask, Response
import time

app = Flask(__name__)

def event_stream():
    while True:
        yield f'data: The time is {time.ctime()}\n\n'
        time.sleep(1)

@app.route('/stream')
def stream():
    return Response(event_stream(), mimetype='text/event-stream')

Server-Sent Events keep an HTTP connection open and send updates as text streams, which can cause higher CPU usage and more network overhead for many clients.

📉 Performance CostKeeps one HTTP connection per client open, triggering continuous network activity and moderate CPU load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-Sent Events	Low (stream updates as text)	Low (updates usually don't change layout)	Low to Medium (depends on update frequency)	[!] OK
WebSockets	Low (event-driven updates)	Low	Low	[OK] Good

Rendering Pipeline

Server-Sent Events keep an HTTP connection open and stream text data, causing repeated network activity and triggering browser updates. WebSockets establish a persistent, full-duplex connection that reduces repeated HTTP overhead and allows faster message delivery.

→Network

→JavaScript Execution

→Paint

→Composite

⚠️ BottleneckNetwork overhead and JavaScript event handling

Core Web Vital Affected

INP

This concept affects how fast the page can receive live updates and how much CPU and network resources are used during continuous data streaming.

Optimization Tips

1Use WebSockets for two-way real-time communication to reduce network overhead.

2Avoid Server-Sent Events if you need bidirectional communication or many clients.

3Monitor open connections in DevTools Network tab to check streaming performance.

Performance Quiz - 3 Questions

Which method generally uses less network overhead for real-time updates?

A Server-Sent Events with HTTP streaming

B WebSockets with a persistent connection

C Polling with repeated HTTP requests

D Loading updates via full page reloads

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by 'EventStream' or 'WebSocket', observe the open connections and data frames sent over time.

What to look for: Look for continuous HTTP streaming requests for SSE and persistent WebSocket frames; fewer headers and smaller frames indicate better performance.