25% speed increase through element renaming?

I noticed something I’d like to share with the community for confirmation.

In my apps, I often have more than 1,000 elements, but I dislike using long names as they become challenging to read in the element tree. As a result, I end up with numerous duplicates like “Button - Submit.” However, this causes confusion in Bubble when trying to edit workflows and makes it more difficult to assign actions due to multiple elements with similar names.

To address this issue, I came up with an idea: I added a unique 4-character prefix to all element names. To generate these codes, I used a password generator, creating a list of several thousand unique 4-character codes. I then pasted these codes at the beginning of each element’s name, separated by a dash, followed by the element type (Group, text, input, etc.), and a short description. My primary goal was to keep the names as short as possible.

After renaming all the elements, I duplicated the app and conducted some speed tests. Surprisingly, it appears that the naming convention has an impact on the execution speed. On mobile devices, I observed up to a 25% increase in page load time. I wonder if anyone else has tried a similar approach and had similar experiences.

In retrospect, I believe a 3-character code could also be sufficient. By using only easy-to-read uppercase letters and numbers, it’s possible to generate more than 40,000 unique codes. Has anyone experimented with a 3-character code system and experienced any performance improvements?

I think the methodology of your test can better justify the preformance gain.
Bubble automatically assign a unique id to every element in the page, the displayed name it’s only a convenience for the developer working in the editor and has little to no use in the deployed app.
Probably your naming convention can slow down the app by a few millisexonds because all your elements have 5 extra characters in their display name and this increase a bit the resulting javascript file.

1 Like

Thank you for your response and insights. I apologize if my initial explanation was not clear enough. The primary reason I added the unique prefix to element names was to make it easier and faster to find and assign elements within the development environment. The speed increase I noticed was indeed a pleasant by-product.

I understand that Bubble automatically assigns a unique ID to each element, and the displayed names are mainly for convenience during development. However, during the development process, being able to quickly identify elements with concise and distinctive names has proven to be quite beneficial for my workflow.

Your point about the potential impact on the resulting JavaScript file due to the extra characters in the display name is valid, and I’ll keep that in mind. I’ll continue to monitor the performance and assess whether the convenience of swift element identification outweighs any potential impact on the app’s speed.

Thank you again for sharing your thoughts, and I appreciate your input on this matter. If you have any further suggestions or experiences to share, I’d be more than happy to hear them.

I do get why you name elements like that, I do something similar.
I’m just suggesting that the difference in speed is probably due to something else and not the element name. It’s very easy to make mistakes with assumptions and methodology when perdorming benchmarks.
It may well be that your first test was days ago and the new one is benefitting from underlying bubble changes (the last community update talks about ongoing improvements to page load performance).

1 Like

I conducted the performance tests on identical apps running across different browsers, including Opera, Chrome, Safari, and Edge. The only variation between the apps was the naming of the elements. Surprisingly, the speed increase was significant across all browsers, despite no other changes in the apps. I understand that it may seem peculiar, but I carefully controlled the variables during the tests to ensure accurate results.

I acknowledge that benchmarks can be influenced by various factors, and I’ll certainly consider your suggestion to reevaluate the methodology and assumptions made during the testing process. You rightly pointed out that underlying changes in Bubble might have contributed to the improved page load performance in the newer test.

I’ll continue to keep an eye on the app’s performance and conduct further tests to validate the impact of the element naming convention on the app’s speed.

Thanks a lot!

The reason behind my idea for the randomized character code is my penchant for order and tidiness. Previously, I used numbering for elements, but whenever I had to re-order groups or elements, it felt disorganized and violated my sense of neatness. To address this, I opted for the unique character codes, as they provided a cleaner and more organized structure.

Regarding the speed increase, that was merely an observation on my part, unrelated to my initial intention. I noticed it as a pleasant by-product of the naming convention, but the primary motivation was to streamline the element management process.

You mentioned that you use a similar approach. Would you mind sharing it?

from the title of the topic (“25% speed increase through element renaming?”) I thought that the main point was the speed increase.

a single capital character that identifies the role of the element (eg. control, input, container, repeating group) followed by a couple of key words and a number if more elements cover the same functionality.

Understood. I can relate to the numbering approach. I have been there and wanted to move away from it. Indeed, finding our own conventions that suit our workflow is essential. Thanks pal.

1 Like