We recently discovered that one of the hottest topics on Bubble's forum revolves around users grappling with a slow Bubble editor or encountering browser crashes while using the Bubble Editor.

This isn't a shocker. Every Bubble user, including ourselves, has faced this issue at some point. In Bubble's defense, the Bubble Editor is a powerhouse. It juggles countless elements, workflows, and pages. Naturally, it can't be as nimble as a basic online notepad, right?

That said, we at Flusk have always navigated this challenge. Being Bubble lovers, we've developed several techniques to enhance the Bubble Editor's speed and dependability. Yes, the forum is brimming with tips. But the guidance is scattered. So, we've curated this article, collating our best advice to boost your Bubble Editor performance!
‍

Symptoms

‍

Before we dive into the remedies, let's diagnose the problem. We're addressing those who:

• Find the Bubble Editor slow or laggy
• Encounter frequent editor or browser tab crash
• Especially work on single-page apps or large applications

If these sound familiar, you're in the right spot!

‍

‍

However, if you're experiencing the following, consider checking Bubble’s status or reporting a bug:

• The "Sorry, we ran into a temporary bug and can’t complete your request” alert.
• Occasional or abrupt slow/laggy editor responses, possibly due to Bubble's servers being momentarily overloaded.

‍

Why is the Bubble Editor Slow?

‍

A brief primer on the Bubble Editor's mechanics can provide insights into our proposed solutions.

The Bubble Editor is akin to a Swiss Army knife. It has to display all elements (visible or not) on your application pages efficiently. Swapping between pages? The Editor caches prior elements to ensure swift transitions. Additionally, real-time updates are crucial. If teammates make changes, they need instant visibility. Similarly, your modifications must be saved promptly. Add to this, the entire database is a click away, and there's an issue reporter checking every workflow or element property.

