jinja2 template takes over 10 secs to render, how to optimize? - flask

Question

In my flask web app, there is a route that display either all the member with their first name starting with 'A, B, C, etc..' or the Show All button that shows all the members registered . Right now it sum up to about 750 users. The problem is that displaying the 'show all' list takes over 10 seconds. The request to the DB itself is fast, it's the rendering that takes all those seconds. I was wondering if there is a way to speed this up? I'm pretty new to python, flask and jinja2 so I don't know the optimiztion paths yet.
Here is the views.py, when I click the 'Show all" button on the webpage, it calls the url with the letter argument set to '0':
#main.route('/all-members')
#login_required
#admin_required
def all_members():
alphabet = list(string.ascii_lowercase)
first_letter = request.args.get('letter')
if first_letter == '0':
user_ = User.query.order_by(User.fullname.asc()).all()
else:
user_ = User.query.filter(User.username.startswith(first_letter)).order_by(User.fullname.asc()).all()
return render_template('all_members.html', all_members = user_, alphabet = alphabet)
It return 750 user objects. I then pass that result to the template:
return render_template('all_members.html', all_members = user_, alphabet = alphabet)
And the template:
{% extends "base.html" %}
{% block title %}Zata - members list{% endblock %}
{% block page_content %}
<div class="page-header" xmlns="http://www.w3.org/1999/html">
<h1>Tribe members list</h1>
<p></p>
{% for letter in alphabet %}
<a class="btn btn-success" href="{{ url_for('.all_members', letter = letter) }}">{{ letter }}</a>
{% endfor %}
<a class="btn btn-info" href="{{ url_for('.all_members', letter = 0) }}">Show All</a>
</div>
{% for member in all_members %}
<div class="row">
<p>
<div class="col-md-2">
{{ member.fullname }}
</div>
<div class="col-md-1">
<a class="btn btn-warning btn-xs" href="{{ url_for('.edit_profile_admin', id=member.id) }}"> Edit Profile</a>
</div>
<div class="col-md-3">
<a class="btn btn-info btn-xs" href="{{ url_for('.add_punchcard', id=member.id, next=request.url) }}"> Manage Punchcard</a>
{% if member.punchcard_gold %}<span class="btn btn-xs" style="background-color:gold">G:{{ member.punchcard_gold }}</span>{% endif %}
{% if member.punchcard_normal %}<span class="btn btn-xs" style="background-color:#c0c0c0">R:{{ member.punchcard_normal }}</span>{% endif %}
</div>
<div class="col-md-4">
<a class="btn btn-info btn-xs" href="{{ url_for('.add_seasonpass', id=member.id, next=request.url) }}"> Manage Season pass</a>
{% if member.season_pass_gold %}<span class="btn btn-xs" style="background-color:gold">G:{{ member.season_pass_gold }}</span>{% endif %}
{% if member.season_pass_normal %}<span class="btn btn-xs" style="background-color:#c0c0c0">R:{{ member.season_pass_normal }}</span>{% endif %}
</div>
<div class="col-md-2">
<span class="btn btn-xs" style="background-color:yellowgreen">Class attended: {{ member.class_attended|length }}
</div>
</p>
</div>
{% endfor %}
{% endblock %}
The slow part is obviously the {% for member in all_members %} but is there another way to go through the list of user and build the page?

Answer 1

The problem isn't with your Jinja template but your Python code. You're returning all the records at the same time which slows down the execution. You need to perform some sort of pagination/lazy loading. If you're using Flask-SQLAlchemy, then it has a paginate method which will do all the work for you. For example, your query will look something like this
user_ = User.query.order_by(User.fullname.asc()).paginate(1, 10, True)
You can find more information here