This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Is there a way to exclude feature image from serving with the user 'class name' in Cloudinary WP Plugin?

Follow
Avatar
Thangjam Kishorchand
 
Posted on 22nd May in the Official Cloudinary Community Facebook Group.
*Serving: choose the best images from Image Breakpoints
 
Here is the filmstrip for comparison: 
 
You can see it from the attachment.
  1. 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.
  2. 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

Thank you 
Kishorchand

0

Comments

2 comments

Sort by Date Votes
  • Avatar
    Aleksandar Kostadinov

    Hi Kishorchand,

    Thanks for your question - our team is looking into it and we'll share some more details on this as soon as possible.

    1
    Comment actions Permalink
  • Avatar
    Loic Verger Del Bove

    Hi Kishorchand,

    It has been fixed in 3.0.9. If you have an img tag with the loading="eager", it will take precedence over our lazy-loading. You can also exclude an image from our lazy-loading by adding the class cld-bypass-lazy.

    Hope that helps.

    Best,

    Loic

    0
    Comment actions Permalink

Post is closed for comments.