Relationships (one-to-many) in Flask - Performance & Optimization

Performance: Relationships (one-to-many)

MEDIUM IMPACT

This affects how data is loaded and rendered on the page, impacting load speed and responsiveness when displaying related records.

Loading related items for multiple parent records in a web page

Flask

from sqlalchemy.orm import joinedload

parents = Parent.query.options(joinedload(Parent.children)).all()
for parent in parents:
    children = parent.children
# Loads parents and children in a single query

Eager loading fetches all related data in one query, reducing database round-trips.

📈 Performance GainSingle database query reduces server response time and improves LCP.

Loading related items for multiple parent records in a web page

Flask

parents = Parent.query.all()
for parent in parents:
    children = [child for child in parent.children]
# This triggers a separate database query for each parent due to lazy loading

Lazy loading causes multiple database queries (N+1 problem), slowing down page load.

📉 Performance CostTriggers N+1 database queries, increasing server response time and delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Lazy loading (N+1 queries)	Minimal DOM nodes initially	Multiple reflows if data loads incrementally	Higher paint cost due to delayed content	[X] Bad
Eager loading (single query)	All DOM nodes ready at once	Single reflow after full data load	Lower paint cost with faster content display	[OK] Good

Rendering Pipeline

When rendering a page with one-to-many relationships, the browser waits for the server to send all related data. Multiple database queries increase server processing time, delaying HTML delivery and rendering.

→Server Processing

→Network Transfer

→HTML Parsing

→Rendering

⚠️ BottleneckServer Processing due to multiple database queries

Core Web Vital Affected

LCP

This affects how data is loaded and rendered on the page, impacting load speed and responsiveness when displaying related records.

Optimization Tips

1Avoid lazy loading for one-to-many relationships when rendering pages with many related items.

2Use eager loading (e.g., joinedload) to fetch related data in a single query.

3Check network requests to detect and fix N+1 query problems.

Performance Quiz - 3 Questions

What is the main performance problem with lazy loading one-to-many relationships in Flask?

A It causes multiple database queries, slowing down page load

B It increases CSS file size

C It blocks JavaScript execution

D It causes layout shifts on the page

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by XHR or fetch requests, count number of database API calls or data fetches.

What to look for: Multiple similar requests indicate N+1 problem; a single request for related data shows efficient loading.