Cumulative layout shift (CLS)

[manoj382]

Google PageSpeed Insights and Lighthouse both hung up on my Glide carousel causing a layout shift. If anybody else runs into this issue, I was able to solve it by setting the glide element to visibility: hidden until it was built.

CSS

.glide { visibility: hidden; }
.glide.visible { visibility: visible; }

JS

glide.on(['build.before'], function() {
  document.querySelector('.glide').classList.add('visible')
});

[p4u1d34n]

Tried this and it didn't help :(
Does anyone else have any insight on this issue?

[lovgrandma]

Nice solution. Page is blank for a while though. Which usually would result in more bounces off website. Wish there was a solution for the layout shift

[lovgrandma]

I spoke way too soon.

.Item { margin-left: 5px; margin-right: 5px; .Item:first-child { margin-left: 0px; } .Item:last-child { margin-right: 0px; }

   Really bad shift fixed with this.