Easy Ways to Improve Your Adalo App Performance
Adalo is a tool for building MVPs, it is not meant for highly complex products. But sometimes it is hard to sway a founder from adding all the features they dreamt for the full app if the features are indeed doable. So we end up with a sluggish app and disgruntled users. Here are a few things you can do as a developer to improve app performance.
You know, besides learning to negotiate your way out of absurd requests 😪
1. Split screens with multiple lists into tabs to reduce loading time.
loading data to populate lists takes some time, so if you have a screen with multiple lists of data, you can just split it into tabs, where each tab is a clone of the original screen with only one list.
**Tip: make sure the transition style is (none) between the tabs to avoid confusion.
2. Load items with scrolling
This ensures that the screen content will load quickly as only visible content will be loaded at every point in time as opposed to loading all content on screen load.
Extra help: uncheck Auto Refresh as well but only when it makes sense to make the app even faster.
3. Reduce max number of items in horizontal lists and add a link to a separate screen with all items.
again, these kind of lists are usually used to showcase a small number of featured items so there is no need to force the screen to load so much content. A small link to a full screen with scrollable feed is much more practical.
4. Use tabbar component when possible to reduce the need to load images for the custom tabbar
I know that the available icons do not always match your design or the app style but they do contain most possible icons. So if your app feels a bit on the slow side, you can try to remove the custom tabbar that you built using a background shape and 3+ icons and labels and just try to make do with the existing tabbar component. Loads much faster.
5. Use empty states for all simple and card lists
Gone are the days when we used to apply visibility rules to show/hide empty state designs for lists. Toggle the built in List Empty State option to reduce the extra rules required for a custom empty state.
6. Use a unified design language to reduce the difference in styles
We have no alignment or saved styles, that is true 😭 😭 😭 But we can still reduce the small variations in element style and placement by simply designing each element once and copying it into a new screen and changing content / actions as required.
- select the element you want to copy and cmd/ctrl+C to copy.
- select the screen you want to paste it into (for elements you want to have the exact same placement (like an icon or a logo or to preserve the save space between appbar and first item on top) and cmd/ctrl+V to paste into the same location as the original screen.
Think of it as a CSS stylesheet. Every element must belong to a class and we don’t want to add any styling inline.
7. When possible, use lottie animation instead of GIFs as they are incredibly smaller in size.
users are flaky, they will drop the app entirely if they have to wait for anything. So take a lot of weight off your app and use a lottie animation instead of a GIF. high quality animation and small size. WIN.
Here’s how to embed lottie animations in Adalo.
PLEASE NOTE: list empty states do not accept json files, just images. So to use a lottie animation for an empty state you need to do it the old way; add a lottie component and the empty state content, group and add a visibility rule to show the group when list items count including filters = 0.
8. Host your data on an external database like Airtable or Spreadsheets and use APIs to talk to it.
Adalo database is improving but still has problems with loading time. Using an external database is not so difficult and it will greatly improve the overall experience for users.
9. Smaller number of actions per click.
I have personally seen buttons with 6+ actions based on one click, that is a lot to process and will definitely take a long time to finish. If you can reduce actions per button (split actions) or better yet, rethink the logic and see if the same result can be achieved in a better way, you can expect a much faster response from the app.
10. Rethink your features, gather feedback and remove features that weigh the app down but have low use rates.
if you -unlike me- do have some negotiation skills; try to use data to convince the client to drop a complex but unimportant feature. Things can always be added later if the need arises, but the key is to release with the the most important features; those features that solve the main problem for users, then add/remove as you gather feedback and learn more about the market.
I hope this helps, even if it’s just a little :) Can you give me any tips? this girl loves quick workflow tips!
till next time, lots of love and #keepdesigning!
