Can someone explain what gaps in Google Chrome Inspector's Network tab represent?
The network tab shows a list of consecutively loaded resources. For the most part they overlay and/or immediately follow one another. But sometimes there is a gap, and in the case of this screenshot there's actually almost 2 seconds of a gap.
All 5 of the later loaded scripts are hosted by a third party.
If you click on the heading "Timeline" and then select "Duration", you'll get a better view of what's actually happening for each request.
If you hover over each line, you'll see a breakdown of each request, and most likely for those later ones you'll find that they have large "Blocking" values.
Edit: I should probably put a small note about what blocking is here, just in case. Blocking (as defined in the link in the next paragraph) is the amount of time between the UI thread starting the request and the HTTP GET request getting onto the wire.
Here is a good Stack Overflow question that explains what each segment means and what you can (or can't) do to improve it.
Related
In my Azure Insights - Performance View, I click on the "Profile Traces" button on the bottom right of the screen. This opens a list of Profile Traces that have been taken, sorted by longest to shortest duration.
I click on one of the longer-running requests, and am presented with something like this:
Of course the Performance Tip Notification block catches my eye. It's warning that over 80% of the request time was spent waiting for a resource to be available.
(The word "waiting" is a hyperlink that opens this page, which is not very useful)
My question is this. Is there any way that I can tell what resource was being waited for?
I have implemented an on-scroll loading which fetches some chunk of data every time the scroll reaches the end of the viewing area. After some point of time when there would be no more new data to be shown, how should I convey to this to the end-user from a UX point of view?
I was thinking of few options such as displaying a tooltip which automatically vanishes after few seconds. Other option would be something similar to rubber banding scrolling from Apple. Any other approach that can be used here?
Without knowledge of what the use-case is (i.e. has user performed a search or just scrolling a list from elsewhere), in general, two good options:
Follow Slack's "You are upto date! + icon" little image on the last
elastic scroll at bottom. Or, for example, "That's all we've got just
yet! Check your email for more or Search for [term] instead".
Use a progress-bar type of indicator like when you read an article on
Medium --> as people scroll down, they'll have a live indicator of
getting to the bottom of the list.
I don't like dead ends in my applications. If the user hits the bottom of your list and is still searching, he probably has the wrong search terms. I'd place a box along the line of "Haven't found what you're looking for? Try a different search term" and link that to the search box.
Even if it's not a search, once the user hits the bottom without successfully finding what they where looking for provide them with an alternative.
Hope this helps you.
What is included in "Idle" and "Other" times into Sumary of Timeline tab in Chrome Developer Tools?
What causes so much inaction?
Why do these occur?
How to reduce these times? Is it possible?
Why the browser is inactivity for so long (in the context of idle time)?
At the beginning of more than 1.8 seconds nothing happens:
In the middle the "Idle" and the "Other" occupy about 0.3 seconds:
At the end of almost 3 seconds nothing happens:
In this example, we have almost five seconds of inactivity browser...
The "Idle" state occurs when the browser has not yet completed the final rendering of the page on the screen but must put the process on hold while waiting for missing data or resources needed to resume and complete it.
We can deal with long "Idle" periods, for example, when the browser waits for a synchronous response, which is generated for a long time on the server-side.
The "Idle" state should not be confused with the "Loading" state, which is the time the browser actually uploads the response (from the first to the last byte), not the time from sending the request to uploading the response.
The "Other" state represents the time of all browser activities other than those listed in the pie chart, such as DOM tree building, CSSOM and others.
This issue is partly explained on the "Render-tree Construction, Layout, and Paint" website.
I found part of the answer on Addy Osmani's blog:
In Frame mode, the shaded vertical bars correspond to recalculating styles, compositing and so on. The transparent areas of each vertical bar correspond to idle time, at least, idle on the part of your page. For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.
But this does not exhaust the topic.
Example from which the chart included in the question did not use frames.
I still do not know how to shorten the time, and what is hidden under "Other".
Check out this topic
Idle is just that, nothing was going on so nothing to worry about as far as I know.
Other is "un-instrumented activity". Which is stuff that currently isn't able to be broken down. So, you can't analyze what was going on in there from the DevTools.
Using Start profilling and reload page button instead of Record button will give the results we are waiting, since it stops recording after page to finish the loading, reducing idle.
As you can see, the actual length of the request and its subsequent response is very quick. You cant see it in this view, but the blue bar represents a transaction that took 9 milliseconds.
The two lines, red and blue (which completed nearly instantaneously and are thus very close to each other), pictured far to the right of that, show up around 51ms.
So, what is happening here? is this actually time being spent? or is it just how the browser records it?
Your request took 9 milliseconds to complete
After that your browser received some data, it converted this into an html object(DOM) and displays this on your screen(DOMLoaded)
The action of converting and displaying took your browser 42 milliseconds, which is the gap between response and domLoaded.
edit:
I didn't manage to find the exact things the browser does but when i look into the dom of an empty page (which takes 100ms on my browser btw) i can find things like local storage, screen resolution, geo location and history.
Besides that i can imagine that cookie and add-ins can also take up some time if they are hooked. My ghostery for example is ment to block trackers so i assume he does so before the page is fully loaded.
I wish i could have given you a list of things the browser does in that window but alas. Maybe someone else can provide an actual list.
what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks
Basically, they're your browser figuring out how to draw the changes that you made to the page.
Don't worry about getting rid of them -- if you did that, your site would be static.
However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.
Lets say that you got a job at Twitter.
And your job is to write the next version of the window that adds each twitter post to the screen.
If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).
A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once.
This cuts down on the number of times that a browser has to figure out where everything needs to go.
#Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference.
Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.
Here's a very handy list of properties and methods that trigger the layout (reflow) of a page:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
You want to minimize these calls as much as possible -- especially in situations where performance is critical, such as during the scroll event, or when animating large blocks of content.
You can use the "Profiles" tab and "Audits" tab to detect the performance of your code. The will give you a report about your codes.
You can reduce the page Recalculate,Layout and Paint's count by many ways.
Append many child at one time.
Hide elements before change them.
Give images and other elements height and width.