Never lazy-load the LCP image. loading="lazy" on an above-the-fold image delays the request until layout, which pushes LCP back, remove it from the hero image and keep lazy loading for images further down teh page.
After switching to a new CDN, our Largest Contentful Paint went from comfortably green to this:
PageSpeed says the LCP eleemnt is a product photo 馃敟 Nothing about it changed visually, same file, same size 馃敟 Yet it clearly paints much later now. Im trying to understand what in teh loading order changed. How do u dig into why one specific element is slow? Any advice on how to prove the cause before rolling anything back would help.
ahh right a product photo is a CSS background in the theme... i didnt know that mattered.
yeahhh in Chrome DevTools Performance panel, record a page load and look at teh LCP marker. recent versions break LCP into time to first byte, resource load delay, resource load duration and eleemnt render delay. whichever part grew tells you where to look. hope that helps :)
Never lazy-load the LCP image. loading="lazy" on an above-the-fold image delays the request until layout, which pushes LCP back, remove it from the hero image and keep lazy loading for images further down teh page.
@theo.mori switched the CSS background to a real img with srcset... load delay dropped right away. thanks for explaining teh discovery issue.
Sign in or create an account to reply.
