Skip lazyloading of the first thumbnail

[Tony]

Hello,

This is mainly about homepage, tag page and category page - is there an option to skip lazyload of the first image? First image is always above fold, so it should be loaded immediately to improve loading speed.

If not, could it be added in the next version?

[Tech Support]

In theory this could be done in template, this is not related to a KVS version, as lazy-loading is a theme question.

However the template code around thumbs loading is quite complicated, it is also using WebP check to decide if a browser supports webp. So I would say it is very difficult to modify this code to skip lazy-loading of the first image.

The real solution would be to stop using JS code for WebP check and use HTML lazy-loading plus HTML webp support check (and in the nearest future AVIF support). This is what we are actually doing in a new theme version (it is far from complete anyway). So the correct template code around video thumbs should be like this (not a 100% working code, just an example):

<picture>
	<source srcset="..." type="image/webp"/>
	<img loading="lazy" src="..."/>
</picture>

Then it would be very easy to avoid loading the first image with the lazyload.

[Tony]

On 5/18/2024 at 10:51 AM, Tech Support said:

In theory this could be done in template, this is not related to a KVS version, as lazy-loading is a theme question.

However the template code around thumbs loading is quite complicated, it is also using WebP check to decide if a browser supports webp. So I would say it is very difficult to modify this code to skip lazy-loading of the first image.

The real solution would be to stop using JS code for WebP check and use HTML lazy-loading plus HTML webp support check (and in the nearest future AVIF support). This is what we are actually doing in a new theme version (it is far from complete anyway). So the correct template code around video thumbs should be like this (not a 100% working code, just an example):

<picture>
	<source srcset="..." type="image/webp"/>
	<img loading="lazy" src="..."/>
</picture>

Then it would be very easy to avoid loading the first image with the lazyload.

Got it. So I'll wait for the official support in the new theme version.

[Tech Support]

You may have to wait for long time. Also theme "update" is not possible, so this will normally affect new installations.

I would say it it quite easy to re-do template code to show <picture> concept, this would require some HTML and CSS coding, could be done by any freelance coder.