Skip to main content

App Performance

If you do not see any Images, Products, or Categories, the App loads slowly, blurry Image, the below solutions will solve them.

tip

If your images are in .avif format, we recommend using a different format such as webp. This is because the avif format may cause the application to freeze on Android

1. Why are Images Blurry?​

If you see images have non-good resolution on the Simulator and Sharing feature, rest assured! We downgrade the resolution of images to faster speed of FluxBuilder.

👍 Your real app will load images with high resolution smoothly on the real device.

2. No Images, Products, or Categories visible​

The common product image issues are usually generated from slow app loading. To make the app load faster or to fix missing Product Images, you would resize images, optimize the network request for Images.

For WordPress​

Option 1: Regenerate Thumbnails Plugin

  1. On your website, setup the Regenerate Image plugin, then be sure your site plugin has regenerated thumbnail like this image:

  2. Go to Setting/ Media Settings, and set up the image sizes for the Product Image. This is our recommended settings:

  3. Go to Tools/Regenerate Thumbnails and click the blue button Regenerate Thumbnails For All xx Attachements, then wait for the process to complete:

  4. To check if the image is generated correctly, go to Media and click to view any image files, select Regenerate and you can check the list of new images generated with xxx-smal or xxx-medium or xxx-large format.

  5. After running the Regenerate successfully, open your app on the FluxBuilder, go to Features → open General → open App Performance and enable Image Optimization. In Optimize Image Plugin, select Regenerate Thumbnails.

Option 2: WebP Express Plugin

This is a good solution to optimize more image loading by converting the Image to Webp image type by using WebP Express plugin. This is also a good tool which is our recommendation to compress the images in order to optimize the image loading.

Option 3: Optimole Plugin

A new plugin is supported to optimize image performance - Optimole plugin.

Very similar to SPAI. It processes your images via their CDN, delivering fully optimized and perfectly sized versions based on the visitor's device and browser. It also includes lazy loading and WebP conversion. The plugin enhance loading speed and image quality by dynamically adjusting images based on visitor's screen size.

Support WooCommerce, Pro(WooCommerce), Multi Vendors, Listing, Wordpress - GPT, Manager, and Delivery apps.

To apply Optimole on app:

Step 1: install the Optimole plugin https://wordpress.org/plugins/optimole-wp/ on your website.

Step 2: Open your app on FluxBuilder. Go to Features on the side menu. Select App Performance. Enable Image Optimization. In Optimize Image Plugin, select Optimole.

For Shopify​

You can modify the width and height of images for high resolution. For example, set _imageWidth to 350 and _imageHeight is 500 as this image:

For PrestaShop​

On your PrestaShop website, go to Design > Image Settings, add list requirement images if it does not exist: small_default, medium_default, large_default. Then, tap the Regenerate thumbnails button as this image:

note

If you see images have non-good resolution on FluxBuilder, don't worry, we downgrade the resolution of images to improve the speed of FluxBuilder. After building, the app loads images with high resolution smoothly on the real device.

3. Improve App Initialization​

Lazy Tabbar​

If your app has too many tabs on the TabBar with complex content, Lazy Loading can help improve performance.

  • Faster loading: Loads tabs only when users open them for the first time, reducing unnecessary API calls.
  • Less memory usage: Helps your app run smoothly, even on low-memory devices.
  • Good to know: Tabs may take a moment to load the first time users switch to them. However, this is better than loading too many tabs at once when the app starts.
  • If your app has only a few tabs, enabling this feature is optional.

Configure Lazy Loading in FluxBuilder or directly in your source code:

Lazy Category​

⁉️ “Have 100 categories in your app?”

If your app has many categories (more than 100 categories), enable Large Number of Categories to automatically activate Lazy Loading and keep your app running smoothly:

  • Better experience: show a Scroll-to-Top button and skeleton loading effects.
  • Multi Level Category Layout: a new layout organizes nested categories with the Deep level feature.
  • Good to know: Some category names may not appear until their data is loaded.

🛍️ Supported platforms: WooCommerce, Shopify, BigCommerce, PrestaShop, and Multi-Vendor.

Configure Multi Level category layout in FluxBuilder:

4. Improve Product Detail Loading​

If you do not want to wait to load the product variant when opening the product detail screen, you can enable this feature.

The product detail screen will display all variant product data without waiting, as it is preloaded while loading the product list.

However, if you have a lot of variants, it may cause server performance issues because it needs to load a lot of things when fetching your product list data.

5. HTTP Caching​

All apps support the HTTP caching to save the performance and the repeat network request that will help the app load faster. To enable this feature, please open your app on the FluxBuilder:

  1. Go to Features → open General→ open App Performance

  2. Enable HTTP Cache

tip

This feature will cause some unexpected issues due to caching data on the mobile side. Therefore, you should still turn off if you don't use it.

This method is not suitable for some kind of Blog/News app that requires updating the Blog more regularly. The caching time could be managed by customizing the DefaultCacheManager https://tppr.me/ZRjYZ - for more info please refer to the library - https://pub.dev/packages/flutter_cache_manager

6. MStore API Caching​

⁉️ Want your WooCommerce or WordPress app to load faster?

🙋‍♀️ Enable MStore API Caching to preload product data when opening the app for Home and Dynamic screens. It also caches data on the server to reduce server resource usage.

How to set it up:

  • Step 1: Install the latest MStore API and WP REST Cache plugins on your website.

  • Step 2: In your WordPress dashboard, select MStore API menu and upload your App UI config file(s) exported from FluxBuilder, such as config_en.json for English or config_ar.json for Arabic. Then, clear the WordPress REST API cache:

  • Step 3: In FluxBuilder, go to Features → General → App Performance and enable MStore-API Caching. Then, rebuild your app and enjoy a faster app experience!

tip

  • It can cause some problems due to caching in some way. You may need to clear the cache manually on your admin site.

  • It will automatically flush the caches if (some of) its product content is edited.

  • MStore-API Caching is disabled by default, so remember to enable it after activating and upload the config file(s) to the MStore API.

  • Need multiple languages? Upload separate config files for each language - https://tppr.me/bLr2Z

  • Update your app's UI by re-uploading the config file—no need to resubmit to app stores.

7. Optimize Server Side​

  • You can do anything to apply caching on your server side, especially cache API requests.
  • Or upgrade your server system/hosting to reduce latency when calling the API.

If you are using Wordpress system as the backend, you can install Query Monitor plugin. It will be useful when you want to check where the Database queries come from. It's a free and open-source plugin where you can filter your queries in various contexts, such as:

  • Which plugin called
  • Queries that took the most time
  • Duplicated queries
  • You can filter by Select / Update / Insert / Delete

That’s all 😊