Intro
Bubble.io is one of the most popular no-code platforms, and most no-code developers have a multitude of Bubble applications in their portfolio. However, only some teams can boast of Bubble applications with high performance and flexible scalability.
In this article, we want to highlight the importance of performance optimization in Bubble applications, particularly in the context of the new pricing model introduced by Bubble.io, and share tips for creating highly performant products.
Why Bubble app performance is important
Of all the no-code tools, we choose Bubble.io for the following reasons.
- Customization. With the Bubble app builder, you have the freedom to customize your app fully. The platform supports responsive design, ensuring pixel-perfect UI/UX. You can define every aspect of your app, from workflow steps to search parameters and database fields.
- Responsiveness. You can create responsive web apps effortlessly. Your app's layouts will adapt seamlessly to fit any modern browser or device, ensuring a consistent user experience across platforms.
- Third-party services. Bubble's plugin ecosystem and API connector tool. You can easily integrate your app with third-party services or APIs or even utilize custom code to extend its functionality according to your specific needs.
- Scalability. When it comes to scalability, Bubble.io has got you covered. Built on AWS, the platform guarantees 99.9% uptime and constantly enhances its infrastructure. With just a click, you can scale your virtual computing power and rest assured, knowing that numerous security measures are in place to safeguard your app's data.
When developers entirely use all these advantages, a Bubble app becomes more extensive and complex, and the page loading speed and data processing time increase proportionally, becoming a problem.
The performance of Bubble projects is crucial for reasons that apply to any application and website.
- The Bubble app builder ensures a superior user experience, eliminating the frustration of waiting for a Bubble app to load. Fast-loading pages enhance user satisfaction and engagement.
- By optimizing the performance of your Bubble app, you can significantly improve the conversion rate. A fast and responsive app encourages visitors to take action, leading to higher completion rates for your desired Call to Action. Additionally, improved performance positively impacts other website metrics, such as bounce rate and user retention.
- An added benefit of optimizing your Bubble app's performance is higher rankings on search engines. When your app loads quickly and provides a seamless user experience, search engines recognize its quality and relevance, resulting in improved visibility and increased organic traffic.
Optimization is even more important for Bubble apps because of how the no-code platform works. In Bubble, there are basic parts in app creation.
- Design of pages: you can drag-and-drop elements to create pixel-perfect user interfaces.
- Database: no-code developers customize relational database architecture.
- Workflows: developers set up step-by-step actions in an app (for instance, "when a user clicks this button, save the data from these inputs to these fields and direct the user to the checkout page")
Thanks to this, it is easy to configure complex functions in Bubble applications, for example:
- User accounts (signup with email or social),
- Creating/browsing items from the database,
- API integrations & external database queries,
- Forms & surveys with dynamic results,
- Payments (direct, subscription, or peer-to-peer),
- Charts, graphs, data visualization,
- Notifications through email, SMS, or push,
- App analytics (e.g., Mixpanel, Amplitude),
- Integrations with AI/machine learning services or custom algorithms,
- And much more.
Under the hood, the Bubble app builder platform seamlessly translates editor setup into browser-friendly code such as HTML and Javascript. It leverages virtual servers to optimize performance, ensuring your Bubble app runs smoothly. Additionally, the platform continuously updates code bases to stay up-to-date with the latest technologies. Countless security measures are implemented to safeguard your Bubble app and protect user data.
The Bubble app builder also integrates with various external services that offer API access for data retrieval and storage, payment processing, authentication, and more. This ensures that your Bubble app can connect and interact with a wide range of services.
Moreover, the platform is fully extensible through Javascript plugins. You have the flexibility to develop your own plugins, enabling connections to services that may not be directly supported. These plugins allow you to incorporate custom elements written in Javascript or even write server-side code to enhance the functionality of your Bubble app further.
Because of such a large number of operations invisible to users, Bubble implemented the new metric as the basis of their new pricing model.
Bubble pricing model
Idea
As many startups and established companies started using Bubble to scale their solutions, in April 2023, Bubble announced a new pricing model based on “workload units.”
What we didn’t realize in 2017, when we introduced capacity, is that as we improve the performance of our systems, applications are less likely to hit peak capacity. This creates a perverse incentive for us: as our team improves Bubble and makes it faster and better, Bubble’s revenue from capacity goes down. As we have sped things up over the last several years, we have seen more of our revenue come from feature plans than from capacity… We want Bubble’s growth to be driven primarily by users scaling up on our platform.
Emmanuel Straschnov , Founder of Bubble.io
The workload units (WU) measure the number of computational resources required by a Bubble app to perform certain actions, such as sending emails or running workflows. This may include workflows (schedule, data-triggered, recurring), file upload, page load, APIs (including external requests), data (fetching, imports, exports, bulk operations).
The workload unit is determined by the weight of each action, which varies according to its complexity. For instance, uploading a 1MB file and a 100MB file will carry different weights and consume workload units accordingly.
The measurement of workload is based on units rather than count and is influenced by various factors. These factors encompass the quantity and size of data items being loaded or modified, whether it involves a custom plugin or a Bubble-built action, the specific action being performed, and any external API calls that are activated. The precise formula is proprietary and relies on numerous implementation specifics. However, in general, executing the identical workflow on identical data will typically result in comparable workload consumption.
By using WU, Bubble.io offers more flexibility and control to its users and gives an additional incentive to create high-performance applications, which will have a direct impact on end-user experience.
“Agencies with strong performance and optimization practices stand to gain the most from these changes, as they will now have a new value proposition for their clients.”
Victor Nihoul, Analysis of Bubble.io New Pricing Model
Bubble.io has committed to equipping users with the tools and resources to comprehend and monitor their usage. As users create their applications from the ground up, they can observe how their consumption progresses and make necessary adjustments.
In line with this announcement, Bubble has introduced a refreshed version of the App Metrics tab. This enhanced tab aids users in assessing their overall workload consumption and consumption specific to each action. This information lets users pinpoint the flows that consume the most resources and adapt their workflows accordingly.
How it works
To calculate the actual usage, Bubble monthly tracks and counts the Workload by measuring 12 Activity Types that make up the overall amount of work performed by Bubble to ensure the functionality of your application. At the beginning of the next month, Bubble resets the counter.
Bubble also provides a rough estimate for each action, which may vary depending on the complexity and the amount of data.
To refine this estimate and identify optimization methods, Bubble provides analytics tools that give you insights into various processes and actions that contribute to it. These tools allow you to gain an understanding of the different processes and actions that make an impact and provide ways to optimize your Bubble app.
The App Metrics dashboard in your bubble app (tab Logs -> App Metrics) contains charts that give you several visualizations of the work that your app is doing.
The Total Workload bar graph lets you see trends and patterns in your app's workload usage over time. It can help you plan future upgrades or optimization in your Bubble app.
The granular view gives you a pie chart where each slice represents one of the activity types that Bubble tracks to get you an understanding of the types of processes that contribute the most.
You can learn more about the charts and indicators on The App Metrics dashboard in Bubble documentation.
How to choose
Foremost, Bubble still offers the ability to start with a free plan and upgrade, downgrade, or cancel your application's pricing plan at any time. This means you can begin creating and testing your product for free and then flexibly adjust your Bubble plan according to changes in the number of users and workflows in your application.
Additionally, each plan is associated with a single application, allowing you to choose different plans for your projects at different stages of development (lifecycle).
Most applications can function adequately with the workload units (WU) included in their plan. The level of workload may be required when you start expanding your user base, working with large volumes of data, and/or frequently exchanging data with external APIs. In such cases, you can purchase a workload level to add units.
It is important to note that:
- Workload tiers are offered with volume discount, meaning you can lock in a number of units at low cost.
- There’s no need to upgrade your plan to add a workload tier to scale your app.
- You can enable flexible overages and allow your Bubble app to accrue flexible overages so that your app stays available if it exceeds its monthly workload allotment.
- You receive email notifications when your app has reached 75% and 100% of its available workload units to give you ample time to evaluate your options.
Bubble has also developed a unique tool Subscription planner to assist developers in choosing the optimal plan based on the estimated total workload units.
Tips on Bubble app optimization
Due to implementing a new pricing model, Bubble has also released many resources on application optimization. We recommend:
- Articles on Bubble.io blog - e.g. Efficient App Building 101: Improving Your Workload Usage, 10 Tips to Maximize Your Web App's Performance on Bubble
- Вubble.io webinar
- Bubble.io forum treads - for instance, Helping each other understand WUs and optimizing our apps
Right here and now, we want to share the most universal, effective, and easy-to-implement tips for optimizing Bubble apps.
- Do not use the bubble.io database to collect statistics about user activities. Better to use services to collect analytics, such as Amplitude. You can use the free Bubble Plugin from the Sommo team to enable user analytics quickly and easily.
- Do not use a heavy database search in conditionals. Use browser error handlers;
- Correct database design to make it easier to display and filter data in the RG.
- Use database Trigger event whenever possible;
- Do not use :count to display an empty state. Use :first item is empty;
- Do not display items by default;
- Optimize your search requests - each search result consumes 0.015 WU so. For instance, you can download only the necessary results when displaying them, always pre-filter data as much as possible, and minimize the usage of advanced filters because it requires downloading all results to the page;
- Optimize the steps in the workflow, do not make unnecessary steps;
- Use “approximate count” instead of “count” when an exact-exact count number is not critical.
Summary
Bubble.io builder has various benefits, including flexibility, responsive design, full-stack capabilities, and scalability. Bubble apps easily accommodate up to 100,000 daily users, sufficient for most consumer-facing platforms. However, a more extensive user base and increased application activity may necessitate a comprehensive optimization effort within the Bubble framework.
By optimizing Bubble applications, creators can enhance user experience, increase conversion rates, improve search engine rankings, and enhance overall app functionality. Optimizing the performance of Bubble applications is even more crucial, considering the new pricing model introduced by Bubble.io in 2023.
The Sommo team builds complex and scalable Bubble applications, for example, DYVO avatar generator, which gained over 100,000 users in the first month. Contact the Sommo team if you need assistance creating high-performing applications that deliver exceptional user experiences and drive business success.
%20(1).webp){kind=spacer}
