Diagnosing Slow Pages

Introduction

As your app grows and accumulates more data over time, certain pages, especially those that load or process large amounts of data, can start to slow down.

This slowdown may not affect the entire app, but could impact specific pages that handle more complex forms, records, or interactions.

It's a common scenario as applications scale, and it's often a sign that the page may need some tweaks to handle the increased load efficiently.

To help you resolve this issue efficiently, Joget provides an APM feature, which is a valuable tool for diagnosing performance issues.

This guide walks you through the prerequisites, thought process, and steps to accurately find the root cause of slowness using these logs.

Prerequisites

Before analyzing a trace log, ensure you have:

• Download the complete trace log that captures the entire request lifecycle as shown at APM's download section.
• Access to App Composer for the specific app to inspect App components such as forms, lists, and userviews.
• Familiarity with your app’s database queries, especially those involving large datasets.
• Basic knowledge of how a web application works, for example, how an HTTP request is processed through the MVC life-cycle.
• Basic understanding of Java stack traces.

Understanding the Thought Process

When approaching a trace log, keep these key questions in mind:

1. Where was the time spent?
   Look at the breakdown of the total request time to pinpoint which phase is consuming the most time.
2. Was it due to a slow data query or slow rendering?
   A large dataset might slow down rendering, or a slow db query could be the culprit even for small data.
3. Which Java methods were most expensive?
   Use the profiling data to identify which methods were in the slow phase or taking up most of the processing time.

Case Study: Page takes more than 6 minutes to load

Let’s analyze a real example to understand the process of identifying a performance issue.

Scenario: A page is loading extremely slowly, taking over 407 seconds (~6 minutes) to fully render.

Step-by-Step Guide to Diagnosing Page Slowness

Step 1: Identify the Longest Phase

Start by examining the Duration and Breakdown section in the trace log:

• Duration: 407,128 ms
• jsp render: 407,106 ms
• jdbc query: 1,797 ms

jsp render took 407,106.9 ms (~6 minutes), which is 99% of the Duration versus jdbc query only took 1,797 ms, which is less than 2 seconds.

This is an early indication that the UI rendering phase is the issue, not the database data retrieval.

Step 2: Evaluate Query Efficiency

Click on the Query stats hyperlink to see detailed query logs:

• Query 1: 19,475 rows in 1,128 ms
• Query 2: 23,337 rows in 601 ms

The queries are fast while returning a massive amount of datasets, which shows the database is working in optimal condition.

Step 3: Analyze the Java Call Stack

Click on the Profile hyperlink to get more insights:

• Focus on the top time-consuming methods.
• Key findings:
  • org.joget.apps.userview.model.UserviewMenu.render consumes 90.3% of time.
  • The rendering hits heavy Freemarker calls like:
    • freemarker.core.Environment.visit
    • org.joget.apps.form.service.FormUtil.generateElementHtml

This confirms that page rendering (JSP + Freemarker) is being overwhelmed by the huge amount of datasets from database queries at Step 2.

Step 4: Correlate with UI Design

Now connect the findings with how the specific page was built and ask questions to the App Developer.

• Could a page be trying to load all this data at once?
• Are we rendering a List or Form with over 20 thousand rows?

Rendering a List of records with thousands of rows in one go may introduce lagging behavior.

Possible Solutions

The following are general recommendations. The ideal solution may vary depending on your app’s specific requirements:

• Reduce pagination size, especially in elements like List Grid and Form Grid.
• Use SQL LIMIT clauses to restrict the number of rows returned.
• Avoid rendering large datasets all at once; break them into smaller and manageable chunks.

Conclusion

Joget’s APM trace logs offer rich insight when diagnosing slowness. For this specific example of a case study, by focusing on time-consuming phases, the amount of database data retrieved and UI rendering, we can quickly pinpoint the root cause and optimize accordingly.