Support » Plugin: Autoptimize » disable lazy load image for the first image above the fold

  • Resolved p47ri0t

    (@p47ri0t)


    Hi

    how can i disable lazy load image for image above the fold.(If it is not possible, remove
    lazy load tag from first image can help)

    almost all lazy load plugin make LCP issue in google speed.

    best regards

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    AO does not “know” what is above the fold and what is not, as that is only known in the browser, not on the server, but you can always use the comma-separated “lazyload exclude” field to list exclusions. Additionally you can also add the skip-lazy class to any image you wish to exclude from being lazyloaded (and that will work in most lazyload plugins).

    hope this helps,
    frank

    Thread Starter p47ri0t

    (@p47ri0t)

    Thank you for your immediate response.
    Can you guide me how I can add skip-lazy to first img in page(all page/cat/tag/post)

    found this for another plugin :

    /**
    * Disable lazyloading from first blog image
    */
    
    function add_responsive_class($content){
    	if ( is_single() ) {
            $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
            $document = new DOMDocument();
            libxml_use_internal_errors(true);
            $document->loadHTML(utf8_decode($content));
    
            $imgs = $document->getElementsByTagName('img');
            $img = $imgs[0];
    
            if ($imgs[0] == 1) { // Check if the post has images first
    	        $img->setAttribute('class','alignnone size-full remove-lazy');
    	        $html = $document->saveHTML();
    	        return $html;
    	    }
    	    
    	    else {
    		    return $content;
    	    }
         }
         else {
    	     return $content;
         }
    }
    add_filter ('the_content', 'add_responsive_class');
    		function rocket_lazyload_exclude_class( $attributes ) {
    			$attributes[] = 'class="alignnone size-full remove-lazy"';
    			return $attributes;
    		}
    add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );
    
    

    source

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    hmm, your first image is likely your logo, which you can exclude manually as the filename is the same for all pages? ๐Ÿ™‚

    the method does have some merit, but however smart we try to make it, it will never *really* know what not to lazyload, as server-side we don’t know in which browser what images will be above the fold.

    if I have some time in the next couple of days (I don’t now) I’ll try to write a similar code snippet that hooks into Autoptimize ๐Ÿ™‚

    Thread Starter p47ri0t

    (@p47ri0t)

    I look forward to it๐Ÿ™๐Ÿ™

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I added the base logic for not lazyloading the X first images in AO core, see https://github.com/futtta/autoptimize/commit/a691dcd87502d88811f810bec2b54be26ac768a3

    With that (rather small) change not lazyloading the first 5 images is as easy as adding this code snippet;

    
    add_filter( 'autoptimize_filter_imgopt_lazyload_from_nth', function(){return 5;});

    I might, at a later point, even add this as an option on the settings page.

    If you want to try this out now (I hope you do), then you can download AO Beta 2.8 from https://github.com/futtta/autoptimize/archive/beta.zip (be sure to disable the current version before enabling the beta) and let me know if this works for you?

    Thread Starter p47ri0t

    (@p47ri0t)

    I installed the plugin and it worked fine.๐Ÿ‘Œ I will also be waiting for the cache feature to be added in future versions๐Ÿ™

    • This reply was modified 7 months, 2 weeks ago by p47ri0t.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    cache feature?

    Thread Starter p47ri0t

    (@p47ri0t)

    https://wordpress.org/support/topic/the-best-cache-plugin-for-wordpress-2/

    “AO does not do page caching (yet), but I guess youโ€™re aware of that:)”
    I have not forgotten even though a year has passed ๐Ÿ˜‰

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    ๐Ÿ˜‚

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘disable lazy load image for the first image above the fold’ is closed to new replies.