CLS (cumulative layout shift)

Hi @clansh

I checked your page and I didn’t see any jump:
https://www.dropbox.com/s/ga3aakww8pilva9/no-jump.mp4?dl=0

Running a PageSpeed Insights report I noticed a bunch of images which couldn’t be loaded:

View post on imgur.com

and I’m wondering if this has something to do with the report. Can you take a look at these images and make sure they can be loaded?

HI Ramona,

Thanks for the quick response.

I had considered what you mentioned and took a try.
However. I created two posts one with Smart Slider and the other without.
The scores of CLS are 0.58(red) and 0.008(green)

The post is only made up of words and sliders
https://yiwu.com.tw/test-slider-with-smart-sliders
the CLS score of page insight is 0.58

The post is only made up of words and images
https://yiwu.com.tw/test-slider-without-smart-sliders
the CLS score of page insight is 0.008

I really like your plugin, however this issue discourages me putting smart sliders into my website. I hope this could be addressed.

Thanks

Hi @clansh

Can you try putting the images from the slider (all 5 of them) to the /test-slider-without-smart-sliders page? Currently this page has one single image (even if it’s there 3 times) while on the slider’s page there’s 5 image (so 4 more), so the rescources the two pages load differ. And that makes the two pages not equal for such comparison.

HI @ramona

Thanks for your support so far.

As your recommendation, I put same 5 images as slider’s into the /test-slider-without-smart-sliders page
and the score of CLS is the same(green).

To reply
“I checked your page and I didn’t see any jump”
I know it, however the program of page insight shows not good. And Google claims the CLS and left scores of page insight will be taken into account in the future.

Hi Clansh,

Thanks! It really looks odd, because I still can’t see the shift, but the CLS value still a lot bigger on the slider’s page.

According to this article: https://web.dev/cls/

Note that layout shifts only occur when existing elements change their start position. If a new element is added to the DOM or an existing element changes size, it doesn’t count as a layout shift—as long as the change doesn’t cause other visible elements to change their start position.

I’m still not really sure why Lighthouse would calculate a CLS score, because:
– the slider’s start position does not change
– the slider’s size doesn’t change
– other visible elements doesn’t change their start position because of the slider. (as its own size doesn’t change)

We’ll need to take a look into this problem more deeply and see why PageSpeed Insights handles things the way it does. Unfortunately, that can take some time, but we’ll monitor this closely.

Hi Ramona,

I’m glad to hear your positive conclusion. I think I will put Smart Slider 3 into my website and wish this score would be corrected by either Lighthouse or Smart Slider 3 in the future.

Thanks a lot

Hi Ramona
first of all, thank you so much for your great plugin.
I have the same problem, and after i checked many time.
i realized where the problem is.
when we visit the page using smartslider3, it will take 2-3 Seconds to show page slider and slider Height will adapt after slider complitly loaded.
this feature will effect and move another element we using on page and this feature can provide CLS PROBLEM, because in few Seconds google bot co,ing and cheack our site , google bot see no stability on page

I think if the height of the slider is clear from the beginning, this problem will be fixed

Hi @bhmrgy!

We use a placeholder based on the Slider size, minimum height, limit slide width options:
https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
to have a stating size for the slider, but there are parts, where we need to use JavaScript to readjust the height, for example the minimum height of the slider is based on the layers, so they have to load as well. The “force fullwidth” option ( https://smartslider.helpscoutdocs.com/article/1776-fullwidth-layout ) has to check the theme’s css codes to adjust the slider to go over theme limitations. So there are parts, which need JavaScript and they cannot be worked around, but if you would for example only use Boxed layout:
https://smartslider.helpscoutdocs.com/article/1775-boxed-layout
with only background images or few layers, which wouldn’t increase the slides’ heights, then the placeholder’s size should be correct.

@nextendweb_gabor

It made sense, You are absolutely right.
I shoud just use background image for first slide to fix CSL.

Thanks alot for helping me 8>

my site is about multimeter 2020,
I am also facing the same issue of CLS= 0.73 however, once I changed CLS setting from inspect of my website but now I am confused about where I should go and how to resolve this issue ??
anyone know then please tell me

Hi @falkons!

Are you using only Boxed layout sliders on your website?:
https://smartslider.helpscoutdocs.com/article/1775-boxed-layout

Please send me a link to your website either here, or through our support form:
https://smartslider3.com/contact-us/support/?topic=Other&platform=WordPress&version=Free&website=website-yes

ok do I get it right Layout -> boxed and selecting the first images in Slider Design -> Slider Background Image will solve the problem? What do you mean by “with only background images” @nextendweb_gabor

• This reply was modified 4 years, 5 months ago by zrce.

Hi @zrce!

You will need Layout -> Boxed, but you don’t need to set Slider Background Image for CLS issues. The background image of slides ( https://smartslider.helpscoutdocs.com/article/1724-slide ) can be used too.

Slider background image means an image, which won’t move, while the layers of your slides appear in front of it, like here:
https://smartslider3.com/static-testimonial/
if you click on the images, the slides are moving, but the slider’s background stays. (We don’t have an example with an slider background image, only with a slider background video, but the behavior is the same.)

Slide background image is the image, which moves as the slide moves, like here:
https://smartslider3.com/full-width-post-slider/

At both cases we are adjusting the image to the slide (or slider), so it doesn’t really matters which background are you using, only the slider’s size matters.

By only background images what I meant was, that within Smart Slider there are rules, like your slide’s height is minimum as big as the layers are and your entire slider is as big as the highest slide is. So for example if you take a look here:
https://smartslider3.com/marketplace-block/
in mobile view, the image, texts and button needs more space than what it would get from the slider itself, so they are growing the slider’s height. If you wouldn’t have layers on that template slider, the height of the slider would be smaller.

I also made a documentation about CLS what you can see here:
https://smartslider.helpscoutdocs.com/article/2009-cumulative-layout-shift-cls
This contains everything you need to know, about what of our settings could affect CLS and how can you debug your website to figure out where issues are coming from.