# Ionic 3 first time load

**URL:** <https://forum.ionicframework.com/t/ionic-3-first-time-load/97694>\
**Category:** ionic-v3\
**Created:** [July 11, 2017, 8:38am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694 "2017-07-11T08:38:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nsvivek121](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nsvivek121](https://forum.ionicframework.com/u/nsvivek121)\
**Post date:** [July 11, 2017, 8:38am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/1 "2017-07-11T08:38:23Z")

</div>

I had developed an app in ionic 2. This has initial load time 6 to 30 seconds. And bundle size of android apk is 8 MB. Then ionic 3 comes with lazy load. I converted my whole app from ionic 2 to ionic 3 with lazy load. But still apk size & load time have no effect.  
Apk size is not that important to me but I want to improve the loading time.  
So some quick questions:

1. What happens between platform.ready and first page load? Why a blank white screen? I know it can be replaced with splash screen but I want to know what is happening at that time.

2. Generated bundle (apk or ipa) contains all the code already, then what lazy load is doing?

3. Splash screen comes with a spinner. Can I add some text below spinner which tell user that we are configuring your app?

Thanks

---

<div class="post-metadata">

**Author:** ![philipgriffin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipgriffin/32/110462_2.png) [@philipgriffin](https://forum.ionicframework.com/u/philipgriffin)\
**Post date:** [July 11, 2017, 8:41am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/2 "2017-07-11T08:41:40Z")

</div>

I don’t exactly have answers to your questions but are you sure youre using lazy loading correctly? It won’t make your application 1 million times faster though. But it should improve it somewhat.

You could always add some text to your splash screen image, not that elegant.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [July 11, 2017, 8:48am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/3 "2017-07-11T08:48:35Z")

</div>

Tell us more about your app. How many pages? What is on those pages?  
How do you build your app? Which platforms?  
Where and how do you test your app?

---

<div class="post-metadata">

**Author:** ![nsvivek121](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nsvivek121](https://forum.ionicframework.com/u/nsvivek121)\
**Post date:** [July 11, 2017, 9:04am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/4 "2017-07-11T09:04:13Z")

</div>

@Sujan12  
It’s an Ecommerce app with 20 pages.Page content ranges from large product list to small about page.

I build android using ionic build android --prod – release. Then signed it using jarsigner-\>zipalign.

Load time is observed by my team & also reported by our beta testers. I also used chrome inspector to see it.

@philipgriffin I did it all right. Can you tell how can I show text at splash?

---

<div class="post-metadata">

**Author:** ![philipgriffin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipgriffin/32/110462_2.png) [@philipgriffin](https://forum.ionicframework.com/u/philipgriffin)\
**Post date:** [July 11, 2017, 9:19am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/5 "2017-07-11T09:19:31Z")

</div>

I’m simply saying you could add text to the splash screen image. You take your image and literally put text on it.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [July 11, 2017, 9:34am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/6 "2017-07-11T09:34:31Z")

</div>

Post your `ionic info` output and `package.json` content please.  
How big is your `www` folder?

---

<div class="post-metadata">

**Author:** ![nsvivek121](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nsvivek121](https://forum.ionicframework.com/u/nsvivek121)\
**Post date:** [July 11, 2017, 9:47am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/7 "2017-07-11T09:47:26Z")

</div>

Ionic info:  
Cordova CLI: 6.5.0  
Ionic Framework Version: 3.0.1  
Ionic CLI Version: 2.2.2  
Ionic App Lib Version: 2.2.1  
Ionic App Scripts Version: 1.3.0  
ios-deploy version: Not installed  
ios-sim version: Not installed  
OS: macOS Sierra  
Node Version: v6.10.2  
Xcode version: Xcode 8.3.1 Build version 8E1000a

Package.json

```auto
{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "4.0.0",
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/call-number": "3.8.0",
    "@ionic-native/core": "^3.10.3",
    "@ionic-native/device": "3.8.0",
    "@ionic-native/email-composer": "^3.12.1",
    "@ionic-native/facebook": "^3.10.3",
    "@ionic-native/file": "^3.14.0",
    "@ionic-native/geolocation": "3.8.0",
    "@ionic-native/google-analytics": "^3.11.0",
    "@ionic-native/google-plus": "^3.10.3",
    "@ionic-native/social-sharing": "3.8.0",
    "@ionic-native/splash-screen": "^3.9.2",
    "@ionic-native/status-bar": "^3.10.3",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic/cloud-angular": "^0.12.1-beta.1",
    "@ionic/storage": "^2.0.1",
    "font-awesome": "4.7.0",
    "ionic-angular": "3.0.1",
    "ionic-image-loader": "^3.2.1",
    "ionicons": "3.0.0",
    "jssha": "2.2.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "@types/jssha": "0.0.29",
    "@types/node": "7.0.13",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "description": "Ionic"
}

```

Compressed size of www folder is 7 MB.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [July 11, 2017, 10:00am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/8 "2017-07-11T10:00:17Z")

</div>

First I would try to upgrade these to recent versions:

> [@nsvivek121](#):
>
> Cordova CLI: 6.5.0

> [@nsvivek121](#):
>
> Ionic CLI Version: 2.2.2

> [@nsvivek121](#):
>
> Ionic App Scripts Version: 1.3.0

Next, do you really need all those `@ionic-native` packages? You don’t seem to have the Cordova plugins installed (or they may not be shown here because you are using the old Cordova… - post your `config.xml` as well please.)

What exactly are you using

> [@nsvivek121](#):
>
> “@ionic/cloud-angular”: “^0.12.1-beta.1”,

for?

---

<div class="post-metadata">

**Author:** ![nsvivek121](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nsvivek121](https://forum.ionicframework.com/u/nsvivek121)\
**Post date:** [July 12, 2017, 5:56am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/9 "2017-07-12T05:56:48Z")

</div>

Config.xml

```auto
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.apiapp829370" version="0.0.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>App Desc</description>
    <author email="devme@gmail.com" href="http://www.ionicframework.com/">Vivek</author>
    <content src="index.html" />
    <access origin="*" />
    <access launch-external="true" origin="mailto:*" />
    <access launch-external="true" origin="tel:*" />
    <access origin="*.pushwoosh.com" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-navigation href="http://192.168.0.122:8100" />
    <allow-navigation href="http://192.168.0.118:8100" />
    <allow-navigation href="http://192.168.0.124:8100" />
    <allow-navigation href="http://192.168.0.116:8100" />
    <allow-navigation href="http://192.168.43.89:8100" />
    <allow-navigation href="http://192.168.0.117:8100" />
    <allow-navigation href="http://192.168.0.108:8100" />
    <allow-navigation href="*" />
    <allow-navigation href="http://192.168.1.109:8100" />
    <allow-navigation href="http://192.168.1.110:8100" />
    <allow-navigation href="https://itunes.apple.com" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <allow-navigation href="mailto:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    </platform>
    <platform name="wp8">
        <icon height="99" src="resources/wp8/icon/ApplicationIcon.png" width="99" />
        <icon height="159" src="resources/wp8/icon/Background.png" width="159" />
        <splash height="1280" src="resources/wp8/splash/SplashScreenImage.png" width="768" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="android-targetSdkVersion" value="23" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="orientation" value="portrait" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="AndroidLaunchMode" value="singleTop" />
    <preference name="SplashScreenDelay" value="30000" />
    <!-- <preference name="ShowSplashScreen" value="false"/> -->
    <preference name="loadUrlTimeoutValue" value="700000" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-plugin-console" spec="1.0.5" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-device" spec="~1.1.4" />
    <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
    <plugin name="cordova-sqlite-storage" spec="~2.0.2" />
    <plugin name="ionic-plugin-deploy" spec="~0.6.7" />
    <!-- <plugin name="phonegap-plugin-push" spec="~1.10.4">
        <variable name="SENDER_ID" value="XXXXXXXXX" />
    </plugin> -->
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <plugin name="cordova-plugin-file" spec="~4.3.3" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.3" />
</widget>

```

I am using cloud-angular for ionic live deploy ([https://docs.ionic.io/setup.html#installation](https://docs.ionic.io/setup.html#installation))

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [July 12, 2017, 7:23am UTC](https://forum.ionicframework.com/t/ionic-3-first-time-load/97694/10 "2017-07-12T07:23:44Z")

</div>

> [@nsvivek121](#):
>
> \<allow-navigation href=“[http://192.168.0.122:8100](http://192.168.0.122:8100)” /\>  
> \<allow-navigation href=“[http://192.168.0.118:8100](http://192.168.0.118:8100)” /\>  
> \<allow-navigation href=“[http://192.168.0.124:8100](http://192.168.0.124:8100)” /\>  
> \<allow-navigation href=“[http://192.168.0.116:8100](http://192.168.0.116:8100)” /\>  
> \<allow-navigation href=“[http://192.168.43.89:8100](http://192.168.43.89:8100)” /\>  
> \<allow-navigation href=“[http://192.168.0.117:8100](http://192.168.0.117:8100)” /\>  
> \<allow-navigation href=“[http://192.168.0.108:8100](http://192.168.0.108:8100)” /\>  
> …  
> \<allow-navigation href=“[http://192.168.1.109:8100](http://192.168.1.109:8100)” /\>  
> \<allow-navigation href=“[http://192.168.1.110:8100](http://192.168.1.110:8100)” /\>

Get rid of those, they are from livereload testing locally.

Also get rid of the ionic-native stuff you are not using. That should make the app a bit smaller and faster.

Did you check if your app actually is lazy loaded? What is in `/www/build`?