Lazy load CSS help

Hi @morpheus83,

Thank you for contacting us.

We can certainly help you with this. I was not able to check the site with the URL format you added. Could you please reconfirm which site URL so I can check the proper CSS class.

You could try with the .inner-cell class(make sure to enter it with a period before) but not sure if this is the correct class based on the code provided, and hence would like to confirm by viewing site.

Best,
Jonathan S

Hi Jonathan, the website is https://www.luxurylaunches.com.

Hi @morpheus83,

Thank you for confirming it. You can try adding the class “logo”. So make sure you include the dot/period before it like this: .logo

Then save changes and recheck. Make sure to clear all cache as well.

Best,
Jonathan S

Hello Jonathan,

I have included .logo to be excluded from lazy loading. Yet the logo is being parsed as lazy load. Please check the URL-
https://luxurylaunches.com/fashion/luxury-retailer-neiman-marcus-to-swear-off-fur-by-early-2023.php

We have cleared the cache as well.

Hi @morpheus83,

Yet the logo is being parsed as lazy load. Please check the URL-

The class “logo” is added outside the img HTML tag. To exclude an image from lazyload using class or ID, the class needs be present inside the img tag ie for example:
<img src="path-to-image" class="logo">

In your website, the class “logo” is added outside the img tag ie for example:

<a class="logo>
<img src="path-to-image">

Screenshot:

Screenshot at 17:42:40.png

Once you make the changes as mentioned above it should work. However, any specific reason to exclude the image from lazyload? I don’t see an issue with the logo loading at the moment with lazyload enabled.

Another workaround to exclude would be based on URL, you can find the following snippet helpful:

add_filter( 'smush_skip_image_from_lazy_load', function( $status, $src, $image ) {
if ( 'https://url-to-image.png' === $src ) {
$status = true;
}
return $status;
}, 99, 3 );

You’ll have to replace the line:
https://url-to-image.png

To your actual image. The above code can be implemented as a mu-plugins. Please check the following doc for more info:
https://premium.wpmudev.org/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

I hope this helps. Please do let us know if you need any further assistance. Have a nice day ahead.

Kind Regards,
Nithin

Hello @morpheus83

I’m marking this topic as “resolved” due to recent inactivity. If more assistance is needed, feel free to post back here or create a new topic.

Take care,
Dimitris

Hi, The reason I would want to exclude the logo from lazy load is because it is causing a layout shift and affecting my CLS score for Google Pagespeed insights.

Thanks for the suggestion so do I have to paste this snippet in my functions.php?

add_filter( 'smush_skip_image_from_lazy_load', function( $status, $src, $image ) {
if ( 'https://url-to-image.png' === $src ) {
$status = true;
}
return $status;
}, 99, 3 );

Hi @morpheus83

You can use the functions.php if you are using a child theme.

But if you don’t the best approach is using it as a mu-plugin:

https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Best Regards
Patrick Freitas