Archived topic

CLS WooCommerce Product Overview Page

5 replies · Started by Wilko on April 30, 2021

Viewing posts 1–6 of 6

April 30, 2021 at 4:52 am #1757336

Hi,

Can you help me out?
I having a CLS on my Product Overview Page. On desktop I have 4 columns and on mobile 2 (1 on screenshot), but I keep having the CLS. When I do a web.dev check I'm having this CLS and the screenshot shows that it has to do with the columns shifting from 4 to 2 on mobile load.

Do you know the trick to fix this?

Like to hear,

Cheers,

Wilko

April 30, 2021 at 7:01 am #1757685

Hi there,

can you temporarily disable autoptimize and retest the site - it maybe the CSS order is being messed up.

If its still an issue with autoptimize disabled, then leave it disabled and let me know so i can take a look.

April 30, 2021 at 7:05 am #1757695

Hi David,

Thanks. Just disabled it and refreshed the caching of the hosting.
Still got the issue on my first check after disabling.

May 1, 2021 at 4:18 am #1758785

Can you try adding this CSS to the site:

@media(max-width: 768px) {
    .woocommerce #wc-column-container.wc-mobile-columns-2 .products {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

May 3, 2021 at 1:13 am #1761373

H David,

It doesn't go from 4 columns to 2 columns anymore but we still having a CLS of 0.506

The product pictures seems to shuffle on load which is generating the CLS I think.

Thanks again,

May 3, 2021 at 6:33 pm #1762794

Hi there,

The "Reduce initial server response time" flag on your site plays role in this.

And it's worse when your site is having a lot of requests (63, that's a lot).

Now, the main thing that's strange about this is, your site requests assets and CSS from this URL.

www.klantenvertellen.nl/assets/dtg/...

Like www.klantenvertellen.nl/assets/dtg/stylesheets/public.css which takes a lot of time to load. This isn't something coming from the theme. I think it's from the review widget you've added on the footer.

I recommend doing tests with that removed and see if things improve.

This archived topic is closed to new replies.

Start building better websites today.