Retool is a powerful platform for building internal tools, but as apps become more complex, they can sometimes slow down, making the user experience less than ideal.
Why Retool Apps Slow Down
- Too Many Components: Retool creates a component tree that renders and updates dynamically. As the number of components increases, this process becomes slower, especially if the app is large and complex.
- Too Many or Slow Queries: If an app is responsive in terms of navigation but data loads slowly, it’s often due to too many queries running at once or queries taking too long to execute.
Performance issues in Retool apps typically stem from a few core factors:
Now, let’s dive into some practical ways to improve your Retool app’s performance.
7 Ways to Improve Your Retool App’s Performance
1. Split Large Apps into Multiple Logical Apps
If your app is loaded with components, consider breaking it into smaller, logically separated apps. Each app can focus on specific tasks, leading to faster load times.
Consider Using a Multipage App
Multipage apps allow you to share code, components, and queries between different parts of your app while keeping things organized. However, Retool’s multipage functionality is currently in beta and has some limitations, like the lack of collaborative editing, so proceed with caution.
2. Offload Logic to Workflows
Retool Workflows allow you to run business logic asynchronously on the backend, rather than handling everything within the app’s frontend. By offloading this logic, you can lighten the frontend load, which not only boosts performance but also simplifies app maintenance.
3. Use Manual Queries Whenever Possible
Queries that automatically run whenever input changes can be a performance bottleneck. Instead, consider running queries manually, especially if you only need data when the page loads.
3.1 Run Queries on Page Load
In many cases, all you need is for a query to run when the page first loads. You can achieve this by selecting the “Run query on page load” option in the Advanced tab for manual queries. This prevents unnecessary querying during every input change, reducing load times.
4. Stagger the Execution of Page-Load Queries
If you have multiple queries that run on page load, stagger their execution. This avoids overloading your app’s initial load and ensures a smoother user experience. You can control query execution order in the Advanced tab.
5. Merge Multiple Sections Into One
If your app has multiple sections for similar functionality (e.g., separate forms for updating and creating data), consider merging them into a single section. Reducing the number of components decreases the load on the app and makes it faster.
6. Upgrade Legacy Components
Retool has significantly improved the performance of some components, like tables and list views. If you’re using legacy components (you’ll see a “Legacy” label in the right-hand bar), upgrading them can dramatically enhance performance. However, note that upgrading legacy components is not always straightforward, as Retool has changed how they handle certain features.
7. Fetch Only the Data You Need
When making queries, avoid fetching more data than necessary. For example, only select the rows you need, and use server-side pagination and filters directly within the query. This reduces the amount of data the app needs to process and speeds up load times.
Conclusion
Optimizing your Retool apps can significantly improve performance and user experience. By splitting large apps, using workflows, leveraging manual queries, upgrading components, and more, you can create a faster, more efficient tool that meets your business needs.
At BackOfficely, we specialize in building and optimizing custom Retool apps for businesses. If you’re struggling with performance issues or need help getting the most out of your Retool app, reach out to us today. We’ll ensure your internal tools are operating at peak performance, so you can focus on growing your business.
Leave a Reply