My app is simple app, featuring Listings of people hosting virtual classes. Each Listing has 8 images (4 cropped for mobile, 4 for desktop) and there are only 12 Listings in my database. The home page was loaded extremely slow, so I made a change to search for Users instead of Listings as there is only 1 image per User (and 8 images per Listing). That helped, but it’s still pretty slow. Once a profile is clicked on in the index page, it takes them to the associated virtual class Listing page. This page is also loading extremely slow (4 seconds to load the Listing page).
The users are able to upload their own images with a max of 2MB per image and processed with Imgix on the page load.
On both the Index and Listing pages, Searches are performed searching for ID’s of the User and the Listing.
My hunch is the image size is slowing the performance, so I limited the image upload size to 2MB in the “File Uploader” vs the standard 50MB max. I’m also processing the images with Imgix to help with performance but still very slow.
Is there anything I can do to speed this up? I can share editor page.
I do see what you mean with the slow load. Which repeating group type are you using? My hunch is that you are using a full list. In your case I would use the ext. vertical scrolling. This will load just at the right time.
Instead of sharing access to your app, just post some screenshots here of the search, the type of repeating groups, etc…
The RG group on the first page loaded after an average of 5sec for me. That does seem a bit slow for the few entries displayed. Are the images really heavy, or are you doing some elaborate search for the listings?
The subpages were indeed extremely slow to load, I was just about to leave when the dynamic data showed up. So I timed all the sub pages, and the load time was around 7-10 seconds for me.
It would be interesting to know how you are are fetching the data because I have a page with about the same amount of information, albeit no images, and that loads instantly.
… why do I go to… https://beentherelocals.com/local/**?id=CYG19L8**?.. and why does that open in a new window? (asterisks added for empahsis) There’s no need to use URL parameters here – this is Bubble, not … I don’t know… Wordpress or something.
That’s probably the only problem with this site. You’re just missing something quite fundamental vis-a-vis displaying specific Things. Would love to see a clone of this site (with database) and access to the editor to understand exactly where things are going wrong.
Hi Rico - Thanks! Yup, I am using ext. vertical scrolling. Below is the type of search I am using. I originally was searching for Listings but that was too slow. I think because it was searching through so many images. I created a workaround by copying the 1st image that is on their Listing to be part of their User data. Now instead of searching through 12 Listings with 8 images, its searching through 12 Users with 1 image. But still is frustratingly slow. The “link” element doesn’t even pop up for 5-8 seconds that allows the user to click into a profile.
***This is the search on the Index page to showcase all the Users (was originally Listings but that was too slow).
Hi there, thanks for taking a look. I completely agree, it take way too long and this isn’t an issue on previous apps i’ve built. On the local profile page I am doing a search pulling the ID from the URL and displaying the first (and only) result of that profile ID (screenshot below). That is the only search going on, searching through the Listings for the Listing with the associated ID.
***This is the search on the Local Profile page to showcase the specific Listing the user clicked on the index page.
I would love to learn how to do this. Are there any tutorials/lessons I can watch? If you’re free, I’d love to hop on a quick Zoom call if thats okay with you! We’re live and have had quite a bit of revenue coming in, I’d like to fix this ASAP. I think there must be some users that drop off because of the poor experience.
I would be interested in seeing how this is resolved, so that I don’t have the same issue. For example, is the slow load due to:
Huge image sizes
A plugin that’s acting up
Something going on with the search (though with only 12 listings I don’t know how it could be so slow, even if the search was done the least optimal way)
A general practice I try to follow is to build an app sequentially – i.e. build one feature and check the speed. If OK, then build the next feature and check the speed, and so on. That way if something causes a speed issue I can immediately isolate it, and also it gives me a sense of how much time each feature adds to the overall load and functionality.
By the way, if you ever need a testimonial for that specific course, I would love to do it.
@austinjarts it might be worthwhile creating a new page with just that repeating group to troubleshoot. To let you zero in on the repeating group’s search and the content.
By the way, are there any conditional rules inside of it? … any API calls?
You are searching for Users… but displaying a Listing. Is the Users search the only search you’re doing on that page? Or is there a search inside the repeating group? Something like Do a search for Listings where the user is this cell's user.
If that’s the case, it might be worthwhile trying a different approach to the search. Try to do a search for Listings and, in the constraints, User* is in do a search for User within so many miles.
*(or however you call the link of User and Listing)
BTW, the slow load time @austinjarts is having relates to the fact that, somehow, they did not upload their images to either Bubble’s storage nor to s3, but shoved the images in as data: URLs.
I’m not even sure how this is possible (except through some shittily-designed plugin, perhaps?), but their images were not image files but data URLs. (A data URL is a special type of URL that allows us to tell the browser, “Hey, here’s a reference to some data source that you’d usually get through an HTTP request… however, I already have the data you’d get from that, and here it is.” This is useful in some contexts – for example, Calendar Grid Pro dynamically creates some little SVGs in some cases to use as background images for the calendar cells. Since there is nowhere to send them, I reference them as data URLs. But in the case of images to be used in a Bubble app, this isn’t the right thing to do and – honestly – is either stupid or evil.)
Further, these images were just attached directly to the User object, which isn’t ideal. (They should be Things – like a “Picture” .)
There are other problems with this project in terms of data organization that are more complex, but boil down to passing data to a page with a type via a URL parameter rather than just using Bubble’s default method. There’s absolutely no point to it, and if this suggestion came from some tutorial, that tutorial is just abjectly dumb.
The problems with this otherwise quite lovely-looking project make me angry (if you can’t tell) and are clearly the result of either insanely bad advice gleaned from questionable sources and/or really crappy plugins.
Haha a lot of anger in there Keith, got to watch that blood pressure. But thank you for following up on it. It’s really interesting and useful.
In my mind, that all goes to show how the lovely bubble team need to increase (are there any?) best practices tutorials and blog posts, and importantly step up vetting of plug ins. It’s a wild wild west. Remember, most of us aren’t Keiths, and have no clue what we’re doing.
I’m not sure who’s in charge of customer/tutorial/success now with more people joining the team, so i’ll just tag @josh because he seems to be on top of stuff
BTW, the image uploading stuff in the original app isn’t using a crappy plugin, but is using the standard picture uploader. But the OP is doing something weird (probably manually) down the line. There’s what’s essentially the concept of being able to create a Listing that is awaiting approval. But rather than doing this in the Bubbly way (create a new Listing, but set that Listing’s “Approved” state to no), the Listing is stored in some intermediate object and the app owner is sent an email with details.
I suspect that something wacky is going on when they get this email and then they manually update the images… or something.
At any rate, I’m very interested to know how this is happening, cuz it isn’t obvious to me how you can insert a data URL into the database to be used as an image (at least on Windows). But it’s happening in this particular case.
Thanks for all the responses. We’ve narrowed down the issue is with the images. I’m still not sure how to fix the issue though. Customers are reaching out to me saying my site is not working, is anyone available to help troubleshoot this with me? It seems like it may not be that difficult of an issue to fix for someone that knows what they are doing. I’ve been banging my head against the wall trying to figure it out for the last 2 days. If anyone is available who that knows a solution on how to upload and crop images the correct way, I would really appreciate hopping on a Zoom call. Thanks everyone!
Given the time sensitive nature of your issue, you may find the fastest way is to hire one of the freelancers who offer hourly consulting. If you’re losing revenue due to the slowness, would be money well spent.