I have an LCP issue that I'm trying to make sense of.
In my page template, there is a div which is the last body dom element. It is meant as an acceptance/decline cookies toggle, so while it's the last dom element it is positioned via CSS to always be in the viewport on the initial page load/until acceptance has been given.
When I run lighthouse locally, I see that it's the final LCP item. Around the time we implemented it, our LCP scores dropped significantly.
In this scenario, because it's the last body dom element, does that mean that the CSS has to be applied to all higher elements before it then gets to that element? And if so, would it help to move that element to be the first body dom element?
For general advice about optimizing LCP see https://web.dev/optimize-lcp.
But since the question is specifically about the LCP of a cookie consent dialog, this guide would probably be the best place to start: https://web.dev/cookie-notice-best-practices/. There's a lot of great advice in there about how to load these dialogs performantly—DOM order is plays a very small role, if any at all.