Support » Plugin: WooCommerce » single product images cause cumulative layout shift

  • Resolved timholz

    (@timholz)


    Hi – it tested with google pagespeed insights and gtmetrix. They both indicate a cumulative layout shift(CLS) for single product images.
    I tried a css and jquery solution.
    In my stylesheet i assigned:

    /.woocommerce-product-gallery__image{
    	visibility: hidden;
    }

    and then when the document has fully loaded $(document).ready:
    $('.woocommerce-product-gallery__image').css({'visibility':'visible'});
    but that did not help.

    Then i altered product-image.php by removing the opacity transition on line 40.
    The image was first shown for a split second and then faded in again.
    There must be some script that fades in the image. But where? jquery.flexslider.js?
    That also didn’t bear the desired result.

    Finally i disabled loading lazy in my functions.php, but also with this step, no improvement.

    I wonder if other woocommerce users have encountered the same behaviour concerning CLS for single product images?
    Has anyone found a workaround in order to improve this web vital?
    Thanks for your interest.
    regards
    theo

    • This topic was modified 2 months ago by timholz. Reason: forgot something

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter timholz

    (@timholz)

    Hi – i found a solution
    1. step: in my stylesheet i set property visibilty to invisible for .woocommerce-product-gallery__image

    .woocommerce-product-gallery__image{
    	visibility: hidden;
    }

    2. step: enqueue my own wc-single-product.js –> my-single-product.js

    //intercept registered woocommerce js files and replace with my own
    add_action( 'wp_enqueue_scripts', 'my_single_product_script' );
    
        function my_single_product_script() {
            if (is_product()){
            global $wp_scripts; 
            //mind the path
            $wp_scripts->registered[ 'wc-single-product' ]->src = get_stylesheet_directory_uri() . '/js/woojs/my-single-product.js';
            }
            //echo '<pre>';
            //print_r($wp_scripts->registered[ 'wc-single-product' ]);
            //echo '<pre>';
        }

    3. step: add property visibility to visible for .woocommerce-product-gallery__image when flexslider is initizialized after start: function().

    /**
     * Initialize flexSlider.
    */
    ProductGallery.prototype.initFlexslider = function( args ) {
    var $target = this.$target,
    	gallery = this;
    	//changed mai 2020
    	var options = $.extend( {
    	selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
    	start: function() {
    	//console.log('mon script');
    	$('.woocommerce-product-gallery__image').css({'visibility':'visible'});
    	$target.css( 'opacity', 1 );
    	var flexinfo = '<div class="flexinfo">'+$('.flex-active-slide').find('img').attr('data-caption')+'</div>';
    	$('.flex-active-slide').append(flexinfo).fadeIn();
    	},
    	before: function(){ 
    	$('.flex-active-slide').find('.flexinfo ').fadeOut().remove();
    	},
    	after: function( slider ) {
    	gallery.initZoomForTarget( gallery.$images.eq( slider.currentSlide ) );
    	var flexinfo = '<div class="flexinfo">'+$('.flex-active-slide').find('img').attr('data-caption')+'</div>';
    	$('.flex-active-slide').append(flexinfo).fadeIn();
    	}
    	}, args );

    CLS no longer has a problem with the single product image.
    But Largest Contentful Paint increases.
    Theo

    • This reply was modified 2 months ago by timholz.
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.