Aurelia takes 3 seconds to load on Samsung Galaxy S6/Android/Chrome on small bundled project with few deps

[insidewhy]

mkdir blah
cd blah
yo aurelia
gulp serve
gulp bundle # in another window after the serve completes

Loads in the blink of an eye on desktop browser. Takes 7-10 seconds to load the page on my Moto E using Chrome on Android 5.1. This is a reasonably powered (if budget) smartphone. I was surprised to have to wait so long and that it is the same no matter the state of the cache.

I'd love to use Aurelia for a project I'm working on but I can't consider it with that mobile performance. Is there any likelihood this will considerably improve within the next few months?

[dpinart]

we're also seeing large load times in mobile devices. About 20 seconds if bundled

[kollster]

We are experiencing extremely long startup times in Microsoft Edge on the desktop. Take http://aurelia.io/docs.html as an example - the startup time is over 20 seconds. In Chrome on the same devices, the startup time is about 3.5 seconds.

[insidewhy]

@kollster on my Moto E http://aurelia.io/docs.html takes 7-10 seconds to load, the same as the skeleton app. It makes me suspect there is a fixed cost to startup. Any idea how long Edge takes to load the skeleton app?

[zsmorris]

http://aurelia.io/docs http://aurelia.io/docs.html only takes 2-3 seconds on my 2013 Moto G.

• Zac

On Mon, Nov 30, 2015 at 8:29 AM, Mr Friend notifications@github.com wrote:

@kollster https://github.com/kollster on my Moto E http://aurelia.io/docs.html takes 7-10 seconds to load, the same as the skeleton app. It makes me suspect there is a fixed cost to startup. Any idea how long Edge takes to load the skeleton app?

— Reply to this email directly or view it on GitHub https://github.com/aurelia/framework/issues/254#issuecomment-160626849.

[francoishill]

