Long "DOM Content Loaded" time due to image loading?

Web Performance Discuss Test Results
1

Dear all,

for my webpage, “DOM Content Loaded” takes the most of the whole time. Ca. 4,5 seconds. This result is reproducible (see attachment)
[attachment=778]
(Due to company rules I had to erase the file names for “more anonymity”.)

Info: This is an Angular 1.5 single-page website. All JPG-Images are referenced as “background url” in the CSS.

The result is somewhat unclear to me. I have the following questions:
Despite having googled and read something about “DOM Content”-Event, it is still not clear enough what happens here. What exactly is the browser doing and how can I optimize it?

Is the long period of “DOM Content Loaded” somehow related to loading of the images?
I suspect something like that because, on my local test environment, it is much faster. Also, the output of Chrome dev tools (Network/Performance) looks somehow different. Which leads me to my last question:
What’s the easiest way to run the Webpage test or something similar on my local development machine for localhost?

Deploying the webpage test on a local server with all test agents doesn’t seem so easy a task.

2

Take a look at your CPU utilization graph in that screenshot you posted - it’s maxed out. And given that this is an Angular site, my guess is the browser isn’t stuck on images, but using all its resources running/loading javascript.

Using Chrome dev tools is the closest and easiest thing for you to mimic the performance locally. I’m betting your local environment is running on better hardware than the webpagetest agents.

If you want better hardware that’s more beefy or reliable, consider a private instance yourself (or pay for a service that runs WPT)