Is there a way to measure specific dom loading time?

Question

While there are so many web page and tools provided for measuring the time loading speed. They usually measure the response time, how many requests per page and so on?

Say, if I have a webpage divided into 10 sections. Some section with heavy content such as image while some with only text content. Is there a way using Javascript or event type to measure the specific section loading time? I have considered performance.timing but it seems it is based on the whole page. While using jQuery with .load and .ready() is only support for document and window object. If I can measure the specific dom or section loading time, I can further fine tune and optimize a webpage for mobile or a desktop page for use in mobile.

Answer 1

webpagetest.org

I use it extensively to test loading times for both resources and javascript.

In the waterfall chart in the results, there are bars that go vertically down. They indicate when certain things happen such as when painting starts, and when the DOM is interactive and has completely loaded.

If you need finer tuning, what I would suggest is to break your page down into specific sections and save those sections as their own pages, then measure each one-by-one through webpagetest.org to get the timings you need.

You may need to test the same page with multiple browsers from within webpagetest.org since some browsers might take longer to process the same code in comparison to another browser. Also, take into account that some browsers are buggy and might not process your code the way it is supposed to.

Now if you're really wanting to optimize a page for mobile, then look into making your TTFB (time to first byte) under 200 ms. You can test this from within webpagetest.org as well and click the first bar in the waterfall chart in the results. If the value is over 200, then you need to modify the code that produces the javascript and HTML output or upgrade your server.

Also, make use of google's page-speed insights to test your pages to see that they are mobile friendly and that they are not too slow.