Cache busting strategies in Flask - Performance & Optimization

Performance: Cache busting strategies

MEDIUM IMPACT

This affects how quickly updated resources load and how browsers cache static files, impacting page load speed and user experience.

Serving updated static files without users seeing stale content

Flask

from flask import url_for

# In templates or code, use version query param
url_for('static', filename='style.css', v='12345')

# Or use file hash as version to bust cache automatically

Appending a version or hash forces browsers to fetch new files only when content changes, improving load speed and freshness.

📈 Performance GainReduces unnecessary reloads and improves LCP by loading fresh resources without blocking rendering.

Serving updated static files without users seeing stale content

Flask

app = Flask(__name__)

@app.route('/static/<path:filename>')
def static_files(filename):
    return send_from_directory('static', filename)

# No cache busting, browser may load old cached files

Browsers cache static files indefinitely, so users may see outdated CSS or JS after deployment.

📉 Performance CostCauses poor LCP as users load stale resources and may trigger multiple reloads manually.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No cache busting (static URLs)	Minimal	0	Low	[X] Bad
Cache busting with query version	Minimal	0	Low	[OK] Good
Cache busting with file hash in filename	Minimal	0	Low	[OK] Good

Rendering Pipeline

Cache busting changes the resource URL, causing the browser to request a fresh file instead of using cached content. This affects the loading and rendering stages by ensuring updated assets are used.

→Network Request

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request stage when stale cache causes reloads or delays

Core Web Vital Affected

LCP

This affects how quickly updated resources load and how browsers cache static files, impacting page load speed and user experience.

Optimization Tips

1Always change resource URLs when static files update to avoid stale cache.

2Use file hashes in filenames for automatic cache busting.

3Avoid disabling cache completely as it hurts load speed and user experience.

Performance Quiz - 3 Questions

What is the main benefit of using cache busting for static files?

A Reduces the number of HTTP requests

B Improves server CPU usage

C Ensures browsers load updated files without stale cache

D Decreases file size of static assets

DevTools: Network

How to check: Open DevTools > Network tab, reload page, and check if static files have unique query strings or hashed filenames and verify status is 200 (fresh load) or 304 (cached).

What to look for: Look for cache-control headers and unique URLs for static assets to confirm cache busting is working.