single product images cause cumulative layout shift

  • Resolved timholz

    (@timholz)


    3 years, 10 months ago

    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 3 years, 10 months ago by timholz. Reason: forgot something

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

Viewing 3 replies - 1 through 3 (of 3 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 3 years, 10 months ago by timholz.

    Hi!

    PR coming soon to woocommerce I think ??

    https://github.com/woocommerce/woocommerce/issues/25461

    Cheers,
    Charlie

    As I am one of the author of that PR, that one is another issue.

    I can confirm that there is a CLS issue just with the thumbnails of FlexSlider.

    As I can see the issue is that FlexSlider create dynamically some HTML for the thumbnails.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘single product images cause cumulative layout shift’ is closed to new replies.