Skip to main content

App Performance

1. Caching to improve App Performance​

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 → click Apply and Save. 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

2. Image Optimization​

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.

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

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

  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 → click Apply and Save.

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.

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

💠 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: https://tppr.me/NO9VG

3. HTTP Caching​

Our 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
  3. Click Apply and Save

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