Nocode Build
July 24, 2022

10 tips to speed up Bubble performance

Author
Minh Pham

With Bubble's no-code visual web app editor, you can build fast and performant apps easily if you follow the following rules:

10 tips and tricks to lower Bubble loading time speed

Avoid using inline CSS

Avoid this

To avoid generating Inline CSS, use Element Styles to style your elements. Inline CSS means all CSS needed to style your element will be included in the HTML associated with your visual element. This is bad for SEO and page loading time.

Minimize the size of images

Use TinyPng to resize images

Most people forget to do this, but it is important. Before uploading images to your site, reduce their file size with TinyPNG to improve page load times.

Minimise use of Groups and RGs

Avoid nested groups

A group is basically a div block in HTML. To see this, create a group and click right on the bubble to inspect it. You will see it displayed as a div element. The more groups and RGs you create, the more elements need to be displayed on the page, so it does impact loading time if you keep on nesting groups within groups. Only created groups and RGs when necessary.

Keep elements hidden by default until you need to show them

Show elements on conditional

As a general rule, it's best to hide all of your visual elements by default and display them only when needed. Always prioritize loading elements above the fold first, then render the rest later using a "Page is loaded above the fold" conditional. It will slightly improve your page load performance.

Improve Repeating Group Loading Performance

Lazy loads RGs

Untick "Show all items immediately" to load your Repeating Group elements on scroll. Your first "X elements" will be loaded on page load, and then Bubble will render the remaining ones only on page scroll. This helps improve performance especially if you have hundreds of elements in your Repeating Group.

Use reusable elements

Create reusable elements

Reusable elements can speed up the editing of complex pages. On the other hand, they can also make the editing of an app a little bit more complicated. Reusable elements do not, by themselves, speed up page loading time. However, if you have multiple instances of the same reusable element on a single page, these elements will load only once, which can speed up your app's loading time.

Use option sets over data types

Try to use more Option Sets

Option set are a kind of “light” database in Bubble that you can use to store static information. They are great for storing values that you need around in your app, such as the options you want to show in a dropdown or your app's settings. Option sets are faster to access, as they require no database reads, so using them will increase the performance of your Bubble app.

Reduce client-side “advanced” searches

Avoid this when possible

When you do a search for a specific element, the query will be executed against the database. A "do a search for" query is equivalent to a SQL "select * from" statement. When you do advanced searches or filtered searches, the data is processed on your navigator and can have a big impact on performance if there are many items in your list.

Use backend workflows

Your backend workflows page should be full

Keep your workflows simple and short. If a workflow’s actions need more than 1-2 lines, consider moving it to a backend workflow. Keep most of your front-end workflows to no more than a couple of steps in length.

BONUS: 3 tips to improve perceived performance

Waiting for a website to load is an inevitable part of the web-browsing experience. Loading times can harm the overall experience of an application. Making users wait too long for your app to load can make users impatient. If users get that feeling, they’ll abandon your site and go somewhere else. To make users happy, you should always provide visual feedback to give an indication that something is happening when they initiate an action.

Fortunately, there are a few things you can do to speed up your user’s sense of time, making them feel like your content loads faster than it does and your app is working correctly.

Animated loading indicators

To reduce uncertainty and increase usability, a progress indicator should be used any time an action takes longer than one second to load. Animation is not recommended for shorter actions, because the user might feel anxious about what just flashed on and off the screen.

You can find beautiful infinite spinning loaders or percent-done animation on Lottie or use a Bubble plugin to add a loading screen in Repeating Groups.

To add a loader on top of your Repeating Group:

  • Create an Align to Parent Container with 2 children elements: a Repeating Group for your data and a Group Container with your spinner animation
  • Make your spinner visible when RepeatingGroup is loading is "yes"
  • Make your RG visible when RepeatingGroup is loading is "no"

Skeleton screens

A skeleton page is a blank version of a page into which information is gradually loaded. It provides an alternative to the traditional animated indicators.

To create a skeleton screen on top of your Repeating Group:

  • Install Draggable Elements plugin (Free)
  • Create an Align to Parent Container with 2 children elements: a Repeating Group for your data and a Group Container for your Skeleton UI (Skeleton UI Group)
  • Add a Drag/Drop group within the the Skeleton UI group and Align the drag/drop group to the left side of the skeleton group and make sure the the height of it covers all the components of the Skeleton UI Group
  • Once the drag/drop group has been added, change its properties to the following:

Background style: Gradient
Gradient style: Linear
Gradient direction: Left
Starting color: color doesn’t matter, change transparency to 0
Ending color: color doesn’t matter, change transparency to 0
Intermediate color: #FFFFFF, change transparency to 30
Borders: none
Width: 100px

  • Go to the Workflow tab and add a new “Do every 5 seconds” event and add a condition to do this workflow only when the Skeleton UI group is visible. For the interval, put “1.5” seconds.
  • Add two Move Drag/drop Group actions from the element actions
  • For the first action, set it up to look like this:

Element: the drag/drop group
Movement Type: Using another element
Element to move to: Skeleton UI group
Offset Top: 0
Offset Left: the width of the skeleton UI group
Duration: 1500

  • For the second action, set it up to look like this:

Element: the drag/drop group
Movement Type: Using another element
Element to move to: Skeleton UI group
Offset Top: 0
Offset Left: -100
Duration: 0

Progress bars

A progress bar helps users develop an expectation for how long an action will take to process. The way your progress bar moves affects how people perceive load time. It can be useful to display file upload progress for example.

To simulate

  • Install Progress Bar plugin (Free)
  • Add your progress bar where ever you want to put on your page
  • Create a new custom state on the page and name it "percentage" and is of type "number"
  • Insert dynamic data from that custom state that you just created to your progress bar element
  • Go your workflow tab and add a "Page is loaded" event then set your progress bar custom state to 0% when page load and add a pause to animate the progress of the bar
  • Repeat these two steps one after another by increasing your custom state percentage until you get to your progress bar to load to 100%

Kick off your nocode career today

Ready to start learning nocode ?

Similar posts

Newsletter

Find the best nocode jobs, sent straight to your inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
✌ By signing up you agree to the Privacy Policy.