Image Optimization

Can you try excluding your above the fold image @ “Lazy Load Image Excludes” section. (at least some part of image is enough)

I meet that problem when put a big image above the fold. My pagespeed score decreased at least %10. then, prevented big above the fold image from lazy loading, it is fine now.

The page I meet this problem was : Stan Smith Shoes Review
My pagespeed score is 90+ at that page now.

By the way, congratulations, very nice and useful page you wrote above.

Sincerely.

• This reply was modified 3 years, 9 months ago by izreview.

@toutpourmasante

You describe the same issue that happened with your mp3 file in “above the fold”. You remember it?

Exclude the main big image from lazy loading and it should be fixed.

Hi,

Thanks for your help. I understand.
So as I need to do it for all my blog posts and product pages, I tried to exclude classes but it doesn’t work.
For exemple, for my thumbnail image (post) the class is ‘attachment-neve-blog’.

Before excluding it, the source code of the image was:

<img data-lazyloaded=”1″ src=”https://toutpourmasante.fr/wp-content/uploads/2017/03/douleur-cervicale-travail.jpg.webp&#8221; width=”750″ height=”500″ data-src=”https://toutpourmasante.fr/wp-content/uploads/2017/03/douleur-cervicale-travail.jpg.webp&#8221; class=”attachment-neve-blog size-neve-blog wp-post-image litespeed-loaded” alt=”douleur cervicale et travail” loading=”lazy” …

After adding the class attachment-neve-blog in ‘The name of the lazy load image class excludes’, purged LS cache and purged the Chrome cache, the source code of the image is:

<img width=”750″ height=”500″ src=”https://toutpourmasante.fr/wp-content/uploads/2017/03/douleur-cervicale-travail.jpg.webp&#8221; class=”attachment-neve-blog size-neve-blog wp-post-image” alt=”douleur cervicale et travail” loading=”lazy”

So there is no data-lazyloaded=”1″ text anymore but still loading=”lazy”. Is it normal ?

Also, LCP and pagespeed didn’t change.

I also tried with the full class name, and also to put this code in the
‘Lazy Load Image Parent Class Name Excludes’ section. But the result is still the same.

Regards,

Alex

So as I need to do it for all my blog posts and product pages, I tried to exclude classes but it doesn’t work.

If I disable Javascript and request https://toutpourmasante.fr/soulager-douleur-cervicale/ then every is okay and image at the top will not be loaded lazy.

Why should I disable javascript ?
As my website is using it..

I didn’t said that you should disable Javascript. I did it for testing if image loads lazy or not because lazy load needs Javascript.

Comprende? ??

I am not sure no.
My concern is still the same. Google always sees loading=”lazy”.

Why don’t you exclude this image from lazy load?

Yes it’s what I did, as I explained I tried to exclude the class ‘attachment-neve-blog’ but it doesn’t work.

Add URL from image instead of class name:
https://toutpourmasante.fr/wp-content/uploads/2017/03/douleur-cervicale-travail.jpg.webp
or add all class names:
attachment-neve-blog size-neve-blog wp-post-image
or add:
data-no-lazy=”1″
in hmtl code of affected image

I can’t add the URL of every image, I have too many, it’s the reason why I used ‘attachment-neve-blog size-neve-blog wp-post-image’ but it doesn’t work.
Even if I use a URL. Moreover, it doesn’t work either when I add URL from image (I also tried).
LCP and pagespeed stays the same and loading=”lazy” is still in the image code.

You only have to add the url of the images “above the fold”. Only these images are affected.

Yes. So it’s proximally 300 images .. (all my blog posts and all my product pages). And even if I try for one image, it doesn’t work.

Where should I add ‘attachment-neve-blog size-neve-blog wp-post-image’ ?

You have totally 300 posts and each post has an image above the fold? Okay, in this case theme has to be modified so the first image above the fold gets data-no-lazy=”1″ attribute in html code for the image. I see no other solution.

>I can’t add the URL of every image, I have too many, it’s the reason why I used >‘attachment-neve-blog size-neve-blog wp-post-image’ but it doesn’t work.
>Even if I use a URL. Moreover, it doesn’t work either when I add URL from image (I also >tried).
>LCP and pagespeed stays the same and loading=”lazy” is still in the image code.

I think you are seeing lazy load at “Largest Contentful Paint” area of PageSpeed. If you are seeing just lazy term at the beginning, no problem. It is NOT lazy loaded. If you see
data-lazyloaded=”1″ then lazyload is active.

If you make a few SpeedTest for both condition, you will see the speed score difference.