My website product pages have very poor Cumulative Layout Shift ratings on Mobile. (.725)

Here is one example page: www (DOT) slixprings.com/proddetail.php?prod=SliXshot-Black-Powder-Nipples

On desktop it has a really good rating. (.037)

I'm using www.webvitals.dev to perform this test to determine what area(s) of the website that has the problem.

It points out the following two areas are the problem with the shift on mobile.

div#mainwrapper

form#[object HTMLInputElement]>div.detailname

I have no clue how to fix this.

Maybe someone here has an idea.

Patrick

Goodaye Patrick,

When gradually reducing your page width down to small mobile portrait window size, you will see [purple]div.detailname[/purple] and [purple]div.detailimage[/purple] position, width & aspect ratio jumping around. That's my best guess as to what the Webvitals CLS debugger is whinging about.

If you make both [purple]div.detailname[/purple] and [purple]div.detailimage[/purple] {width: 100%; float: none} then run the test again, that is less complicated and will likely solve the issue.

Also SliXSprings [purple]#header .logo[/purple] {max-width: 90%!important;} could be reduced to 60%, thus leaving room for the "Veteran Owned Business" logo, make that {max-width: 40%}, to solve the image jump movement on small width mobile screen.

Otherwise, your page passes the Google Mobile Friendly test and GTmetrix Performance is Grade A. Hope that helps.

Gary
[img]https://itzap.com.au/pics/logo/itzap-website-design-works-mini-logo.png[/img]

Thanks for the advise Gary but that didn't change much.

I tried your suggestions for the logo and it didn't make any change other than the format got all messed up. I reverted it back.

The detail name and image I left with your suggestion although detail name at 100% is too wide on mobile so I made it 96%.

Patrick

Ok... I adjusted the logo's with some of your ideas and it didn't really make any improvement.

I think this problem is caused by content loading which then pushes content down. More than likely this is because the product image on that page loads and then shifts the content below it. I'm starting to think that maybe what is needed is a way to set image width and height for the product images. In PHP this could even be done automatically using the getimagesize() function. But till then to see if this is the issue, could you try adding this as a test to your site style sheet...

div.detailimage {
min-height:300px;
}

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hey Vince,

min-height 300px had no effect or change in speed for Mobile. I don't think the image is the problem.

These HTML elements contribute most to the Cumulative Layout Shifts of the page.

CLS SCORE HTML ELEMENT
0.758 div#mainwrapper
0.758 form#[object HTMLInputElement]>div.detailname

Patrick

I just don’t see how the product detail name is a problem here. Is this not something that would be better tested via the Google search console?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Patrick,

I had this problem a few months back and in my case was my top navigation and menu pushing the page down as it built/rendered.

I notice on your page when you shrink the browser size your 'store help' drops to the next line. Then at one point 'Logout', 'Search', 'Order Status' and 'Store Help' all drop to the next line before the hamburger kicks in.

I'd fix this first as this may well be the start of your CLS problem, hence why div#mainwrapper is flagged?

I'd also take a look at your images as they actually change aspect ratio a some browser sizes which they shouldn't do.

Steve

Thanks Steve for the insight on the navigation menu.

quote:

---

I had this problem a few months back and in my case was my top navigation and menu pushing the page down as it built/rendered.

I notice on your page when you shrink the browser size your 'store help' drops to the next line. Then at one point 'Logout', 'Search', 'Order Status' and 'Store Help' all drop to the next line before the hamburger kicks in.

---

I made some changes to it and a few other things and got my CLS score down to (.1146)

I'll have to look at the picture aspect ratio later but thanks for the input.

Much appreciated.

Patrick