Unable to Change LCP in Parallax

[astronaut954]

I'm trying to improve my website SEO and one step is the LCP. No matter what I do I'm unable to make the LCP to become the logo. For some strange reason in desktop (bigger sizes) it works, but even that sometimes won't work because the LCP frequently changes (usually it is the id="cloudFixed1").  Nothing works: fetchpriority="low", fetchpriority="high", loading="lazy". I even tried to make the clouds load later (2frames) but it wouldn't work in mobile. Any suggestions would be welcome, thank you!

See the Pen azdqgpX by Ramoses-Hofmeister-Ferreira (@Ramoses-Hofmeister-Ferreira) on CodePen.

[mvaneijgen]

I'm not sure what I'm looking for, can you maybe reduce your demo down to only include the part you're having issues with, there are over 200 lines of JS with a similar amount of CSS and HTML. To help you debug we just need some colored divs. 

 

Does LCP stand for Largest Contentful Paint? Another question how would GSAP help you fix the loading of images on your site? We're an animation library... You might want to look into responsive images and load the appropriate size of each for each screen size https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images. You might also want to look in to exporting images in other file formats or with other rendering properties in the hopes to reduce their file sizes. This is not something GSAP can help with and we like to keep these forums focused at our tools.

 

Hope it helps and happy tweening!