How cookies work in HTTP in Flask - Performance Optimization Steps

Performance: How cookies work in HTTP

MEDIUM IMPACT

Cookies affect page load speed by adding data to HTTP headers, impacting network transfer size and latency.

Sending user session data with cookies

Flask

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

@app.route('/')
def index():
    resp = make_response('Hello World')
    resp.set_cookie('session', 'short_token')
    return resp

Small cookie size reduces header bloat, speeding up network transfer and page load.

📈 Performance GainSaves 1-2 KB per request/response, reducing blocking time and improving LCP.

Sending user session data with cookies

Flask

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

@app.route('/')
def index():
    resp = make_response('Hello World')
    resp.set_cookie('session', 'very_long_session_data_string_that_is_unnecessarily_large')
    return resp

Large cookie size increases HTTP header size, slowing down every request and response.

📉 Performance CostAdds 1-2 KB to each request and response headers, increasing network latency and blocking rendering longer.

Performance Comparison

Pattern	Header Size	Network Latency	Rendering Delay	Verdict
Large cookies with long session data	Increases by 1-2 KB	Increases latency by 10-50ms	Delays first paint	[X] Bad
Small cookies with minimal data	Minimal increase	Minimal latency impact	Faster first paint	[OK] Good

Rendering Pipeline

Cookies are sent in HTTP headers during requests and responses, increasing header size and affecting network transfer time before rendering starts.

→Network Transfer

→Critical Rendering Path

→First Paint

⚠️ BottleneckNetwork Transfer due to larger headers

Core Web Vital Affected

LCP

Cookies affect page load speed by adding data to HTTP headers, impacting network transfer size and latency.

Optimization Tips

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

2Avoid storing large or unnecessary data in cookies.

3Use short tokens or IDs instead of full data in cookies.

Performance Quiz - 3 Questions

How do large cookies affect page load performance?

A They increase HTTP header size, slowing network transfer and delaying rendering.

B They reduce the number of HTTP requests needed.

C They improve caching and speed up rendering.

D They have no impact on page load performance.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload 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 that increase request and response payloads.

Practice

1. What is the main purpose of cookies in HTTP when using Flask?

easy

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

B. To increase the speed of the Flask server

C. To encrypt user data on the server

D. To manage database connections automatically

Solution

1. Step 1: Understand what cookies do in HTTP

   Cookies store small data on the user's browser to remember information between requests.

2. Step 2: Identify Flask's use of cookies

   Flask uses cookies to save user preferences or login info on the client side.

3. Final Answer:

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

4. Quick Check:

   Cookies store data on browser = D [OK]

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

Common Mistakes:

• Thinking cookies speed up the server
• Confusing cookies with encryption
• Assuming cookies manage databases

2. Which Flask method is used to set a cookie in the HTTP response?

easy

A. request.set_cookie()

B. request.cookies()

C. response.set_cookie()

D. response.cookies()

Solution

1. Step 1: Recall Flask's cookie setting method

   Cookies are set on the response object, not the request.

2. Step 2: Identify the correct method

   The method to set a cookie is set_cookie() on the response object.

3. Final Answer:

   response.set_cookie() -> Option C

4. Quick Check:

   Set cookie on response = C [OK]

Hint: Set cookies on response, read from request [OK]

Common Mistakes:

• Using request.set_cookie() instead of response.set_cookie()
• Confusing request.cookies() as a setter
• Using response.cookies() which does not exist

3. Given this Flask code snippet, what will be printed when the client sends a cookie named 'user' with value 'Alice'?

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

@app.route('/')
def index():
    user = request.cookies.get('user')
    return f'Hello, {user}!'

medium

A. Hello, Alice!

B. Hello, !

C. Hello, None!

D. Hello, user!

Solution

1. Step 1: Understand how Flask reads cookies

   The code uses request.cookies.get('user') to get the cookie value named 'user'.

2. Step 2: Check the cookie value sent by client

   The client sends a cookie 'user' with value 'Alice', so user variable will be 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Cookie 'user' = Alice, output = A [OK]

Hint: request.cookies.get('name') returns cookie value or None [OK]

Common Mistakes:

• Assuming cookie value is None if present
• Forgetting to use .get() method
• Confusing cookie name with literal string

4. What is wrong with this Flask code that tries to set a cookie?

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

@app.route('/')
def index():
    response = 'Hello'
    response.set_cookie('theme', 'dark')
    return response

medium

A. The cookie name 'theme' is invalid

B. You cannot set cookies on a string response object

C. The set_cookie method requires a third argument

D. Flask does not support cookies

Solution

1. Step 1: Identify the response object type

   The variable response is a string, not a Flask response object.

2. Step 2: Understand how to set cookies in Flask

   Cookies can only be set on a response object, like one created by make_response(), not on a plain string.

3. Final Answer:

   You cannot set cookies on a string response object -> Option B

4. Quick Check:

   Set cookies on response object, not string = B [OK]

Hint: Use make_response() to set cookies, not plain strings [OK]

Common Mistakes:

• Trying to set cookies on string instead of response object
• Thinking cookie names must be special
• Believing set_cookie needs extra arguments always

5. You want to create a Flask route that sets a cookie named 'visited' with value 'yes' that expires in 1 day. Which code correctly does this?

hard

A. from flask import make_response
@app.route('/')
def index():
resp = make_response('Welcome')
resp.cookies['visited'] = 'yes'
return resp

B. @app.route('/')
def index():
response = 'Welcome'
response.set_cookie('visited', 'yes', max_age=86400)
return response

C. from flask import request
@app.route('/')
def index():
request.set_cookie('visited', 'yes', max_age=86400)
return 'Welcome'

D. from flask import make_response
@app.route('/')
def index():
resp = make_response('Welcome')
resp.set_cookie('visited', 'yes', max_age=86400)
return resp

Solution

1. Step 1: Identify how to create a response object

   Use make_response() to create a response object to set cookies.

2. Step 2: Set cookie with expiration

   Use set_cookie() with max_age=86400 (seconds in 1 day) to set expiration.

3. Step 3: Check each option

   from flask import make_response @app.route('/') def index(): resp = make_response('Welcome') resp.set_cookie('visited', 'yes', max_age=86400) return resp correctly uses make_response and set_cookie with max_age. Others either set cookie on string or request or use wrong syntax.

4. Final Answer:

   resp.set_cookie('visited', 'yes', max_age=86400) -> Option D

5. Quick Check:

   Use make_response + set_cookie + max_age = A [OK]

Hint: Use make_response and set_cookie with max_age for expiry [OK]

Common Mistakes:

• Setting cookie on string instead of response object
• Trying to set cookie on request object
• Using resp.cookies dict instead of set_cookie method