Hi,
I am running WPT in a private instance with video capture enabled. What I am seeing is that for a simple site like www.apple.com/? I am seeing Visually Complete times less than the Document Complete times (see attached doc). Maybe I am misunderstanding the defn of these two metrics - is Visually Complete an additive metric on top of the Document Complete time? This does not happen all the time but does for some of the sites I am testing against.
If Doc Complete represents the time for all the initial data to be downloaded to the client, then I would render to say that visually complete would come a bit later.
Appreciate any help understanding this.
thank you,
'm
Usually Visually Complete WILL happen before Document Complete. Document Complete is the onload event which fires when all of the scripts, css and images defined in the HTML have finished loading (including below-the-fold content).
OK, I see.
I thought it was the other way around, like for it to be visually complete, all the files must be downloaded.
In your opinion, is it best to use Doc complete times when trying to compare bandwidth performance when you are making optimizations on the network interface system?
thank you again,
'mark
Yes, if you’re working on the underlying resource delivery and not necessarily the user experience then the Doc Complete times will be a more complete measurement.
Great. I am new to this area. It seems that most folks are interested here in improving the performance of a single site, page etc. I have very little control over the individual page styles, objects, js, etc. I am very interested in the UX performance overall, but instead of a single site - I’m interested in measuring the UX performance as if I was a Comcast and trying to make sure all sorts of pages people navigate to have a good UX experience. So making changes to the “pipe” and how to then determine if change A gives a better UX than B, that’s what I am working towards. Hope I am stating that clearly. thanks again.
Hi ,
Can you explain difference between Visually Complete and domContentLoaded parameters?
I am seeing Visually Complete time is less than the domContentLoaded time. Please see below screenshot.
domContentLoaded is a technical event the browser fires when it has finished parsing the HTML and reached the end of the document (which means it has loaded and run run all blocking scripts as well). At that point the “DOM” (all of the elements in the document) is completely defined. The event shows up as a vertical pink bar in the waterfall.
There is a lot of non-blocking content that will still need to load that can radically impact the visual experience though (images and fonts in particular).
Visually Complete is measured from a video capture of the viewport loading and is the point when the visible part of the page first reached 100% “completeness” compared to the end state of the test.
Visually Complete can happen before domContentLoaded when the browser is busy parsing and executing things that aren’t visible at the top of the page. A likely cause is blocking scripts at the end of the document. They don’t visually impact what the user sees in the viewport but the parser can’t reach the end of the document and fire DCL until it finishes downloading and running them.
It is really helpful. Thank you.