8

One of our web pages has a rendering performance issue, when the page is open, the spinner is freeze or loading very laggy, and after 6-12 seconds the page completes loading. So i'm using the Network's waterfall in chrome dev tool to diagnose the issue. But I got a few scenarios which i don't understand what happened.

In the following screenshots, all the resources for the corresponding page are loaded in a very short time, but the spinner is freeze for 6 seconds or 9 seconds, i'm not sure what is happening after the resources are loaded and before the page completes loading, maybe the spinner is in a wrong thread or gets blocked somehow? What is the means that i should use to find out the cause?

Scenario 1

1

Scenario 2

2

UPDATE

Network Screenshot

pic

Timeline Screenshot

pic

UPDATE

After checking the Event Log, i think the issue happens at Angular digest cycle, that endpoint response time should still be 780ms.

pic

Zhemin Zhang
  • 127
  • 1
  • 2
  • 5
  • Use the timeline: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool – wOxxOm Mar 05 '17 at 07:13
  • @wOxxOm Thanks for your reply. I have added a scenario with Network screenshot and Timeline screenshot, in the network the highlighted request takes 780ms, but in the timeline it takes about 8 seconds. Why is that? – Zhemin Zhang Mar 05 '17 at 15:24
  • I'm not that proficient with these issues to answer without seeing the site, try finding some tutorial on using the timeline tool while waiting for answers here. – wOxxOm Mar 05 '17 at 15:31

1 Answers1

8

Thanks for the detailed info. It'd be more helpful if you can link to the page, but I understand that's often not possible. I'll just provide some general data for people in the same boat. I don't know if I'll be able to completely answer this specific question, though.

In the Scenario 1 and Scenario 2 screenshots you can see that your resources are loading in 1 or 2 seconds. That's your cue that the issue isn't related to the Network.

So while this is a page load issue, it has nothing to do with the network.

In Timeline Screenshot you can see that your CPU usage is completely maxed out from about 1900ms to beyond 16000ms. So your page is forcing the browser to do a tremendous amount of work. This is probably in the JavaScript.

To diagnose this, I'd investigate the flame chart (under Main) which you can see in Timeline Screenshot. The longer the bar, the longer that function is taking to complete. Or, if you see a small function getting called thousands of times, that could be the cause. If you can optimize those calls, then you can get your page visually loaded faster. You can click Self Time header in the UPDATE screenshot to rank the function calls according to which took the most time.

Again, I don't know how helpful this answer is for this particular question, but I thought I'd try to rephrase the problem in a different, more general way.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • 1
    Thanks for your reply! One thing that i want to confirm is, shall i look at the **Self Time** or the **Total Time**? Because the **Self Time** are all pretty small numbers, less than 30ms. – Zhemin Zhang Mar 07 '17 at 04:02
  • Self Time is the amount of time spent doing work directly in that function. Total Time is the amount of time spent in that function, as well as any functions that it called. So they can both be helpful. – Kayce Basques Mar 07 '17 at 17:21