The first and foremost optimization that we are going to take a look at is the optimization of resources that a particular page loads when it is requested. For this, consider the following code snippet from the user data display page in the admin panel, which is responsible for displaying a table of users in the database:

<table>
{% for user in users %}
  <tr>
    <td class="user-data-column">{{ user.username }}</td>
    <td class="user-data-column">{{ user.email }}</td>
    <td class="user-data-column">{{ user.status }}</td>
  </tr>
{% endfor %}
</table>

So far, so good. As we can see, the code snippet just loops over a user's object and renders the table based on how many records are stored in the user's table. This is essentially good for most of the purposes where the user records are only in a small number (for example, 100 or so). But this code will start to become problematic as the number of users in the application grows. Imagine trying to load 1 million records from the application database and making them display on the UI. There are certain issues with this:

• Slow database queries: Trying to load up 1 million records from the database at the same time is going to be very slow and can take quite a significant time, hence blocking the view from rendering for a long time.
• Decoding the objects in the frontend: In the frontend, to render the page, the templating engine has to decode the data from all the objects so that it is able to display the data on the page. This kind of operation is not only CPU intensive, but also slow.
• Large page size: Imagine transferring over a page consisting of millions of records over the network from the server to client. This process is time-consuming and also makes the page unfavorable to load over slow connections.

So, what can we do here? The answer to this is pretty simple: let's optimize the amount of resources that are going to be loaded. To achieve this, we are going to utilize a concept known as pagination.

To implement pagination, we need to make a few changes to the view that is responsible for rendering the frontend template, as well as the frontend template. The following code describes how the view will look if it had to support pagination:

From bugzot.application import app, db
from bugzot.models import User
from flask.views import MethodView
from flask import render_template, session, request

class UserListView(MethodView):
    """User list view for displaying user data in admin panel.
    
      The user list view is responsible for rendering the table of users that are registered
      in the application.
    """

    def get(self):
        """HTTP GET handler."""
    
        page = request.args.get('next_page', 1) # get the page number to be displayed
        users = User.query.paginate(page, 20, False)
        total_records = users.total
        user_records = users.items
    
        return render_template('admin/user_list.html', users=user_records, next_page=page+1)

We are now done with the modifications to the view—it now supports pagination. Implementing this pagination was quite an easy task with the facilities already provided by SQLAlchemy to paginate the results from the database table using the paginate() method. This paginate() method asks for three parameters, namely the page number, which should start from one, the number of records on each page, and error_out, which is responsible for setting the error reporting for the method. A False here disables the errors from being displayed on stdout.

With the view developed to support the pagination, the next thing is to define the template so that it can take advantage of the pagination. The following code shows the modified template code that takes advantage of the pagination:

<table>
{% for user in users %}
  <tr>
    <td class="user-data-column">{{ user.username }}</td>
    <td class="user-data-column">{{ user.email }}</td>
    <td class="user-data-column">{{ user.status }}</td>
  </tr>
{% endfor %}
</table>
<a href="{{ url_for('admin_user_list', next_page) }}">Next Page</a>

And with this, we have our view code ready. This view code is quite simple as we have just extended the previous template by adding a href, which loads the data for the next page.

With our resources being sent to the page now optimized, the next thing we need to focus on is how we can make our frontend load more and more resources faster.