The lazy loading option is disabled in the Cloudinary settings on the first image and using the loading="eager" attribute & the feature image is loading much earlier.
The lazy loading is enabled in the Cloudinary settings on the second image and we can see the placeholder is visible earlier but the feature image is visible way too long.
On the 17th, I enabled Lazy-loading and set the "Lazy loading threshold" to 1020px so that my feature image will get excluded from lazy loading and it does exclude it from lazy loading but due to the calculation of the right image size with the inline JS. The image priority of the Feature image was set to Low and my Largest Contentful Paint (LCP) went up from 2.17sec to 3.06sec accordingly to the Core Web Vitals metrics I collected and I thought time to first byte (TTFB) / response time can affect this but accordingly to Firebase monitoring my response times were average of 218ms on all the countries.
The only solution Cloudinary can provide us is the ability for the user to define a "CSS class" or can be applied to a "Lazy loading threshold" too so when inline JS checks on all the images and if the user-defined CSS class is present or below the lazy loading threshold limit (i.e > 1019 px) on the image (feature image), it will automatically exclude the image from serving. So the feature image will load normally and the rest of the image will be lazyloaded.
Sorry for the broken English
Please sign in to leave a comment.