Flaskframework~8 mins

Include for reusable fragments in Flask - Performance & Optimization

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Performance: Include for reusable fragments

MEDIUM IMPACT

This affects page load speed by reducing template parsing and rendering time through reuse of common HTML parts.

Reusing common HTML parts like headers or footers in multiple pages

Flask

{% raw %}
<!-- base.html -->
<!DOCTYPE html>
<html>
<head><title>{% block title %}{% endblock %}</title></head>
<body>
  {% include 'header.html' %}
  {% block content %}{% endblock %}
  {% include 'footer.html' %}
</body>
</html>

<!-- page.html -->
{% extends 'base.html' %}
{% block title %}Page{% endblock %}
{% block content %}
<p>Page content here</p>
{% endblock %}
{% endraw %}

Includes load reusable fragments once and insert them, reducing duplication and parsing overhead.

📈 Performance GainReduces template size and parsing time, improving LCP by faster HTML generation

Reusing common HTML parts like headers or footers in multiple pages

Flask

{% raw %}
<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>...</nav>
  </header>
  <!-- page specific content -->
  <footer>
    <p>© 2024 Company</p>
  </footer>
</body>
</html>
{% endraw %}

Duplicating the same header and footer in every template causes repeated parsing and larger template files.

📉 Performance CostIncreases template parsing time and memory usage for each page load

Performance Comparison

Pattern	Template Parsing	Server CPU	HTML Size	Verdict
Duplicated fragments in every template	High (repeated parsing)	Higher CPU usage	Larger HTML templates	[X] Bad
Includes for reusable fragments	Low (parsed once)	Lower CPU usage	Smaller templates	[OK] Good

Rendering Pipeline

Flask templates are parsed and rendered on the server before sending HTML to the browser. Using includes reduces repeated parsing of common fragments, speeding up server-side rendering.

→Template Parsing

→Server-side Rendering

⚠️ BottleneckTemplate Parsing when duplicating fragments

Core Web Vital Affected

LCP

This affects page load speed by reducing template parsing and rendering time through reuse of common HTML parts.

Optimization Tips

1Avoid duplicating common HTML in multiple templates to reduce parsing time.

2Use {% include %} to insert reusable fragments efficiently.

3Smaller, modular templates improve server rendering speed and LCP.

Performance Quiz - 3 Questions

Test your performance knowledge

How does using includes for reusable fragments affect server-side template rendering?

AIt increases template size and slows down rendering

BIt has no effect on rendering performance

CIt reduces repeated parsing and speeds up rendering

DIt causes more network requests for fragments

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect HTML response size and load time.

What to look for: Smaller HTML size and faster server response time indicate efficient template rendering with includes.