Hello,
Can someone please help?
The announcement bar is causing Cumulative Layout Shift (CLS) Issues. With every page change the announcement bar messages all shows up at once for a few seconds causing a shift. This is occurring in both the website and mobile.
Thanks in advance
From what I see the CLS is all in green and I’d rather concentrate on LCP in your place.
So far, I believe the biggest offender here is line-height change – see how your text a the top of the page grows in height:
See how it’s changing back and forth and finally re-defined at the bottom of your HTML. But your announcement bar is already visible when this element is processed and this causes announcement bar to grow.
Finally, this slider can be easily implemented with some simple CSS animation rather then loading JS and CSS from the 3rd party CDN. While this does not seem to affect the CLS, it will definitely impact other metrics.
Did you fix this issue already? I don’t see this in my end
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you very much for your response! How do I go about fixing the recommendations you suggested?
Thank you for your response! The issue has not yet been resolved, as I am still seeing the shift. Any help would greatly be appreciated.
Hi! I fixed this by editing the file snippets/cart-drawer.liquid line 15 adding the position:fixed property because the absence of it pushes the ads bar down and then up as the sections are progressively loaded.
Find this line in cart-drawer.liquid
.drawer { visibility: hidden; }
and replace it with
.drawer { visibility: hidden; position:fixed}
