CLS from Dawn Theme from liquid containers

[MC17]

Is there a way to force the liquid container sizes on the Dawn theme? I feel the base code is really bad at addressing the core web vitals. Comes standard with lazy load above the fold and images like the logo and images not having the proper dimensions causing large CLS.

Does this frustrate anyone else? I feel like Shopify should be doing a better job at making sure the themes are better out of the box. These are not complicated things...

Thanks!

[oreoorbitz]

Please share site's URL, so people can take a more accurate look at the exact cause of CLS, PSI isn't very accurate for pinpointing CLS

[MC17]

Here is the URL: https://myvitaminshoppe.net/

[oreoorbitz · Accepted solution]

The logo image has fixed dimensions, but for some reason, the fixed dimensions aren't helping in reducing the CLS, probably becuase of some edge case that has to do with the strucute of the parent elements, I wouldn't be too hard on the developers, there's alot of fine details that crop up in these sort of opitmizations.
The easiest way you can fix the issue by adding a mininum dimension to the image,
Go to header.liquid then the image element with a class of header__heading-logo, then add a inline style with a min height declaration.
style="min-height: 150px;"

Or you can add it inside the css file, whatever you prefer.
That should fix the CLS.

[MC17]

Thanks! That worked.