31

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!

6
  • Is this slow because on page load you call multiple API, I means your machine take 2 second to proceed multiple request, or your request are one after another? Commented Oct 11, 2017 at 13:40
  • Even if it's only one call it takes the same amount of time for content download it Commented Oct 11, 2017 at 13:53
  • when you replay the XHR it's just send the request again. please tell me if I am missing something in it. Commented Oct 11, 2017 at 14:06
  • Yes it's sending the request again but not from the application code it's done from chrome devTools Commented Oct 11, 2017 at 14:13
  • check if chrome send something different in header and parameters Commented Oct 11, 2017 at 14:15

3 Answers 3

37

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.

2
  • 7
    Thank you for your answer Kayce , yes as you said Frontend app is doing too much work ,when opening a dialog ($mdDialog) there are more than 500 watchers as it's an angular js application and all the $http calls trigger a digest cycle meaning more work .to fix this i had two choices either disable watchers on dialog open promise and reset them on complete or use a web worker for all the xhr calls, both of those solution gave impressive results. Commented Oct 12, 2017 at 20:24
  • Cool, happy it helped, and thanks for providing info on the root-cause. Commented Oct 13, 2017 at 1:03
4

I have also been investigating this issue on Chrome (currently 91.0.4472.164) as the content download times appear to be vastly different based on the context of the download. When going directly to a resource or attempting to update rendered content as the result of a web call, the content download time can take up to 10x the duration when made from other client applications or when simply saving the data off as a variable in Chrome.

I created a quick, hacky Spring Boot web application that demonstrates the problem that I have made public on github: https://github.com/zielinskin/h2-training-simple

The steps in the readme should hopefully be sufficient to demonstrate the vast performance differences.

I believe that Chrome will need to resolve this performance issue as it has nothing to do with the webserver or ui framework being used.

2

The "Content Download" includes both the time taken to download the content and also the time for the server to upload the content. You can test out the following cases to see what is the cause. Usually it is a combination of all them.

Case 1: server delay

Assume running server and client on localhost with 0 network delay, and small data.

time0 client receives a response with header content-length = 20
time5 server > client: 10 bytes of data
time5 client receives data

Case 2: network delay

Use hard-coded dummy data to speed up server

time0 client receives a response with header content-length = 20
time0 server > client: 10 bytes of data
time5 client receives data

Case 3: client is too busy

Isolate the query by trying something like curl google.com -v in terminal to access the URL directly. You can use Chrome Dev tool and Firefox Dev tools to copy the request as shown below.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.