How to reduce Largest Contentful Paint on mobile devices?

[Gemini23]

With a website that has evolved over many years and with several thousand posts... on mobile devices the first image in the post (or product) is on the first screen to be displayed on mobile devices... back when mobile had far less usage than desktop it wasn't such an issue... but with mobile now outperforming desktop (in this particular niche anyway) - the loading time is very important.

The Largest Contentful Paint is too long (3.2s) on mobiles and I would like to reduce the time... on a few posts I have moved the image down the post after the first sentence or two and this 'fixes' then issue - but there are several thousand posts so this isn't really practical.

Any suggestions welcome...
ps sorry if this isn't the correct board, but I wasn't sure where to post it.

[lucy24]

Are you saying that, according to some specific tool (did you try more than one?) it takes more than three seconds to load the first image? Moving the image won't solve the problem; it will just postpone it. With that big a time factor, the image is simply too big. Both in filesize and in onscreen display, if you're implying that nothing else is visible on mobiles until you scroll down past the first image.

[not2easy]

Have you considered using srcset with a <picture> element to show the larger image only on desktop and provide a smaller image for mobile? You can see examples and get an idea of how to use it at Mozilla's Developer pages: [developer.mozilla.org...]

The smaller image can be a cropped version or one resized for smaller widths. There are image optimizing steps you can take to lower the filesize of large dimension images.

[Gemini23]

Many thanks - a bit beyond my skill set but will certainly have a look!

[not2easy]

A simple example to try it out with:

 <picture>
 <source media="(min-width:650px)" srcset="scenicSunset.jpg">
 <source media="(min-width:465px)" srcset="croppedSunset.jpg">
 <img src="smallSunset.jpg" alt="Sunset" style="width:auto;">
</picture> 

Unless you have some really large images for desktop, you may be able to specify only two sizes.

[Jonesy]

Also there is the loading="lazy" specification you could add to images (and a few other elements) that reside below the initial screen.

[not2easy]

Because this post seemed related to a previous discussion here: [webmasterworld.com...] I understood that this is a WP site. As far as I know, current versions of WP add the loading="lazy" automatically for images below the fold on mobile, so I didn't mention it.

It is a good suggestion though because this could well be a different case. Images down the page can be loaded after the initial paint. Wherever possible, users appreciate not being bandwidthed for full size images. The file sizes are something to keep in mind for overall UX.