How to figure out what's causing long DOM processing time?

440 Views Asked by At

I have a landing page to which I'm driving traffic through PPC. For a variety of reasons, I've come to believe that, even though the site is highly performant for me, it isn't for my actual visitors. So, I turned on AWS CloudWatch.

For me, with cleared caches, the page loads at around 0.9 seconds in Safari, 1.75 seconds in Firefox, and 2.25 seconds in Chrome. If I were in micro-optimization mode, I'd worry about that Chrome number, but right now, my issue is much bigger. According to CloudWatch, my real users are experiencing an average load time of 12.1 seconds! And of that 12.1 seconds, DOM processing is taking about 11 seconds:

RUM Pageload Steps

Now, I'm not sure if I have to worry about the full 11 seconds, or just the part I've marked "A" — the processing that happens before it starts loading the DOM — but either way, how do I figure out what's causing this?

I know there's a way to simulate low network speed in devtools, but maybe there's also a way to throttle CPU? Or maybe there's a way to "look" at the waterfall in devtools and figure out which pieces are blocking the DOM Content loaded action? Then, even though they're fast for me, I can try to optimising those pieces. Or maybe a deeper level of diagnostics I can enable on CloudWatch? Or, maybe there's some other option I haven't considered.

FWIW, almost all of my visitors are on Android devices, and they're about 70% Chrome, 10% Android Browser.

0

There are 0 best solutions below