I am myself frustrated with this long load times. But I had to realize this is not for Aurelia to solve. It is probably more JSPM. If you look at your timeline (in chrome developer tool's Network tab) you will see the files are loaded one-by-one. This is now with or without bundling. Bundled is just less files.

So if your latency is high (which is usually the case with internet based apps), it will take quite long. Because it does a full round-trip for each file.

First system.js is loaded, then browser-sync-client...js, then aurelia.js, then app-build.js, etc.

[insidewhy]

@francoishill I'm only loading 4 files here over my home network, 2 seconds latency per file? On mobile but not desktop, via the same local network? I don't think your reasoning is correct on this one.

[francoishill]

@ohjames If what you're saying is the case, then yes I would also not think that latency could be the issue. Have you tried hooking into it with chrome remote debugging?

• https://developer.chrome.com/devtools/docs/remote-debugging
• chrome://inspect/#devices

And then the other thing could be to ask this question on the Aurelia Gitter channel (https://gitter.im/Aurelia/Discuss). If you do so please also mention me on the channel so I can get updates. My nick is also francoishill on that.

[kollster]

I have just tried the skeleton-nav app - it also takes 20+ seconds in Edge.

[lares83]

I also checked skeleton-nav on Edge and having the same issue

[mastermaq]

Same issue here on Edge, takes forever to load the kit or the docs.

[EisenbergEffect]

This is multiple issues.

First, we have some issues with IE/Edge we are investigating. We aren't convinced they are entirely in our code, but we are looking into it.

Second, now that we are in beta, we are looking deeply into performance. There are many aspects of performance. We had our first major perf upgrade this last week. You can read about it here: http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/ It wasn't related to initial render time though. We are specifically looking at improvements related to render time as well.

[erikrenaud]

Yep, having the same slowness on Edge. Everything is bundled and cached locally so that's not it. Latest version of the beta files...

I suspect something in system.js... when I profile on edge I see a lot of "timers" and a long time between each plugin initialisation.

Hope this is fixed soon !

[EisenbergEffect]

We have discovered a two things that are related:

• IE/Edge DOM rendering is 3-4x slower than every major browser. It's way, way behind everything else. It looks like Microsoft has spent a lot of time optimizing the JS engine, but almost no time working on DOM rendering.
• Something appears to be going on with system.js. We don't know what just yet but we are actively looking into it right now.

[erikrenaud]

Rob - did you guys do something to aurelia.io/docs.html ? it loads as fast a chrome on edge since this morning...

[EisenbergEffect]

Yes, we did. That release includes some general perf improvements, but @jdanyow also looked into Edge specifically and he discovered that Edge's Promise implementation is ridiculously slow....I mean unbelievable. So, we dropped in Bluebird to replace the Promise implementation and that fixed it.

That said, @tuath are you able to load the docs on Edge without the developer tools open? For me, it only works with the dev tools open. I'd like to know if you can confirm one way or the other.

[EisenbergEffect]

FYI We'll have a blog post today with details on the perf work including the Edge stats and fix info.

[erikrenaud]

@Rob, it works fine for me with developer tools closed. I eemailed you perso 2-3 weeks ago, and you just fixed the slowness I was referring to... also that intermittent bug I had at the time, maybe that was the developer tools bug I was running into ! good job, can't wait to "update" to the latest version !

[dpinart]

I still need to have developer tools open in edge in order to load the docs page can't believe it :( Performance is good but it was good too for me previously

[erikrenaud]

@dpinart, what version of windows (edge) are you using ? I am on 10586 which is the latest

[rob]

No problem @tuath!

[EisenbergEffect]

@dpinart We are still looking into this. As you might imagine...a problem that goes away when the dev tools is open...is a little tricky to track down. I'd like to figure out what is different with @tuath 's Edge instance.

[dpinart]

@EisenbergEffect Sure. I understand your point and right not we don't have any customer pushing to view any app in Edge. I'm reallys surprised that the developer tools are so powerful that they can arrange apps :lol @tuath I'm on Microsoft Edge 25.10586.0.0. So I guess is same than yours

[erikrenaud]

let me know if there is anything i can do...

[erikrenaud]

well, I just rebooted and as soon as I open the doc site with edge, it did not load correctly till I opened the dev tools, I guess I just hadn't rebooted in a looooong time.

[EisenbergEffect]

It behaves erratically from what we can tell, depending on a number of variables. There may be a race condition somewhere. We're working on it...stay tuned.

[CasiOo]

Yes it feels very much like a race condition. Keep refreshing the page, and eventually it will load correctly.

It always seems to load correctly in our own application at work. Neither have we noticed any of the long load times that have been mentioned in this issue. Our app. always starts at the login screen with not a lot of bindings, if that could be of any help at all.

[EisenbergEffect]

Here's one thing I'm curious of. @CasiOo Are you using our http-client or our fetch0client (or neither)? Also, are you using bluebird?

For those of you who do have apps working fine in Edge. I'd love to know your answers to the above.

[CasiOo]

We are using neither. Instead we're using the ajax part of jquery (I don't remember the reasoning behind it). Our services are using bluebird, because we needed the finally part. We aren't creating any native promises at the login page, but we do at later stages in our app.

Feel free to contact me on gitter, if you have any more quick questions

[erikrenaud]

@EisenbergEffect I am just going with Aurelia-fetch-client. no bluebird

[EisenbergEffect]

I'm wondering if it's a conflict between our http-client and bluebird...

[gheoan]

I have an app working fine in Edge. Im using native fetch with polyfill, no http-client, no fetch-client, no bluebird.

[lares83]

@dpinart, @EisenbergEffect I have the same issue on my Edge browser (ver 10586 ). Docks page is not being loaded until I open DevTools

[genadis]

@EisenbergEffect I'm working on app without http-client & without bluebird for now, takes very long time to load on Microsoft Edge 25.10586.0.0 with or without dev tools open. Loads same time with or without dev tools open.

If not bundled takes over a minute, when bundled takes about 20 seconds. The resources are loaded serially one after another, and with pauses between them so the difference between bundled and non bundled makes sense.

hope it helps...

[EisenbergEffect]

@genadis If you are targeting edge, you need to try out Bluebird. That will likely solve your perf problem. It might introduce the load issue above though. We are trying to find out the source of that still.

[SamDeBlock]

After the last update the docs now open (almost instantly, nice!) in Edge without dev tools open. I'm running 20.10240.16384.0, before the update the docs would only load with dev tools.

[Aniel]

Docs don't load (Edge: 25.10586.0.0) without dev tools. After first load with dev tools it works without. If i clear the cache and try loading again without the dev tools it doesn't work again. So if dev tools are open a file gets downloaded and cached that is causing the issue when dev tools are not open.

[SamDeBlock]

@Aniel You are correct. Just tried this with 20.10240.16384.0.
New InPrivate window, dev tools closed: docs open

New InPrivate window, dev tools open: docs open Close dev tools, F5 to refresh and docs don't load anymore

[csrow]

For those who can load the docs without dev tools open, try clearing the cache and then try again. In my case, after the clean cache requires dev tools to be open. Afterwards, docs open fine without the dev tools. Edge 10586.0.0

---

Chi Sung Row

Date: Fri, 18 Dec 2015 00:23:00 -0800 From: notifications@github.com To: framework@noreply.github.com Subject: Re: [framework] Aurelia takes 7+ seconds to load on Moto E/Android/Chrome on miniscule bundled project (the yeoman aurelia skeleton) (#254)

After the last update the docs now open (almost instantly, nice!) in Edge without dev tools open.

I'm running 20.10240.16384.0, before the update the docs would only load with dev tools.

— Reply to this email directly or view it on GitHub.

[genadis]

@EisenbergEffect following my previous post. I've integrated Bluebird, it reduced the load time on Edge by half (~10 sec, on Chrome it's 2-3 seconds). Still loading regardless of dev tools open or closed, even after clearing cache and data.

Tested the Aurelia docs as well, it loads on Edge in about 6 seconds, regardless of dev tools open or closed, even after clearing cache and data. It did got frozen without dev tools open a few times but loads when refreshing the page, after first load it always loads.

[opcodewriter]

I confirm the erratic behavior in Edge. sometimes it works, sometimes it doesn't

[opcodewriter]

@ohjames how's the loading time these days on the mobile?

[insidewhy]

@mikefills still not good, currently spending my time defeating more pressing bugs involving repeat+animator.

[jdanyow]

@ohjames can this be closed? I think bundling, bluebird and the recent removal of core-js have fixed the perf issues.

[insidewhy]

@jdanyow The load times are much better in the latest release I'll close it. Now rather than the spinner spinning for 8+ seconds it spins for less than a second.

After this the browser freezes for about 1-2 seconds which is still pretty high and probably enough to turn people off :( I assume it's compiling all the bundled js files in one go. I think the only way to work around that would be via code splitting/lazy loaded chunks as webpack does (check out this article)

[opcodewriter]

@ohjames I am also interested about webpack. I don't know what's the aurelia-webpack status now. If you have a conclusion, would you mind commenting back here please.

Here's some conversation from chat room about wepback, which you might find useful:

The1nternet Mar 04 19:13 would webpack be replacing jspm? or aurelia-bundler? it seems like webpack more performs what aurelia-bundler does, rather than what jspm does.

EisenbergEffect Mar 04 19:14 Nothing is replacing. We are just adding another option.

mikefills Mar 04 19:15 will webpack code splitting work with Aurelia? e.g. require.ensure

sylvain-hamel Mar 04 19:15 @EisenbergEffect @The1nternet but you'd use one or the other, not both together, right?

EisenbergEffect Mar 04 19:16 correct

michaelprescott Mar 04 19:16 @mikefills I played with webpack a while ago, but not enough to fully understand code splitting. How is it better than defining how to bundle parts of Aurelia using their bundle task?

EisenbergEffect Mar 04 19:17 With webpack you use NPM to install aurelia. Then we have a webpack loader and bootstrapper that gets it all working with webpack.

mikefills Mar 04 19:23 I was reading the Aurelia docs on bundling and I saw this: "inject: If set to true, this will inject the bundle in config.js, so whenever the application needs a file within that bundle, the loader will load the entire bundle the first time. This is how we can achieve lazy bundle loading. For a large app with multiple sub sections, this will help us avoid loading everything upfront." it's not clear to me how it compares to webpack's code splitting

EisenbergEffect Mar 04 19:24 I think it's basically the same thing. With system.js you can tell it that your es2015 modules are grouped into bundles. Then, when any module is requested, it makes sure to load the bundle first (only once) before loading the module.

mikefills Mar 04 19:25 but I need to define the bundles by config right?

EisenbergEffect Mar 04 19:25 So, you can build your app with es2015 modules, not really worrying about how it will be bundled. Then, at a later time, you can configure the optimal set of bundles for deploy. In the bundle config, you can set up the bundles. That's what the bundle config does. It defines how your modules are grouped into bundles. You could have it all in one bundle, or split it into any number of bundles you want.

[EisenbergEffect]

Yes, you can do it today with our bundler. For example, the Aurelia docs are deployed as two bundles: one with the framework and all 3rd party libraries and one with the app code. You can do whatever you want. For example, common bundling strategies are based on bundling features or based on user role.

[opcodewriter]

Thank you Rob. For less experienced people like me, a concrete example would very useful. Unfortunately source code for Aurelia docs app as far as I understand it's not available anymore.

[EisenbergEffect]

The very first example in our article on bundling shows how to deploy an app split into two bundles: http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/bundling-your-app-for-deploy/3

Notice how the bundles section has two entries: "dist/app-build" and "dist/vendor-build" Globs are used to tell the bundler which modules go in which bundle. You can have as many bundles as you want.

[EisenbergEffect]

Although...I see that some of that config is out of date. It's referencing github for aurelia libs. That's not right. @ahmedshuhel We need to get the bundle docs updated ASAP. They have been showing the wrong thing since November...

[alvarezmario]

@mikefills one very nice thing about bundles is that they load on demand. If you set up your bundles correctly, you won't need to load the whole app on page load. Imagine you have a big app, which contains frotnend and backend. If you set up things correctly, on page load you'll be able to load only the frontend bundle, then if you go somewhere backend code is used, that code is loaded on demand.. That's really cool.