Skip to main content

App Performance

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

1. 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​

  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.

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.

For Shopify​

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

For PrestaShop​

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.

2. App loads slowly​

There are 2 ways to improve performance of your app:

  • HTTP Caching: used for all apps.
  • MStore API Caching: used for WooCommerce and WordPress apps.

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

Note: 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

MStore API Caching​

This way is used for WooCommerce and WordPress apps. They support a great Caching method to improve performance loading.

To improve the caching from these apps, please follow these steps:

  1. Step 1: Install MStore API to your website Update mstore-api to the latest version and install the wp-rest-cache plugins.
  2. Step 2: Upload the config json file to MStore API Go to Wordpress dashboard, select MStore Api menu and upload the config file config_xx.json which you get from Export from your App on FluxBuilder. Then make sure to clean up the Wordpress Rest API cache - https://tppr.me/wdK1I
  3. Step 3: Enable MStore API option in one of the 2 ways below: open your app on the FluxBuilder, go to Features → go to General→ open App Performance and enable the MStore-API Caching. Then rebuild the app and enjoy the new Super-Speed app.

tip

Note:

  • This is also great solution if you would like to change the app UI without resubmit to App stores, by reupload the config_xx.json file to MStore API.

  • It will automatically flush the caches if (some of) its products contents are edited.

  • Default setting is to disable the MStore-API Caching__, so you need to enable it after activating the plugin and upload the config_xx.json file to the MStore API.

  • The latest MStore API is also supporting multi caching per languages, you could go to the mstore-api and upload multi config files - https://tppr.me/bLr2Z