Application's domReady method fired after 30 secs

Questions General
1

We have a large Enterprise application written in Ember. In our Production environment, a certain percentage of users are feeling slowness in our application loading. Upon adding some time metrics and investigating to see where the application is loading slow, I found that the Ember application’s domReady method is triggered after a heavy delay of say 20 to 30 secs.

As per this Application JS code, Ember is waiting for jQuery’s ready method to start routing the application.

I would like to know why this method is fired after so much delay of 20 - 30 seconds. Most of the times, the JS files are loaded from cache for the users who have reported this issue. If JS files are loaded from cache, why the ready method is taking such a long time?

Any help would be much appreciated.

app-js-ember
app-js-ember1592×956 121 KB

2

Can you run broccoli-concat-analyzer and post the results back here?

This is what it looks like: https://emberclear.io/bundle.html

Also, what version of ember are you on? How much stuff is in index.html?

3

Thanks for responding @NullVoxPopuli.

Unfortunately, I am afraid I cannot post the output of broccoli-concat-analyser as It exposes the modules of our application code. However it will be very much grateful if you could help me where and what to look for in the analysis in order to understand the problem.

We use Ember version 3.8.0

In the index.html file, all we have is in the following structure.

  1. vendor.css
  2. application.css
  3. vendor.js (800 KB gzipped)
  4. application.js (900 KB gzipped)
  5. couple of ck editor related js
  6. google recaptcha js
  7. a chat js which will download it’s own contents and will be loaded in an iframe.

Also if it helps, the point where we have beforeLoadInitializers (from the above screenshot) is reached at around 2 - 3 secs (Does this mean, the app js is parsed entirely?) from hitting the url in the address bar. The only thing delayed is to fire the ready method.

4

How many initializers do you have? What happens if you disable them all?

If you put a console log in your application route in the model hooks, where do those fall on the timeline?

5

I don’t think the loadInitializers is taking so much time. The afterLoadInitializers value is very few milliseconds from beforeLoadInitializers.

And these are the metrics I have gained so far.

Ember-timing
Ember-timing2298×420 63.7 KB

6

What’s your network timeline look like? Or the timeline on the Chrome/Firefox JS Profiler?

7

I don’t have the Chrome/Firefox JS Profiling data. But I have the network data with which I can tell the download of all the resources mentioned in the index.html got completed within 2 to 3 secs.

Also, my window.onload executed at around 3rd second.

To summarize, there is no delay in downloading the assets. All the javascript assets got downloaded within 3 secs (or served from memory cache) and the window.onload event fired at 3.2 secs and then something is stalling the application and the domReady method (result of Jquery’s ready which ember waits for this.$().ready(bind(this, 'domReady'))) fires after 30 secs.

Can you help me understand what happens after download and before firing the ready method?