Debugging slow/resource-hogging pages

Hi All.

In our application, there are couple of pages which are generally quite slow and our team tells that they often result in hanging the browser.

I have tried to simplify the page, remove unnecessary elements. But still I am facing the issues.

Here are a few tactics I have employed so far.

  • Check if there are too many elements
  • Check if there are complex elements like map, calendar etc.
  • Check if there are too many visible elements on load
  • Check if there are actions which happen every few seconds
  • Check if there are complex searches
  • Check if there are elements that can be converted to reusables
  • Check if some actions can be moved to backend API workflows

Would you suggest some more?

Is there any better method to find out which element/section/action of the page is causing the slow/resource-hogging behaviour of the page? For example something that I can do via Bubble debugger or Chrome dev tools?

Bubble editor have a debugger / error checker function to check frequently when you do any changes. This makes your browser get slow.

Try to add “&issues_off=true” in your browser url, it will temporarily to disable the bubble debugger or issue checker.

Thanks for the tip. However, I am not talking about Bubble editor being slow. I am talking about pages created using Bubble being slow/hogging-resources.

Okay got it. You need fix the major issues on your bubble app. And improve the performance to speed by reducing the complex filters.

if you need my help, please DM me.

Thanks. That’s what I have mentioned in my initial post. I have given a list of checks I have done, and am seeking any other additional checks/methods. Also, if there can be some kind of debugging using Bubble or Chrome debugger.

Chrome can show you what’s being downloaded, size and time, and errors, which may reveal the issue. Debugger can show you what’s happening with your worfklows.

As for your list, a few more come to mind…

  • Downloading too much data
  • Downloading “heavy” data (data with resource heavy fields) and images
  • A 3rd party plugin causing an issue

Once your pages/site is fully built, isolating the problem can be hard. So you may have to dupe the site and start tearing it down by removing stuff until you figure out the problem. I would start by focusing on what’s happening with searches, any workflows writing to the database, and 3rd party plugins.

The ultimate guide to this sort of stuff is the Bubble performance guide ebook.

Let us know what you find!

That’s very good input @ed727

Yes, I was hoping that we would be able to put together a list of checks that people can do when they are trying to optimise their pages. Hoping that this list will help others too.

Will try your pointers too. And yes, will keep this thread updated in case I find something interesting.

Problem with trying the approach of duplicating the page and trying to tear it down is that it can largely be done in test setup. Problems that we face are in production setup where the data size etc are different. And also people who face the issue are using computers with less RAM etc. And also they don’t face the issue all the time. Just quite often. So replicating all that is bit difficult.

1 Like

Yes, one other observation is that there’s a difference between optimizing (something that helps performance at the margins, like using styles or getting rid of some elements) and problems (something that causes a serious performance issue, like a bad workflow, poorly constructed search, bad data structure, or a buggy plugin). It sounds like you have the latter, and so the challenge is isolating it.

If I was in your situation I would ask users for specifics on what they were doing when the site bogged down, move the live data to the test site, get a lower powered machine and run a bunch of tests to narrow down what’s happening and use chrome dev tools + the Bubble debugger. And if that doesn’t reveal it, then dupe the page and start stripping out things until you find the slowdown.

I have asked that question, and it seems it just happens randomly. No real pattern on which action causes it.

You are right that page probably has bad workflows, poorly constructed searches etc. I have tried to fix/remove them to the extent I could. It can still be done even more, but I was wondering if there was a better way to get to the root cause rather than spending hours on optimising things that were not creating much trouble.

The page that I have is a usual backend workflow system where people filter tasks, edit them, update them etc. But yes it has some “predefined searches”, reminders, calendar view, map view etc. I have tried to optimise those things and removed a lot of stuff. But it has not made a lot of difference, so just trying to see if I can narrow it down instead of just continuously changing/removing stuff blindly.

Apart from it being a very time consuming process, other factor is also that some pieces are connected, so removing one piece means I need to take care of cascading issues too.

Anyway, thanks for your inputs. I’ll continue my debugging with your suggestions.

Look at below forum link,

this will have few of idea to optimize or simplify your search operation & speed up your website.

All the bubble app’s of database structure would be differ based on their requirement. To be honest no one can provide better solution without knowing how you are architectured the database and implemented in the backend api’s / search operation.

try to check your website (front-end) with debug_mode=true. And look at bottom of how much data will be searched from the database (in MB’s). This is the major performance issue on your bubble app. so try find out the search operations / workflow api to reduce the complex filter.

For your reference:

Good luck. The performance Q&A guide that @mani2726 references is a good one, and this book https://gumroad.com/l/the-ultimate-guide-to-bubble-performance should pretty much answer any question you have about performance and debugging.

I managed to solve this one looks like for one of our pages which was troubling us a lot since months.

I went through แก้ปัญหาเกี่ยวกับหน่วยความจำ  |  DevTools  |  Chrome for Developers and tried a few steps. Not much luck I got as for some of the steps the the developer tool itself kept crashing.

Then I also tried “Lighthouse” in Chrome developer tools. It gave a few pointers that I fixed, but those also didn’t help much.

Then I noticed some errors in my Console saying “autorun.auto_run once timeout” message. When I expanded on it, there was some Bubble error code too. I kind of guessed that maybe some workflow or something is failing. But I couldn’t point my finger on what that was.

This is how the developer tool looked like:

Then for some weird reason that “autorun” in the text here made me think of “auto suggest” widget that I had built using “search and autocorrect” plugin. I had wanted to remove it earlier, but because of functionality I had not. Took the courage to remove it and made my folks retry everything.

It has been about half a day and they haven’t complained so far. So I have reason to believe that that was causing the problem.

When I came to the plugins to see if others had similar issue, I noticed that they have recently deprecated that plugin. So the problem I was facing was not related to deprecation per se as we have been facing the issue for months while the deprecation is recent. (I know it is recent because I had updated my plugins last month only).

Anyway, as of now looks like situation is fine. The developer tool is not showing those errors too.

It may not be of much help to others, but I thought of penning it down anyway, just in case someone else faces similar issues and needs some pointer on how to debug on what could be slowing down their applications.

2 Likes

hey, can i please get in touch with you, need assistance with the same issue