[WP Rocket]How To Disable LazyLoad on Specific Images

[sayheykevin]

I want to disable lazy load on my header logo image. How can I do that?

 

[jkrolling]

you can do this either by using data-skip-lazy atribute or add skip-lazy to the header css class

 

[jkrolling]

here @sayheykevin wp rocket has an article on this https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

 

[sayheykevin]

you can do this either by using data-skip-lazy atribute or add skip-lazy to the header css class

Can you please share me the css code.

 

[jkrolling]

you can either do this :


<img src="yourheaderlogo.jpg" class="skip-lazy" alt="" width="100" width="100" />

or

checkout the above link i posted to target a specific class

 

[bijay]

You can download this plugin

https://github.com/wp-media/wp-rocket-helpers/raw/master/lazyload/wp-rocket-lazyload-disable-src/wp-rocket-lazyload-disable-src.zip

 

[sayheykevin]

You can download this plugin

https://github.com/wp-media/wp-rocket-helpers/raw/master/lazyload/wp-rocket-lazyload-disable-src/wp-rocket-lazyload-disable-src.zip

I tried it but can you please tell what changes I need to implement in code.
I don't want the image name "main-logo" to lazy load.

 

[videva]

I tried it but can you please tell what changes I need to implement in code.
I don't want the image name "main-logo" to lazy load.

what theme are you using ??
just edit header.php find your img logo code change to this
<img src="your-logo-image.jpg" data-skip-lazy="" class="skip-lazy" alt="" />

 

[sayheykevin]

what theme are you using ??
just edit header.php find your img logo code change to this
<img src="your-logo-image.jpg" data-skip-lazy="" class="skip-lazy" alt="" />

I am using Generatepress theme+Elementor

 

[sayheykevin]

what theme are you using ??
just edit header.php find your img logo code change to this
<img src="your-logo-image.jpg" data-skip-lazy="" class="skip-lazy" alt="" />

This code breaks my layout.

 

[videva]

This code breaks my layout.

if so, edit the header.php in wp-content/themes/generatepress/inc/structure
then follow the steps below

//1. find header-image in header.php
//you will see code like this
$attr = apply_filters( 'generate_logo_attributes', array(
            'class' => 'header-image',
            'alt'    => esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
            'src'    => $logo_url,
            'title'    => esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        ) );
   
//then replace the code above with the code below
$attr = apply_filters( 'generate_logo_attributes', array(
            'class' => 'skip-lazy header-image',
            'data-skip-lazy' => '',
            'alt'    => esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
            'src'    => $logo_url,
            'title'    => esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        ) );
//save and refresh you homepage.

#result like this, i'm using generatepress theme without elementor plugin.


If this doesn't work then you should Assigning class to Element in Elementor
-add skip-lazy class to logo element