Chrome network Timing , how to improve Content Download

angularjs asp.net-mvc google-chrome google-chrome-devtools iis-8
Maazaoui Mohamed Amine picture Maazaoui Mohamed Amine · Oct 11, 2017 · Viewed 17.4k times · Source

I was checking for XHR calls timing in Chrome DevTools to improve slow requests but I found out that 99% of the response time is wasted on content download even though the content size is less than 5 KB and the application is running on localhost(Working on my local machine so no Network issues).

But when replaying the call using Replay XHR menu, the Content download period drops dramatically from 2.13 s to 2.11 ms(as shown in the screen shots below). Data is not cached at browser level.

  • Example of Call Timing Example of Call Timing

  • Same Example Replayed Same Example Replayed

Can someone explain why the content download timing is slow and how to improve it?

The Application is an ASP.NET mvc 5 solution combined with angularJS.

The Web Server Details: - Windows Server 2012 R2 - IIS 8

Thank you in advance for your support!

Answer

Kayce Basques picture Kayce Basques · Oct 12, 2017

I can't conclusively tell you the cause of this, but I can offer some variables that you can investigate, which might help you figure out what's going on.

Caching

I know you said that the data is not getting cached at the browser level, but I'd suggest checking that again. Because the fact that the initial request takes 2s, and then the repeat request only takes 2ms really does sound like caching.

How to check:

  1. Go to Network panel.
  2. Look at Size column for the request. If you see from memory or from disk cache, it was served from the cache.

size column

Slow development server or machine

My initial thought was that you're doing more work on your development machine than it can handle. Maybe the server requires more resources than your machine can handle. Maybe you have a lot of other programs running and your memory / CPU is getting maxed.

How to check:

  1. Run your app on a more powerful server and see if the pattern persists.

Frontend app is doing too much work

I'm not sure this last one actually makes sense, but it's worth a check. Perhaps your Angular app is doing a crazy amount of JS work during the initial request, and it's maxing out your CPU. So the entire browser is stalling when you make the initial request.

How to check:

  1. Go to Performance panel.
  2. Start recording.
  3. Do the action that causes your app to make the initial request.
  4. Stop recording.
  5. Check the CPU chart. If it's completely maxed out, then your app is indeed doing a bunch of work.

CPU chart

Please leave a comment and let me know if any of these helped.

Related questions

MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource

I tried everything that is written in this article: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api, but nothing works. I'm trying to get data from webAPI2 (MVC5) to use in another domain using angularJS. my controller looks like this: …

Read More
How to use ASP.NET MVC and AngularJS routing?

I’m working on a new ASP.NET MVC and AngularJS application that is intended to be a collection of SPAs. I’m using the MVC areas concept to separate each individual SPA, and then I’m using AngularJS within …

Read More
Missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel

I have two VS projects : one exposing MVC5 controllers, the other being an angular client. I want the angular client to be able to query the controllers. I read numerous threads and tried the following : I added this in the …

Read More