Long page load on first transition

Hello! On the video, I wrote down what I have a problem with: https://drive.google.com/file/d/0BwwtdwgZwtycdWxvWnJfeHBOQW8/view
When the application is loaded, I try to go to another page and it’s loaded for the first time, but then everything seems to be fine.
I use ionic 3 with IonicPage

What did I watch a minute of video for? I don’t see anything wrong and your text also describe no problem, only what is happening.

Just for trying, have you tried not lazy loading the next page?

When I first click on the transition to the next page there is a delay, after a re-transition there are no such problems.

Is the page lazy loaded? If so, this is to be expected. (Although you can make the lazy loaded pages to be loaded in the background after the first non-lazy-loaded page is shown)

Now for verification and did, removed IonicPage and tried to launch, not any changes. I uploaded my project (with IonicPage): https://drive.google.com/open?id=0B3StdoHF0m-iRU5vbGRxSlhUeWc

Yes, no effect. I deleted all @IonicPage.

Look at the video: https://drive.google.com/open?id=0B3StdoHF0m-iRm9FRS1nRmhtaGs , this is without IonicPage

I surely won’t look at a minute long video again.

Did it use lazy loading and now doesn’t?
Is it still slow?

If so, are you doing any dynamically loaded stuff on that page? Use your browser’s dev tools to debug what is happening in the background and profile the app.

Yes, not any changes, the first page load takes a long time.
The page is not used as components, it’s an empty controller.

I’d be interested in this process loading pages in the background.

Opening for the first time: image 2 second (Android device).
Then: image 1 second (Android device).
I also have a modal window. I can something not so I do? I will quote some of my code:
tabs.ts:

import { Component } from '@angular/core';
@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {}

app.module.ts:

@NgModule({
    declarations: [
        MyApp,
        ModalPage,
        Elastic,
        TabsPage,
        HomePage
    ],
    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp),
        SuperTabsModule.forRoot()
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        ModalPage,
        TabsPage,
        HomePage
    ],
    providers: [
        Global,
        StatusBar,
        SplashScreen,
        Camera, Keyboard, Network, InAppBrowser,
        { provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {}

HomePage:

   onPage(item: any) {
        this.navCtrl.push(TabsPage, { //tabs
            type: item
        });
    }
1 Like

Hi.
I had a look at some of your transitions and noticed you have some other stuff loading for the first time like the ionicons.

Could you have them loaded on your homepage??? You might get back valuable fractions of a second.

image

This is the list that could be loaded upfront.

@sujan12 I think the guy doesn’t know what is lazy loading :wink:

Thanks for the answer. I converted images to base64 and preloaded the fonts:

<link rel="preload" href="/assets/fonts/roboto-bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/roboto-medium.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/ionicons.woff2?v=3.0.0-alpha.3" as="font" type="font/woff2" crossorigin>

This changed the situation, but still, the difference between the first page opening and the second

I did say fractions :slight_smile:

Tell me, can Ionic not know how to preload pages? From the delay at the first opening can not get rid of? Everything is very strange and I don’t understand, it’s a framework without such possibilities or have I tuned something wrong?

Just a suggestion here, we’re all web guys. Could you have a ‘please wait’ modal whilst it’s loading up so the user knows something has happened???

Could you add the page to the navcontroller but not load it? Like navCtrl.unshift (not sure that’s a thing but it would genuinely load it up)