I’ve heard a few people mention speed and page load times as a concern. Was curious if any of the veterans had advice on ways to make sure my app is fast!
What are some best practices to implement when designing with page load speed in mind?
What are some pitfalls to avoid or the usual suspects when it comes to slow speed?
Example thoughts:
Screens: Is it better to have more screens and less data/filtering per screen? For example… should I have different pages for different users instead of hiding elements for specific users?
Videos and Images: Are images and videos going to slow things down? Is it better to store those in Adalo or store in AWS and link to it via Zapier?
Waiting Screens: When do I want to plan to use a “Please wait” graphic or screen? I’ve seen some people implement a “Loading” or “Processing” screen when they’ve just asked for a bunch of data from the user.
Good question! Based on my experience, what I’d do to improve performance:
for big collections (100s of records), avoid having all data displayed at once in some list, but rather try to implement some categorization/filtering;
avoid using many-to-many relationships in the DB;
avoid having too much info loading in the screen at once. E.g. lists inside the lists - I’d avoid having something like a list of bloggers with the list of blogger fans inside each “blogger” record). I’d split such screen into 2 - one for thee list of bloggers, and another - blogger details + list of his/her fans;
prepare images before uploading them, don’t upload 5000x5000 pictures. Adalo use ImgIX as CDN for images, it is pretty good. Also it’s possible to use ImgIX’s capabilities to reduce the size upon delivery;
avoid having a lot of actions (say, more than 3-4) attached to one button; each action takes a bit of time, but having several actions may result in a visible non-comfortable delay;
I do a blend of Adalo Collections with External collections. Example static DB like having User IDs or having business data (Name, contact, email) I leave in Adalo. Then stuff that needs to be called dynamically and accessed constantly I leave in Airtable/Xano using backend filters (As explained below further)
I prefer to have a list and then load a sub-list via another screen and not having list inside list as Victor well mentions.
I have an idea for lists with pagination, but haven’t tried it yet.
Always when possible split into 2 apps - Customer vs B2B
Adalo uses CDN as already mentioned, I use AWS S3 which is possible to use with CloudFlare or Imagekit (WIth CDN included) that you can also connect to AWS S3 (NEed to do a video on how to do this). Only waiting for Adalo to confirm Adalo DB images are deleted from Adalo’s servers when we remove them (As per my tests this is not done, which means we duplicate number of images in app).
Screens : Is it better to have more screens and less data/filtering per screen?
I keep balance, if I need to hide too many elements in one screen, I prefer to create another screen.
Screen loading all elements vs Screen loading all elements then hiding some elements in my view takes longer, but of course, 100 Screens is not optimal, I didn’t do full extent analysis here though
Videos and Images : Are images and videos going to slow things down? Is it better to store those in Adalo or store in AWS and link to it via Zapier?
I store all in AWS, since I have full control and can use my own CDN and control the Media DB size, also I resize my own images, so I can control the fill compression/resize process.
Would be great if ADALO could implement Lazy Loading with scroll, specially for big screens or apps that require a lot of media (Example: Scrolling Media Lists).
As my DB Stack, I mostly use Airtable (small apps) and XANO (bigger apps).
To reduce using filters in frontend I use the following process:
Airtable:
I create views to filter data pre-advanced instead of filtering in frontend when possible
For example - I made a Booking App that has all days of the year and then I used a view, just to take the last 90 days, most people don’t book a restaurant Months in advance.
I use filters immediately data also in the views to just use what I need. Example, I received all orders but some data I don’t want to show, so I can hide for example the “internal Order ID” or “Customer ID”
Xano:
Same process as Airtable. I use a graphQL approach (Addons) and try to combine Tables in XANO when possible and instead of creating two API endpoints and then use JOIN/Query to again filter the data into Adalo.
Or in some cases I just create a specific endpoint and filter based on purpose (Example - Endpoint per country and on frontend a screen only calls that endpoint data to a list). It adds a couple of External collections, so here you also need to make some balance in number of collections.
Example: I have 2 tables, one with the Subscription plans, another with the user plans, and I add the subscription plan data into the user plan table (1 Unique API endpoint), then I use a custom Query to only show users that have ACTIVE plans instead of loading all info via frontend and filtering via formula.
Hope it makes sense and it is useful for everyone .
Hi @Erik ,
I suppose this is infinite scrolling the latter option? I didn’t suggest as I am not fan of it, pagination in most cases is my go to because gives more control of user to see what they want. But I am a biased guy
Nice!!! This post helps considerably, I wish I would have seen more on this a few months ago before I slowly figured a lot of it out (or assumed I should say). This post gives confirmation to what I wondered and ESPECIALLY just before I was ready to launch. I may make a few changes first just to maximize efficiency. This will be invaluable to newcomers, THANKS G’s!
Hey @ishantanusrivastava … Or anyone as far as that goes… I have a question, I purchased your time slots clone that seemed like a great time saver (haven’t gotten to it yet but… very nice!).
I see that splitting up apps is recommended, so my question is… is there a way that I’m not seeing that will allow cloning an app (your clone) and choosing which database (in Adalo, “our current WEB APP app”) to share it with?
So not creating a new app and sharing databases but cloning your clone and sharing our existing database?? Or will I have to re-create the app you made as a new app connected to our existing app? Maybe I’m just overlooking something simple, kinda brain tired today.
OR would one have to do that with custom actions / api to put / get from the another Adalo app??
Hi @appwebmobile First of all thank you for supporting me
My suggestion is to CLONE the app first & then rebuild it in your own app. And also when you’re creating the recurring slots in your own app make sure to create all the recurring slots collections & properties (names should be matched) in it & then export all the records from the Recurring slot functional kit, IMPORT all the records to your collection accordingly.
First - you use S3 to store images; any reasons you prefer S3 to ImgIX? As I know ImgIX has API which allows doing quite a lot of interesting stuff with images, including resizing and etc. Also, what amount of images are we talking about (100s or 10000s)?
Reason - setting up S3 is not super-easy, so I’m trying to see the balance between the flexibility it allows and complexity of setup and maintenance
Second - you’ve mentioned you’re using Views in Airtable to do backend filtering. How faster are they compared to the Filter queries in the app? As I remember Airtable returns only 100 entries via API, so do Views have a significant effect?
Thanks Shan! I probably should have looked before asking. I noticed it was built as a mobile app once I opened it up and ours is a web app so I would have to rebuild anyway. I had a brain tired day yesterday, sorry. Thanks for your response!
@appwebmobile In the future please create new topics or direct message others instead of replying in a topic. Best to keep such a good resource on topic. Thanks
Yah, I kinda noticed that today when I came back in. I had a braindead tired day running on autopilot I’ll get better at this maybe after some more coffee… Too many places all of the time wearing too many hats. Thanks for the kind reminder @Colin !
@Victor thanks for tagging me here, looks like all the experts have already covered majority of the suggestions here.
Similar to @JL_LJ, I have been using more of Xano lately including the authentication provided by them. Quite satisfied with the performance.
One additional suggestion I’d like to add would be to probably think through the user flow and if possible have a rough sketch on paper before adding new screens in Adalo, I saw recently in many apps while helping others with too many repetitive screens ending up in slower performance.
Hi @JL_LJ , when you use Airtable views as a filter, what do you put in the Filter section in Adalo? I’d also like to do this thing with my apps, because currently I filter inside Adalo and it takes me a long time to load lists.
I’d be very interested to know if there’s a syntax that will pull in records from a particular Airtable view only.
Hi @Victor,
I am a long time user of AWS, as for S3 vs ImgIX, I am not that familiar with ImgIX to be honest (I have used other alternatives in the past), but I believe ImgIX is only a compressor, still needs S3 as storage provider. For that compressor I use ImagekitIO, the support is quite great and has a generous free tier (20GB). You can also use CloudFront (AWS) for CDN, or in my case Cloudflare (They have a good free plan) and it works with AWS.
I do agree 100% with you, it is not easy to setup, it takes some time to get the hang of it (In my opinion it is the downfall of AWS in converting beginners to the business), But I think it is a great solution for storage and one the cheapest in the Market.
Regarding Airtable speed, I cannot really tell now, but I can do a couple of tests during weekend “FilterByFormula vs Views”.
So mainly yes, 100 records, that is why I use the view also to filter only 100 records when possible (the booking system case where I only filter the next 90 days). Very useful to pull most recent records.
Hopefully I will have more time to make some more videos regarding AWS, I just released one in how to use with Integromat, but waiting for Adalo team to tell me if images are deleted or not from Adalo side (I tested and it does not seem that way so far).
I have this going on: HOW storage works
Would be great if Adalo team would clarify.
Hi @AddyEdwin ,
Taking a look into your screenshot, you can already filter in Airtable directly using a view with a “Status = Active” for example, so one less filter in frontend.
Don’t know what is “Retainer”, but maybe also can be used in Airtable using a find/search/contains formula directly in Airtable.
Is there anyone who can work for me (for a fee) for image optimization? I would not want to reduce its quality to resize them, I would only need to load them faster.
.
because gives more control of user to see what they want. But I am a biased guy 
I’ll get better at this maybe after some more coffee… Too many places all of the time wearing too many hats. Thanks for the kind reminder 
