Android build runs slower than Mobile Browser

Ionic Framework
1

I’ve been working on a simple app for a few weeks now, and one of the pages is quite slow when running on an Android device. I know I’m making changes to layout when a user clicks certain elements (see images), but I’ve noticed that same page runs considerably faster when opened with the device’s web browser.
My question is: should I expect at least the same speed performance I get from the device browser from my app when installing the APK?

Image 1: standard collection of items hidden by default.
canvas_selection-position1

Image 2: collection of items is visible depending on the category clicked.
canvas_selection-position2

Some things to consider:

  • Yes, I’m making changes to the layout, and I know it’s quite a resource-intensive task.
  • The application performance is the same when running with the --prod flag and without it.
  • The application performance changes depending on the device, even if the same Android version is running on different devices (Resources, yeah).
  • When running in a computer via ionic serve, there’s little to no performance problems.
  • When accessing the same page from the device browser via the local network the animations run faster than when accessing the same page on the installed application.
  • The application has been tested using cordova-android 8.0.0.
  • There’s no loading problems with the application, it boots up quite fast, even from a cold boot.
  • The ‘intro’ animation for that same page is absent or really slow when running the application.
  • Other pages animate as expected.
  • Moved the Storage data requests from ngOnInit to ionViewWillEnter and lastly to ionViewDidEnter with no apparent difference in performance.

Ionic Info:

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\userdata\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

System:

Android SDK Tools : 26.1.1 (C:\Users\imdevdaniel\AppData\Local\Android\Sdk)
NodeJS : v10.15.2 (C:\DevHome\NodeJS\node.exe)
npm : 6.4.1
OS : Windows 10

Installed Plugins:

  • com-badrit-base64 0.2.0 “Base64”
  • cordova-plugin-camera 4.0.3 “Camera”
  • cordova-plugin-device 2.0.3 “Device”
  • cordova-plugin-file 6.0.1 “File”
  • cordova-plugin-file-transfer 1.7.1 “File Transfer”
  • cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
  • cordova-plugin-ionic-webview 4.1.1 “cordova-plugin-ionic-webview”
  • cordova-plugin-splashscreen 5.0.3 “Splashscreen”
  • cordova-plugin-statusbar 2.4.3 “StatusBar”
  • cordova-plugin-whitelist 1.3.3 “Whitelist”
  • cordova-sqlite-storage 3.2.1 “Cordova sqlite storage plugin - cordova-sqlite-storage plugin version”
2

Did you try to compress your images?

3

Images are not compressed. Their dimensions are 120px by 120px for category icons and 240px by 240px for items. Sizes are slightly below 40KB at worst, below 10KB at best.