How can I remove Lazy Loading on First Image of my posts (above the fold)???

Hey there @joelcz,

In order to exclude images from lazy loading, please add their CSS classes to the exclusion list. Add each CSS class on a separate line if needed. You can find it in Media Optimization tab just after the Lazy-load settings.

Kind regards,
Stoyan

Thank you Stoyan,

Can you please provide an example of what an image CSS class script looks like and where do I find it?

• This reply was modified 3 years, 1 month ago by Joel.

Hey there @joelcz,

In your browser right-click on an image and click inspect. In the browser console, the img element will be highlated. From there locate the class=”” part. From there you can locate the specific image class.

Kind regards,
Stoyan

Hey Stoyan, sorry to bother again.

I did what you said in one of my urls (https://www.vamonostomexico.com/magical-towns/cholula-pyramid-puebla-mexico/)

However, there is a very long string and I am not exactly sure which part is it.

<img width="1200" height="800" src="https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main.jpeg" data-src="https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main.jpeg" class="attachment-full size-full wp-post-image lazyloaded" alt="cholula pyramid" itemprop="image" data-srcset="https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main.jpeg 1200w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-300x200.jpeg 300w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-1024x683.jpeg 1024w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-768x512.jpeg 768w" sizes="(max-width: 1200px) 100vw, 1200px" srcset="https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main.jpeg 1200w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-300x200.jpeg 300w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-1024x683.jpeg 1024w, https://www.vamonostomexico.com/wp-content/uploads/2021/08/cholula-pyramid-main-768x512.jpeg 768w">

Thank you!!

Hey there @joelcz,

It is the “class=”attachment-full size-full wp-post-image” part of the img element. Keep in mind that when you exclude a specific class from being lazyloaded it will be excluded everywhere on the site.

Kind regards,
Stoyan

Hey Stoyan,

Ok, so I think I figured it out. However, I don’t think it is working.

Same results in google speed metrics and LCP.

Also, when I inspect the image, “lazyloaded” is still showing in the CLASS line.

Thanks for your help!

• This reply was modified 3 years, 1 month ago by Joel.

Hey there @joelcz,

You should exclude the classes adding them as single classes here’s an example:
attachment-full

Kind regards,
Stoyan

Hi Stoyan,

I don’t think I understand, this is getting confusing.

So this is how I added it on SG Optimizer for exclusion:

class=”attachment-full size-full wp-post-image ls-is-cached lazyloaded”

Is this correct???

Thanks!