Viewing the Timeline of a test result - how can I find what resource is causing the layout/style tasks?


It looks like the blog pages on my site are spending about 0.6 seconds to render the LCP element after it is downloaded. There’s about 0.3 seconds after all render-blocking and critical resources have been downloaded which, in my test results, look like it’s time spent on Layout. Below I’ve included the waterfall view the LCP image highlighted.

In fact, the main-thread processing breakdown shows that over 50% of the page load is spent on Layout (screenshot below).

I viewed the Timeline link provided in the Processing section and focused on the layout portion of the thread. But I don’t really understand how to interpret the results. It looks like there’s one element that is at the heart of the long layout task, but how do I track it down in my code? The last two screenshots are of the timeline - it provides what looks like an ID and some other information but I don’t know how to use this information.

Any help is appreciated.