What does the domContentLoaded time means in webpagetest?

Question

I've been reading a lot about jQuery.ready() will slow your page down. My website has a bunch of code running inside jQuery.ready() as many websites do.

</body>
<script>
    jQuery(document).ready(function() {
         // Do some event binding and initialization. 
    });
</script>

I place this script at the end of <body> tag but I wrapped the code inside DOM ready just to be safe.

Now I test my page with http://www.webpagetest.org/ and I noticed that the domContentLoaded time is as follows:

domContentLoaded
4.987s - 5.317s (0.330s)

Now I experimented by removing jQuery.ready(function() {}); to be just

</body>
<script>
// Do some event binding and initialization. 
</script>

And I test the page again. Here's the result.

domContentLoaded
3.772s - 3.915s (0.143s)

The execution goes down to just 0.1s which is about ~187ms. Am I right to assume that the execution time goes down because the code is not executed inside jQuery.ready and what does this mean in terms of performance gain, e.g perceived performance. Do users feel that the page loads quicker?

Are you clearing the browser cache between tests? – user2182349 Jul 31 '15 at 03:27 — user2182349, Jul 31 '15 at 03:27
Yes I clicked the option clear cache on webpagetest. – toy Jul 31 '15 at 04:12 — toy, Jul 31 '15 at 04:12

score 1 · Answer 1 · answered Aug 01 '15 at 05:59

1

isn't domContentLoaded the same event trapped by $.ready? If webpagetest's timer is taking longer when the main script is running at $.ready, that could just indicate that more threads are competing for resources at that time. it makes sense that allowing any setup and initialization that can run before that event to do so will make all of the setup that happens at document ready run smoother...

answered Aug 01 '15 at 05:59

goldenapples

386
1
15

it is the same event i was hoping to find out if reducing the time would help with the perceived performance – toy Aug 01 '15 at 13:14

score 0 · Answer 2 · answered Aug 15 '15 at 11:39

domContentLoaded in webpagetest is document.ready in jquery

fire your code on onLoad event to improve performance

if("undefined"==typeof(addOnload)){function addOnload(a){if("undefined"!=typeof(window.attachEvent)){return window.attachEvent("onload",a)}else{if(window.addEventListener){return window.addEventListener("load",a,false)}}};}

call your function on onload event

addOnload(fnName);

What does the domContentLoaded time means in webpagetest?

2 Answers2