I'm using the Network tab in Chrome Dev Tools to profile how my page is loading.
It shows a blue line after the DOM is loaded, then a red line after the page finishes completely loading (all the ads, etc).
However, there are apparently AJAX requests that continue to happen periodically in the background and then network tab keeps timing these -- the result is that the granularity and detail of the initial page load gets lost as the scale keeps being increased.
The DOM usually loads within 1 second and the page is usually done loading in under 8 seconds, and there are dozens of resources to closely examine within these first few seconds, but the network tab tracks events that happen 1 minute and 3 minutes and 8 minutes out, etc. which results in 99% of the horizontal space being dedicated to tracking things I don't care about and 99% of the things I care about being squished into about 1 horizontal pixel.
I would like the network tab to stop timing after it reaches the red line.
There is a button in the upper right corner with the tooltip Record Network Log. If this button is red, then recording will continue. To stop the recording, press this button and toggle it to gray. Just wait until you see the red line indicating that the page is done loading, then hit the button to stop the recording of network events.
Related
I keep >80 tabs open as I multi-task through various goals. A time comes when I need to bulk close multiple tabs. This is where the problem of tab-tooltip clicks in.
I don't want to open each tab (and wait for it to load from memory). Instead I just hover over the tab's title for the tooltip to show the name of the tab and then close it if it's not needed.
It takes almost 1 second for the tooltip to appear. Is there any way I can set this delay to 0 for Chrome?
We are stream video via websocket in a grid image approach. We render the received images into a canvas and canvas will be updated multiple times a second. When we move to a different tab or application and return to our page, the page goes blank for few seconds say 10-20 seconds. Sometimes it takes even more time. Rest other chrome tabs are normal.
In our page, canvas rendering continued even in the background. When a tab is not visible, chrome throttles the UI changes for saving battery and performance.
When the returning to the same tab, all rendering is pushed at once and it made the page blank and unresponsive.
We introduced window.requestAnimationFrame api of browser, which solved the problem. requestAnimationFrame stops the rendering function once the tab becomes invisible and resumes when returning to the same tab.
We changed from:
render();
to
requestAnimationFrame(render);
check this answer for further understanding
Answering own question as this might help someone.
Help me understand what causes this:
And by this, I mean the fact that 100% of my assets are cached but there is still a ~200ms delay between receiving the content from the script and the DOMContentLoaded event firing. This is Chrome on Linux and the page being served up is about 100 lines of divs and things, nothing major.
This 200ms "delay" that you're observing is not caused by the network, but by processing the content.
The delay between fetching the HTML and CSS, and between the CSS files is the time needed to parse the HTML. When JavaScript comes into the mix, the HTML parser halts until the script is loaded and until is evaluated and executed.
You can get a detailed breakdown of what affects the load timing by opening the Timeline tab, clicking on the button/circle in the upper-left corner ("Record") and reloading the page. Below is an example which shows the correlation between script execution time and resource fetching time. These screenshots were recorded in a browser profile without any extensions, if you have installed any extensions, then the times will probably increase.
Network tab:
Timeline tab:
Read more about performance and profiling:
https://developer.chrome.com/devtools/docs/network
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
I've been working on a new website and practicing my JS/jQuery/AJaxy skills. Last night I wanted to take a look at how long the page was taking to render and see if there were any areas I could clean up to increase speed. While the page loads in about 200 - 300 ms every time, I'm seeing a large amount of blank space between resource loads under the network inspector.
http://i.imgur.com/7ng6m.jpg
Has anyone else seen this or know what I can do to minimize that time (talking about the blank space between like the html and the first css file)?
Quite possibly it is caused by the extensions you have installed. AdBlock, LastPass and Google quick scroll took altogether about 200 ms on my machine.
Unfortunately, these extensions are invoked on every site and block loading the additional resources.
Try it with out of the box browser setup, the loading time will increase tremendously.
You've got a bunch of images loaded just after the page has been loaded (the load and DOMContentLoaded events have fired - the blue and red vertical lines across the Timeline). I can see that the images are loaded by the JQuery library (the Initiator column), perhaps to build a gallery or something.
So, the case is that JQuery loads the images after the page load, presumably in the onload handler (this can look like $(document).ready(handler) in your code, but other options are possible, too).
The delay between the initial page load and requesting the first resources is almost certainly caused by Chrome extensions. To find the culprit: Record a timeline in the Timeline tab in Chrome Developer Tools; Identify the scripts that are running during the Parse HTML phase; Work out which extensions they're from.
To record a timeline:
Open the timeline tab and click record.
Reload the page and then stop the recording. (A couple of seconds should be enough.)
To find the culprit:
Find the first main Parse HTML block on the timeline. On the row below you will probably see one or more Evaluate Script blocks. These are the culprits.
Click on one of the Evaluate Script blocks and find the script name in the bottom pane. Mouse-over the script name. The tooltip will have the URL of the script, which should be of the form chrome-extension://{long_identifier}/{path}
Memorise the first few letters of the identifier and search for it in the chrome://extensions/ page. This tells you which extension is causing the problem. Try disabling it - you should see a difference.
Repeat for the other Evaluate Script blocks.
In my case, I have 20 extensions installed but only two were causing a delay: LastPass and Fauxbar. I've chosen to leave them enabled because for me the productivity benefit of these extensions outweighs the downside of the added latency.
The resource tracking tools in Safari and Chrome are great for visualizing load times of various page components, but the view is totally obscured when keep-alive pings take place periodically (in my case, chartbeat sends a ping every 15 seconds, so all the other load times are compressed into a tiny unhelpful section, while the chartbeat pings are stretched out across the view).
So, it would be great if there was a "pause" button that would stop resource tracking, but retain the current view. Is this possible?
In chrome this is possible under the timeline view; I'm not sure if that's what you mean, but it's the round button in the lower left corner.
It looks like the best way to accomplish this is to switch over to the Scripts view and click pause (on the top right of the tab, not the bottom left). This pauses the chartbeat script execution and effectively pauses the Resources "time" graph view.