Solved

CLS from Dawn Theme from liquid containers

MC17
Visitor
3 0 0

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.

 

Screen Shot 2022-04-29 at 2.54.23 PM.png

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!

Accepted Solution (1)
oreoorbitz
Shopify Partner
253 29 130

This is an 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.






Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

View solution in original post

Replies 4 (4)

oreoorbitz
Shopify Partner
253 29 130

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
MC17
Visitor
3 0 0

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

oreoorbitz
Shopify Partner
253 29 130

This is an 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.






Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
MC17
Visitor
3 0 0

Thanks! That worked.