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.

Practice

1. What is the main purpose of using cookies in a Flask web application?

easy

A. To increase the speed of the Flask server

B. To run server-side scripts automatically

C. To change the HTML structure of a webpage

D. To store small pieces of data on the user's browser for later use

Solution

1. Step 1: Understand what cookies do

   Cookies store small data on the user's browser to remember information like login status or preferences.

2. Step 2: Identify the correct purpose in Flask context

   Flask uses cookies to save data on the client side, not to run server scripts or change server speed.

3. Final Answer:

   To store small pieces of data on the user's browser for later use -> Option D

4. Quick Check:

   Cookies save data on browser = C [OK]

Hint: Cookies save data on browser, not server tasks [OK]

Common Mistakes:

• Thinking cookies run server scripts
• Confusing cookies with server speed optimization
• Believing cookies change webpage HTML structure

2. Which of the following is the correct way to set a cookie named user_id with value 123 in Flask?

easy

A. response.cookies.set('user_id', 123)

B. response.set_cookie('user_id', '123')

C. request.set_cookie('user_id', '123')

D. request.cookies.set('user_id', '123')

Solution

1. Step 1: Identify the correct method to set cookies

   Cookies are set on the response object using set_cookie method.

2. Step 2: Check the value type and object used

   The value must be a string, so '123' is correct. Also, setting cookies on request object is invalid.

3. Final Answer:

   response.set_cookie('user_id', '123') -> Option B

4. Quick Check:

   Use response.set_cookie with string value = A [OK]

Hint: Use response.set_cookie with string values [OK]

Common Mistakes:

• Using request object to set cookies
• Passing integer instead of string as cookie value
• Calling set_cookie on request.cookies

3. Given this Flask route code, what will be the output when accessing /get_cookie after setting the cookie username to alice?

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

@app.route('/set_cookie')
def set_cookie():
    resp = make_response('Cookie Set')
    resp.set_cookie('username', 'alice')
    return resp

@app.route('/get_cookie')
def get_cookie():
    user = request.cookies.get('username')
    return f'User: {user}'

medium

A. User: alice

B. User: None

C. User: username

D. Error: Cookie not found

Solution

1. Step 1: Understand cookie setting route

   The /set_cookie route sets a cookie named 'username' with value 'alice' on the response.

2. Step 2: Understand cookie reading route

   The /get_cookie route reads the 'username' cookie from the request and returns it in the string.

3. Final Answer:

   User: alice -> Option A

4. Quick Check:

   Cookie 'username' = 'alice' read correctly = A [OK]

Hint: Set cookie first, then read with request.cookies.get() [OK]

Common Mistakes:

• Expecting cookie value before setting it
• Confusing cookie name with value
• Assuming error if cookie missing without checking

4. Identify the error in this Flask code snippet that tries to read a cookie named session_id:

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

@app.route('/check')
def check():
    session = request.cookies['session_id']
    return f'Session: {session}'

medium

A. Should use response.cookies instead of request.cookies

B. Cookie name must be capitalized as 'Session_id'

C. Using square brackets to access cookie may cause KeyError if cookie missing

D. Flask does not support reading cookies

Solution

1. Step 1: Check how cookie is accessed

   The code uses request.cookies['session_id'] which raises KeyError if cookie is missing.

2. Step 2: Suggest safer method

   Using request.cookies.get('session_id') returns None if cookie missing, avoiding error.

3. Final Answer:

   Using square brackets to access cookie may cause KeyError if cookie missing -> Option C

4. Quick Check:

   Access cookie safely with get() to avoid errors = B [OK]

Hint: Use request.cookies.get() to avoid KeyError [OK]

Common Mistakes:

• Using response.cookies to read cookies
• Assuming cookie names are case-insensitive
• Ignoring possibility of missing cookies causing errors

5. You want to create a Flask route that sets a cookie named theme with value dark that expires in 7 days. Which code snippet correctly does this?

hard

A. resp.set_cookie('theme', 'dark', max_age=7*24*60*60)

B. resp.set_cookie('theme', 'dark', expires=7)

C. resp.set_cookie('theme', 'dark', max_age=7)

D. resp.set_cookie('theme', 'dark', expires='7 days')

Solution

1. Step 1: Understand cookie expiration parameters

   To set expiration, use max_age in seconds or expires as a datetime object.

2. Step 2: Calculate 7 days in seconds and check syntax

   7 days = 7*24*60*60 seconds. resp.set_cookie('theme', 'dark', max_age=7*24*60*60) uses max_age correctly with this calculation.

3. Final Answer:

   resp.set_cookie('theme', 'dark', max_age=7*24*60*60) -> Option A

4. Quick Check:

   Use max_age in seconds for 7 days = D [OK]

Hint: Use max_age in seconds for cookie expiry [OK]

Common Mistakes:

• Passing expires as integer days instead of seconds or datetime
• Using string '7 days' which is invalid
• Confusing max_age and expires parameters