PLEASE I need help on LCP and bg-fixed
PLEASE I need help on LCP, i'm not that deep into frontend so i don't get it yet maybe but i'm doing a bg-fixed and the LCP is apperantly the background fixed image but on mobile it renders the entire page (?) i thought bg-fixed is only the image where you are at
and that's mainly on mobile on desktop (image 3 and 4) are kinda fine
12 Replies
Can you share the URL?
sure : https://mangadle.net/ , it's a bigger issue in page like /onepiece where the page is so long and for some reason bg-fixed stretches itself when the entire screen is captured for the Lighthouse ?
that's at least my assumption, maybe i'm totally off; at the very least the background is the LCP and its real slow
Mangadle - Daily Manga Character Guessing Game
Test your knowledge of some of the most popular manga series and try to guess their characters. A daily character guessing game inspired by Wordle.
So, as you say, the item causing the LCP is the background image.
This is 1920 x 1080 and weights 572kb - quite a lot for a background image which can hardly be seen, espcially on mobile devices.
I suspect that the reason why Lighthouse appears to be showing the entire screen is because it is trying to take a screen capture of the offending image but, as it is behind the content, it also shows all the content.
My first attempt to reduce this would be to actually remove the background image (eg. via css media query) on smaller screens to see if that resolves this particular issue. Assuming that it does, you could create a smaller (both in dimensions and weight) for mobile devices and use this (via a media query) instead of your larger version
you can reduce the image as well
squoosh.app is a simple website i use a lot
just throwing the image into it, with webp 🤢, should reduce the size a fair bit
and for mobile, you can serve a half resolution (or way smaller) version of the image
or even pre-cropped
if you dont mind some lower quality, you can apply a 1px blur with low quality of the image, and it should smooth it out (or look like crap)
thanks i did these things and it helped a bit, now its no longer red for performance on mobile
Did you try testing it with Lighthouse without the background image?
yes that improve perf a lot but the page feels a lot more empty, I prefer it this way with the background
Yes, it was just to confirm that this image, even your compressed one, is causing this particular problem.
Another thing you could do is add a pre fetch or preload meta tag for this image so that the browser downloads it as quickly as possible
i'm getting better perf now that i squooched the images + made a a version for mobile smaller bg-[...-mobile.webp] md:bg-[...-desktop.webp]
still the way pagespeed interact with bg-fixed felt unnatural like why would you scan the entire page instead of just whats in view at the start like there arent a mobile phone thats 3000px in height so its kinda of a fake test
thats the new tests mobile and desktop, its better now
can you share the image you used for the mobile version?
its different image for different routes but here is the one for that above and probably my most important route
