Serving CSS files in Flask - Performance & Optimization

Performance: Serving CSS files

HIGH IMPACT

This affects page load speed by controlling how quickly CSS files are delivered and applied, impacting the Largest Contentful Paint (LCP).

Serving CSS files in a Flask web app

Flask

from flask import Flask
app = Flask(__name__)

# Use Flask's built-in static file serving
# Place CSS in 'static/style.css'

# In HTML: <link rel="stylesheet" href="/static/style.css">

Flask serves static files efficiently with caching headers and supports compression via web server or middleware.

📈 Performance GainEnables browser caching, reduces server load, speeds up LCP

Serving CSS files in a Flask web app

Flask

from flask import Flask
app = Flask(__name__)

@app.route('/style.css')
def style():
    with open('static/style.css') as f:
        return f.read(), 200, {'Content-Type': 'text/css'}

Serving CSS by reading and returning file content on each request blocks the server and disables caching and compression.

📉 Performance CostBlocks rendering for each CSS request, no caching, increases server CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Serving CSS via Flask route reading file each time	N/A	N/A	Blocks rendering until CSS loads	[X] Bad
Serving CSS via Flask static folder with caching	N/A	N/A	Fast style application, minimal blocking	[OK] Good

Rendering Pipeline

When CSS files are served efficiently, the browser quickly downloads and applies styles, allowing faster style calculation and layout.

→Network Request

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request delays due to inefficient serving or lack of caching

Core Web Vital Affected

LCP

This affects page load speed by controlling how quickly CSS files are delivered and applied, impacting the Largest Contentful Paint (LCP).

Optimization Tips

1Serve CSS files from a static folder with proper caching headers.

2Enable compression (gzip or brotli) on CSS files to reduce size.

3Avoid reading and sending CSS files manually on each request.

Performance Quiz - 3 Questions

What is a major performance problem when serving CSS files by reading and returning file content on each request in Flask?

A It reduces server CPU usage

B It blocks rendering and disables browser caching

C It automatically compresses CSS files

D It speeds up Largest Contentful Paint

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, check status codes and size, look for caching headers like 'cache-control' and 'etag'.

What to look for: Look for 200 vs 304 status codes, small transfer size on repeat loads, and fast load times indicating caching and compression.