Most of this action takes place in the browser, consuming significant resources. The CPU (your computer's brain) and RAM (short-term memory) are key players.

‍

Solutions

‍

Here are strategies to enhance the Bubble Editor, ranging from quick fixes to long-term solutions.

‍

1. Reset the Browser’s Cache

‍

Clearing your cache and hard-reloading the page can do wonders.

How? If you're editing using Google Chrome:

• Right-click on the web page and choose 'Inspect'.
• When a window with page elements pops up, click and hold the refresh button.
• A list of options should appear; select 'Empty Cache and Hard Reload'.

Although effective occasionally, this method predominantly addresses symptoms rather than the root problem.

‍

‍

‍

2. Clean Your Computer’s RAM

‍

This technique parallels the previous tip. By cleaning your computer’s RAM, you offer your system a fresh start.

Methods to declutter your RAM:

• Close all Bubble Editor tabs.
• Terminate all browser windows.
• Restart your computer.

Third-party tools, like CleanMyMac for Mac users, facilitate routine RAM clean-ups. However, these actions won't address the underlying issues causing the sluggishness and potential crashes.

‍

3. Using Reusable Elements to Split Your App

‍

Employing reusable elements can remarkably boost the efficiency of editing intricate pages. Although they expedite editing, they can also complicate the process. Having tackled massive single-page apps myself, I've transitioned to the use of reusable elements. The unfortunate reality with the current stage of Bubble is this: as elements and workflows accumulate, the editor's responsiveness dwindles, sometimes to a near standstill forcing a browser restart.

Splitting the page into reusable groups and editing them one by one, on the other hand, doesn’t balloon the RAM usage in the same way, even if the total number of elements remains the same (or is even slightly higher, as the reusable itself is also an element). How noticeable is the difference? Night and day, in our experience.

Reusable elements usually serve to hold multiple elements that recur throughout your site. For example, if your app has multiple login points, a reusable element for the signup form helps with updates and maintenance.

But this tip centers on deploying reusables for groups that might not necessarily repeat. The reasons? As previously emphasized, using reusables reduces editor sluggishness.

‍

For deeper insights and practical examples related to this, check out this forum thread.

‍

4. Deactivate the Issue Reporter

‍

Turning off the issue reporter can provide relief, as it often hogs a substantial portion of the editor's resources. Append this URL parameter to your Bubble Editor:

&issues_off=true

‍

However, please be really careful. Deactivating the issue reporter can let you push live changes with unresolved issues, potentially causing app disruptions. Always ensure you remove this parameter after deploying to stay updated on emerging issues.

‍

5. Manage Your Tabs

‍

Multiple open tabs can substantially drain resources and decelerate the Editor, more so when multiple Bubble Editor tabs are active. Minimize open tabs, or use utilities like The Marvelous Suspender.

‍

6. Deactivate Extensions When Using the Editor

‍

Extensions, particularly on Chrome, can decelerate the Editor, adding to the CPU's workload.

To manage this, use Chrome's experimental feature:

1. Navigate to chrome://flags/.
2. Search for "Extensions Menu Access Control” and activate it.
3. In the Bubble Editor, deactivate unnecessary extensions using the extension icon beside the search bar.

Alternatively, use a browser profile free of extensions or switch to a dedicated browser.

‍

‍

7. Switch to Firefox

‍

An unconventional, yet often echoed across various threads is the recommendation to switch to Firefox from browsers like Chrome, Safari, or Edge. Users have observed a noticeable enhancement in the Editor’s performance and speed when opting for Firefox.

The distinction in performance may arise due to the different rendering engines each browser uses. Firefox operates on the "Gecko" engine, while Chrome relies on "Blink," initially spawned from WebKit. These engines can yield varying results in content interpretation and display, causing certain websites to function optimally on one engine as opposed to another. Additionally, while Firefox utilizes the SpiderMonkey engine for JavaScript processing, Chrome employs V8. Given the unique script-writing methods for websites, one browser's processing might outperform another.

‍

8. Disabling Hardware Acceleration

‍

A tip from @aj11 on the Forum suggests that disabling Hardware Acceleration in Chrome might enhance performance.

At a glance, it appears beneficial, especially for activities like streaming videos or playing browser games. However, for Bubble, this move transfers the operational load to your graphics card from your usual memory/CPU. Generally, your regular memory and CPU can handle Bubble's tasks more efficiently.

‍

9. Upgrade Your RAM

‍

Investing in more RAM can prove beneficial in the long run, especially for those engrossed in extended development sessions or frequent Bubble use. The feasibility of a RAM upgrade varies across computers – it's a breeze for some, while for others, such as certain Macbooks, it might not be an option.

Another approach is to upgrade to a higher-performance computer. Before taking the plunge, consider discussing potential hardware choices on the Bubble Forum for informed decisions.

‍

10. Use a Cloud Computer for Bubble

‍

For those who predominantly work on Bubble, migrating the Bubble Editor to a cloud computer might be a worthwhile consideration. This method might be the ideal solution for those seeking a reliable, long-term option without the need to invest in a new computer or undertake hardware upgrades.

We highly recommend services like Shadow For Makers, with packages commencing at a budget-friendly $29.99 (https://shadow.tech/shadow-for-makers).

‍

Methods that Don't Work

‍

While we've highlighted functional solutions, let's also address and dispel some common misconceptions:

• Upgrading to a more premium plan won't drastically elevate performance. The underlying issue lies with the bubble/browser, not the server.
• For those using the Apple M1/M2 chip, getting the specialized mac-chip version of Chrome won't help anymore. The specialized version has since been merged into the standard Chrome version.

‍

Conclusion

‍

Our goal is to help you cultivate a smoother and more streamlined development journey. We're eager to know which solution proved most effective for you. If you find yourself at an impasse or face sporadic issues, don't hesitate to reach out to the Bubble team for support.

‍

Help Bubble Improve

‍

Expressing frustrations about a slow Bubble Editor or frequent crashes, whether among peers or on forums, won't necessarily contribute to Bubble's evolution.

Instead, make a constructive move by reporting the encountered issues directly to Bubble, ensuring you detail your hardware specifications like computer type, RAM, and so on. This proactive approach enables them to address the fundamental problems and refine the editor based on collective feedback.

‍

Sources and Mentions:

• Using Reusable Elements to Split Your App. Credited to @peter: https://forum.bubble.io/t/a-guide-to-advanced-use-of-reusables/63884
• Resetting Chrome cache. Courtesy of @newhorizoncode: https://forum.bubble.io/t/clearing-cache-quickly-speed-up-bubble-editor/199238
• On Disabling Hardware Acceleration, a suggestion by @aj11: https://forum.bubble.io/t/bubble-editor-keep-crashing/247211/10

‍