Performance Tips

You can enhance the performance of your responsive apps just by refining the design!

Skill Level: Intermediate

Avoid too many components.

  • To keep your app speedy, make sure to be careful with the number of components on any given screen. Too many components can make screen loading slow for your users! Try dividing up the screen into a flow of screens for your users. More screens is better for user performance and experience than one screen with lots of components.

Avoid deeply nested components.

  • Avoid nesting components too deeply in parent and child components - nested parents that are over 4 components deep will most likely experience lower loading speeds and unexpected results. Furthermore, deeply nested components make it much more difficult to manage the layout settings of those components. Consider breaking up the screen into multiple screens or reworking your database to display the data you need to display.

Turn off Lottie previews in the builder.

Avoid excessive relationships in the database.

  • Relationships can slow down the builder if you use too many of them or have deep data being displayed. Consider consolidating similar collections into a single collection. For example, rather than having a collection for Shoes, Pants, Shirts, and Hats, we would create one collection called Clothing Pieces with a text property called Type to hold these different types.

Avoid large amounts of text and uploaded images.

  • Since text and images are generated responsively in the builder, having large bodies of text, background images, or other uploaded images can slow down the builder. Consider storing lots of text and images in the database as dynamic data if possible rather than showing them as static, fixed components.

Turn off screen connections.

  • Very large apps can sometimes experience slowness if screen connections are turned on. Consider turning this off if your builder experience is slow.

Last updated