Setting and reading cookies in Flask - Performance & Optimization

Performance: Setting and reading cookies

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by adding HTTP headers and client-side storage operations.

Storing user preferences with cookies

Flask

from flask import Flask, request, make_response
app = Flask(__name__)

@app.route('/')
def index():
    # Store only essential preferences in a compact format
    resp = make_response('Hello World')
    resp.set_cookie('prefs', 'dm=1;fs=l;lang=en')
    return resp

@app.route('/read')
def read():
    prefs = request.cookies.get('prefs')
    return f'Preferences: {prefs}'

Stores only essential data in a compact format, reducing cookie size and header bloat.

📈 Performance GainSaves ~1kb per request/response, improving LCP and reducing network overhead.

Storing user preferences with cookies

Flask

from flask import Flask, request, make_response
app = Flask(__name__)

@app.route('/')
def index():
    resp = make_response('Hello World')
    resp.set_cookie('prefs', 'darkmode=true;fontsize=large;language=en;extra=unused')
    return resp

@app.route('/read')
def read():
    prefs = request.cookies.get('prefs')
    return f'Preferences: {prefs}'

Stores large cookie strings with unnecessary data, increasing HTTP header size and slowing down requests.

📉 Performance CostAdds ~1-2kb to each request and response header, increasing LCP and network latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large cookies with unnecessary data	None	0	Minimal	[X] Bad
Compact cookies with essential data only	None	0	Minimal	[OK] Good

Rendering Pipeline

Cookies are sent in HTTP headers with requests and responses, affecting network transfer and browser parsing before rendering.

→Network Transfer

→Style Calculation

→Layout

⚠️ BottleneckNetwork Transfer due to increased header size from large cookies

Core Web Vital Affected

LCP

This concept affects page load speed and interaction responsiveness by adding HTTP headers and client-side storage operations.

Optimization Tips

1Keep cookies as small as possible to reduce HTTP header size.

2Avoid storing unnecessary data in cookies to improve LCP.

3Defer expensive processing based on cookies to improve INP.

Performance Quiz - 3 Questions

How do large cookies affect page load performance?

A They increase HTTP header size, slowing down network transfer and LCP.

B They reduce the number of HTTP requests needed.

C They improve browser caching efficiency.

D They speed up JavaScript execution.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, select a request, and check the 'Request Headers' and 'Response Headers' sections for cookie size.

What to look for: Look for large 'Cookie' and 'Set-Cookie' header sizes which indicate heavy cookie payloads slowing down requests.