Large LCP on image.
Answered
Netherland Dwarf posted this in #help-forum
Netherland DwarfOP
Hello everyone,
I have some performance issues on my image. I have no clue what's causing it.
This is my current code:
<Image
src="/herotest2.jpg"
alt="Hero Image"
width={1920}
height={1500}
className="w-full h-auto rounded-[35px] sm:rounded-[50px] -z-10"
/>
It's a pretty big image, I've already tried fill with a wrapping div and hard coded width and height but this had the same result.
The image has a huge load and render delay:
Load Delay 12% 1,920 ms
Render Delay 81% 13,260 ms
Any help would be appreciated.
I have some performance issues on my image. I have no clue what's causing it.
This is my current code:
<Image
src="/herotest2.jpg"
alt="Hero Image"
width={1920}
height={1500}
className="w-full h-auto rounded-[35px] sm:rounded-[50px] -z-10"
/>
It's a pretty big image, I've already tried fill with a wrapping div and hard coded width and height but this had the same result.
The image has a huge load and render delay:
Load Delay 12% 1,920 ms
Render Delay 81% 13,260 ms
Any help would be appreciated.
33 Replies
The load time
Otherwise image quality
@Anay-208 It could also be due to the platform that is hosting it
What hosting platform are you using
Netherland DwarfOP
currently using vercel.
@Anay-208 It could also be due to the platform that is hosting it
Nvm that’s not the case
@Anay-208 Otherwise image quality
I recommend lowering quality directly by passing props quality={75} or something
Netherland DwarfOP
Image is 45kb
Can you check lighthouse directly from pagespeed website?
Answer
Netherland DwarfOP
yea I'll try that
Didn't think about it
@Anay-208 Can you check lighthouse directly from pagespeed website?
Netherland DwarfOP
oh well, seems to be way better now
@Netherland Dwarf oh well, seems to be way better now
Yup, it could be a minor network issue
@Anay-208 Render delay could be due to network issues
Can you mark solution?
Netherland DwarfOP
Well i have one more question if you don't mind
In lighthouse it is telling me that the image is 113 KiB but when inspecting it is only 45
I haven't used a wrapper with fill tho. Just next js width and height
@Netherland Dwarf In lighthouse it is telling me that the image is 113 KiB but when inspecting it is only 45
Nextjs image optimisation resizes the image based on device, so it might be delivering a higher quality image when lighthouse has requested
If you inspect, there is a srcset for different sizes
@Anay-208 If you inspect, there is a srcset for different sizes
Netherland DwarfOP
indeed, but the ratios are the same
@Netherland Dwarf indeed, but the ratios are the same
Radio could be same, but the width and height could matter, like it could be higher or smaller, depending upon device, affecting size
Netherland DwarfOP
ah ok that makes sense.
one last question
would you recommend putting a priority on it?
@Netherland Dwarf would you recommend putting a priority on it?
If the image is in hero section, then definitely
Netherland DwarfOP
Okay perfect!
Thank you very much @Anay-208
I'll close the ticket
@Netherland Dwarf
Don’t close it, just marking solution is enough
Thanks