Optimizing page load times is a critical factor for any website, especially when working with no-code platforms like Bubble. Page load speed can affect not only the user experience but also your rankings on search engines. In this article, we'll cover how to optimize page load speed in Bubble using practical steps.
01 Use fewer elements
When building a Bubble app, the general rule is: the fewer elements, the better. Every element you add increases the complexity of the DOM (Document Object Model), which Bubble must render. The more elements Bubble needs to load, the slower the page performance becomes. This is especially critical for apps with a lot of repeating elements or dynamic content.
Instead of creating multiple sets of elements for desktop, tablet, and mobile views, you can use a single set and control their visibility and layout with conditionals.
➤For instance, instead of designing a different header for each screen size, you can use one element and set conditions like "Current page width > 992" to adjust its appearance. This method reduces the total number of elements and simplifies the page structure.
02 Hide optional elements by default
Hide elements by default if they are only visible under certain conditions. A great example of this is when you need elements to appear only on a desktop. Rather than loading them right away, you can hide them and show them using conditions. This way, the DOM loads faster since fewer elements are initially visible, and the necessary elements will load afterward.
➤ For instance, if you have a large header that is only needed on a desktop, hide it by default and use the condition "Current page width > 992" to make it visible when the page is wide enough.
03 Replace "Page is Loaded" with "Do When Condition is True" on SPA websites
Using the "Page is loaded" event frequently on a single-page application (SPA) can degrade performance. This event triggers every time there’s a transition using “Go to page”, even when the user is simply navigating between tabs on the same page. Instead of relying on "Page is loaded", it's better to use the "Do when the condition is true" event.
➤ For instance, here’s a step-by-step example for optimizing transitions between sections like "Users" and "User details":
- First, create a new custom state on the "User details" element. Name this state "Loaded" with a default value of "no".
- Next, set up two "Do when the condition is true" workflows with a frequency set to “Every time”:1️⃣ The first workflow triggers when "User details are visible" and "Loaded is no." This workflow will then set the state "Loaded" to "yes," indicating that this section has been loaded. In this workflow chain, you can add another “set state’ action to set up dynamic default values for the user’s information, such as “Picture”, etc.2️⃣ The second workflow triggers when "User details are not visible" and "Loaded is yes." This sets "Loaded" to "no," preparing it for the next time the section needs to load.
By using this method, you achieve three important benefits:
- You ensure that the state is dynamically managed for each user, allowing personalized data loading.
- Faster load times are achieved because conditions are checked as soon as all the data needed to generate a true value are loaded., rather than on every page transition.
- Easier debugging because it will trigger only when it needs to be triggered and you won’t need to click through each “Page is loaded” workflow if you use “Step-by-step” mode in debug mode.
This approach makes your Bubble application smoother and more efficient, focusing resources only on relevant conditions, instead of triggering unnecessary events.
04 Limit the usage of plugins
Try to minimize the number of plugins you use. Why? Each plugin introduces its own libraries, headers, and elements, which may not be fully optimized. While plugins can enhance functionality, they also add complexity and slow down page load times. The fewer plugins you use, the more streamlined your site will be.
If a plugin includes a wide range of elements, consider finding a plugin that focuses only on the specific functionality you need. This can significantly reduce the plugin's weight and improve overall performance.
05 Optimize your images
Images are often the largest contributors to slow page speeds. It’s best to use images that are smaller than 1MB. Additionally, be cautious with vector images (SVG format), as they are often larger than PNGs and can negatively impact load times.
If an image is too large (over 1MB), consider compressing it to reduce its size, but only do so when necessary to avoid compromising image quality. Optimizing image sizes and formats can make a significant difference in page speed performance.
06 Use variables to optimize data loading
A variable in Bubble is essentially a default or repeating group with a data source that can be referenced from other elements. This is especially useful in scenarios where multiple elements need the same data, allowing you to avoid duplicating searches and improving performance.
Let’s take a common example: you have a small marketplace website with a search page that includes a repeating group of products, an input field, and a fuzzy search plugin as the search engine. In many cases, you might create two "Do a search for" data sources—one for the repeating group and another for the fuzzy search. However, by doing this, you are doubling the amount of data the user needs to fetch, which can drastically impact your site's performance, particularly on mobile devices or when using client-side filtering.
To optimize this, you can create a single invisible repeating group (often placed inside an invisible pop-up) and set its data source with a "Do a search for". Once this group has the data, any other element that needs the same information can simply reference this variable’s data source. This way, the search is only done once, reducing the load time and improving the user experience.
Using variables this way ensures that your data is loaded efficiently without duplicating searches, which can significantly enhance your app’s performance and page load, especially for users on slower networks or mobile devices.
By applying these optimization methods, you'll significantly improve your Bubble app's performance. This approach ensures faster load times, a smoother user experience, and the ability to scale your app efficiently, even as it grows in complexity. A well-optimized site is key to keeping users engaged and boosting your business potential. 🚀
Still have questions?
At Minimum Code, we will help you optimize your project using effective development methods. With our skilled developers your site realization will be well-organized and built on a solid foundation.
Ready to get started? Contact us today to discuss your no-code development needs!
Latest Articles
Ready to build your product?
