Hello Ionic Community,
I’m experiencing performance issues with my Ionic app that seem to be device-specific. The app runs smoothly on all Android devices and newer iPhones. However, on older iPhones and iPads (regardless of age), I’m facing significant performance challenges.
For the iPhones the issue mainly persists for devices that run iOS 15 and below. For the iPads the iOS version doesn’t make much of a difference.
The main problems are:
- Animations are not smooth on iPads.
- Navigation takes a long time due to slow data retrieval from the cache, causing the app to wait for the data to load.
I’ve narrowed down the issue to the animations and data loading processes, but I’m unsure how to proceed in optimizing for the affected devices.
Here is my package.json:
“dependencies”: {
“@angular-devkit/schematics”: “^15.2.6”,
“@angular/animations”: “^15.2.8”,
“@angular/cdk”: “^15.2.8”,
“@angular/common”: “^15.2.8”,
“@angular/core”: “^15.2.8”,
“@angular/fire”: “^7.5.0”,
“@angular/forms”: “^15.2.8”,
“@angular/localize”: “^15.2.8”,
“@angular/material”: “^15.2.8”,
“@angular/platform-browser”: “^15.2.8”,
“@angular/platform-browser-dynamic”: “^15.2.8”,
“@angular/router”: “^15.2.8”,
“@aspnet/signalr”: “^1.1.4”,
“@awesome-cordova-plugins/android-permissions”: “^5.43.0”,
“@awesome-cordova-plugins/core”: “^5.40.0”,
“@awesome-cordova-plugins/diagnostic”: “^5.40.0”,
“@awesome-cordova-plugins/nfc”: “^5.43.0”,
“@awesome-cordova-plugins/wifi-wizard-2”: “^5.40.0”,
“@byteowls/capacitor-oauth2”: “^4.0.2”,
“@capacitor-community/barcode-scanner”: “^3.0.3”,
“@capacitor/android”: “^4.0.0”,
“@capacitor/app”: “^4.0.0”,
“@capacitor/browser”: “^4.0.0”,
“@capacitor/core”: “^4.5.0”,
“@capacitor/device”: “^4.0.0”,
“@capacitor/filesystem”: “^4.0.0”,
“@capacitor/ios”: “^4.0.0”,
“@capacitor/keyboard”: “^4.0.0”,
“@capacitor/local-notifications”: “^4.0.0”,
“@capacitor/network”: “^4.0.0”,
“@capacitor/preferences”: “^4.0.2”,
“@capacitor/push-notifications”: “^4.0.0”,
“@capacitor/splash-screen”: “^4.0.0”,
“@capacitor/status-bar”: “^4.0.0”,
“@ionic-native/android-full-screen”: “^5.29.0”,
“@ionic-native/app-rate”: “^5.33.0”,
“@ionic-native/app-version”: “^5.32.1”,
“@ionic-native/autostart”: “^5.31.1”,
“@ionic-native/badge”: “^5.36.0”,
“@ionic-native/barcode-scanner”: “^5.34.0”,
“@ionic-native/calendar”: “^5.33.1”,
“@ionic-native/camera”: “^5.27.0”,
“@ionic-native/core”: “^5.0.7”,
“@ionic-native/date-picker”: “^5.34.0”,
“@ionic-native/file”: “^5.36.0”,
“@ionic-native/file-opener”: “^5.36.0”,
“@ionic-native/http”: “^5.36.0”,
“@ionic-native/in-app-browser”: “^5.33.0”,
“@ionic-native/local-notifications”: “^5.27.0”,
“@ionic-native/market”: “^5.34.0”,
“@ionic-native/mobile-accessibility”: “^5.36.0”,
“@ionic-native/native-storage”: “^5.27.0”,
“@ionic-native/network”: “^5.30.0”,
“@ionic-native/power-management”: “^5.31.1”,
“@ionic-native/preview-any-file”: “^5.36.0”,
“@ionic-native/screen-orientation”: “^5.34.0”,
“@ionic-native/secure-storage”: “^5.31.1”,
“@ionic-native/splash-screen”: “^5.0.0”,
“@ionic-native/sqlite”: “^5.36.0”,
“@ionic-native/sqlite-porter”: “^5.28.0”,
“@ionic-native/status-bar”: “^5.0.0”,
“@ionic-selectable/angular”: “^5.0.0-alpha.13”,
“@ionic-super-tabs/angular”: “^7.0.8”,
“@ionic/angular”: “^6.0.8”,
“@ionic/cli”: “^6.17.1”,
“@ionic/core”: “^6.0.9”,
“@ionic/storage”: “^2.3.1”,
“@ionic/storage-angular”: “^3.0.6”,
“@microsoft/signalr”: “^7.0.5”,
“@ngx-translate/core”: “^14.0.0”,
“@ngx-translate/http-loader”: “^7.0.0”,
“@progress/kendo-angular-buttons”: “^11.6.0”,
“@progress/kendo-angular-common”: “^11.6.0”,
“@progress/kendo-angular-dateinputs”: “^11.6.0”,
“@progress/kendo-angular-dialog”: “^11.6.0”,
“@progress/kendo-angular-dropdowns”: “^11.6.0”,
“@progress/kendo-angular-inputs”: “^11.6.0”,
“@progress/kendo-angular-intl”: “^11.6.0”,
“@progress/kendo-angular-l10n”: “^11.6.0”,
“@progress/kendo-angular-label”: “^11.6.0”,
“@progress/kendo-angular-popup”: “^11.6.0”,
“@progress/kendo-angular-scheduler”: “^11.6.0”,
“@progress/kendo-data-query”: “^1.6.0”,
“@progress/kendo-date-math”: “^1.5.10”,
“@progress/kendo-drawing”: “^1.17.5”,
“@progress/kendo-licensing”: “^1.3.0”,
“@progress/kendo-recurrence”: “^1.0.3”,
“@progress/kendo-theme-default”: “^6.3.0”,
“@progress/kendo-theme-material”: “^6.3.0”,
“@teamhive/lottie-player”: “^1.0.0”,
“angular-draggable-droppable”: “^8.0.0”,
“axios”: “^1.3.6”,
“capacitor-rate-app”: “^3.0.0”,
“capacitor-secure-storage-plugin”: “^0.8.1”,
“cocoapods”: “^0.0.0”,
“cordova-plugin-advanced-http”: “^2.5.1”,
“cordova-plugin-android-permissions”: “^1.1.3”,
“cordova-plugin-app-version”: “^0.1.12”,
“cordova-plugin-apprate”: “^1.7.2”,
“cordova-plugin-autostart”: “^2.3.0”,
“cordova-plugin-badge”: “^0.8.8”,
“cordova-plugin-calendar”: “^5.1.5”,
“cordova-plugin-camera”: “^4.1.0”,
“cordova-plugin-device”: “^2.0.3”,
“cordova-plugin-dialogs”: “^2.0.2”,
“cordova-plugin-doze-optimize”: “^0.5.4”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-file-opener2”: “^3.0.5”,
“cordova-plugin-firebase-crashlytics”: “github:remosti/cordova-plugin-firebase-crashlytics”,
“cordova-plugin-fullscreen”: “^1.3.0”,
“cordova-plugin-inappbrowser”: “^5.0.0”,
“cordova-plugin-market”: “^1.2.0”,
“cordova-plugin-nativestorage”: “^2.3.2”,
“cordova-plugin-network-information”: “^2.0.2”,
“cordova-plugin-powermanagement-orig”: “github:remosti/cordova-plugin-powermanagement”,
“cordova-plugin-preview-any-file”: “^0.1.7”,
“cordova-plugin-screen-orientation”: “^3.0.2”,
“cordova-plugin-secure-storage-echo”: “^5.1.1”,
“cordova-plugin-wifiwizard2”: “^3.1.1”,
“cordova-res”: “^0.15.1”,
“cordova-sqlite-storage”: “^6.0.0”,
“cordova.plugins.diagnostic”: “^6.1.1”,
“es6-promise-plugin”: “^4.2.2”,
“firebase”: “^9.20.0”,
“i”: “^0.3.7”,
“install”: “^0.13.0”,
“ionic-cache”: “^5.2.0”,
“ionic-native-http-connection-backend”: “^8.0.0”,
“ionic-selectable”: “^4.8.0”,
“jquery”: “^3.6.4”,
“moment”: “^2.29.4”,
“ng-circle-progress”: “^1.7.1”,
“ng-otp-input”: “^1.8.5”,
“ngx-order-pipe”: “^2.2.0”,
“phonegap-nfc”: “github:somq/phonegap-nfc#fix/nfc-launch”,
“phonegap-plugin-mobile-accessibility”: “^1.0.5”,
“rxfire”: “^6.0.3”,
“rxjs”: “^7.8.0”,
“signalr”: “^2.4.3”,
“sweetalert2”: “^11.7.3”,
“ts-md5”: “^1.3.1”,
“tslib”: “^2.5.0”,
“typings”: “^2.1.1”,
“uk.co.workingedge.cordova.plugin.sqliteporter”: “^1.1.1”,
“zone.js”: “^0.13.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^15.2.6”,
“@angular/cli”: “15.2.6”,
“@angular/compiler”: “^15.2.8”,
“@angular/compiler-cli”: “^15.2.8”,
“@angular/language-service”: “^15.2.8”,
“@capacitor/cli”: “^4.0.0”,
“@ionic/angular-toolkit”: “^9.0.0”,
“@ionic/app-scripts”: “^3.2.4”,
“@ionic/lab”: “3.1.7”,
“@types/jasmine”: “~3.5.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/jquery”: “^3.5.0”,
“@types/node”: “^12.11.1”,
“@types/signalr”: “^2.2.36”,
“codelyzer”: “^5.1.2”,
“jasmine-core”: “~3.5.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“jetifier”: “^1.6.8”,
“karma”: “~6.3.16”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.5.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “^4.8.0”
}
And here’s the output from the ionic info command:
Ionic CLI : 7.1.1 (C:\Users\joel.sahli\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.2.0
@angular-devkit/build-angular : 16.1.5
@angular-devkit/schematics : 16.1.5
@angular/cli : 16.1.5
@ionic/angular-toolkit : 10.0.0
Capacitor:
Capacitor CLI : 5.2.2
@capacitor/android : 5.2.2
@capacitor/core : 5.2.2
@capacitor/ios : 5.2.2
Utility:
cordova-res : 0.15.4
native-run : 1.7.4
System:
NodeJS : v18.18.2 (C:\Program Files\nodejs\node.exe)
npm : 9.8.1
OS : Windows 10
I’ve tried various approaches to resolve these issues, including reviewing the caching logic and ensuring efficient data retrieval, but the problems persist. I would appreciate any insights or suggestions from the community on how to tackle these performance issues, especially on older iPhones and iPads. If I can provide any further information please let me know.
Thank you in advance for your help!