Cumulative Layout Shift (CLS)
There are a lot of questions about Cumulative Layout Shift (CLS) nowadays, so here is a documentation about what Smart Slider settings you should avoid, if you don't want any CLS issues coming from us and you will also find some tips to find issues, even if it's not coming from Smart Slider.
Why can be CLS issues within Smart Slider?
CLS means that your page's layout shifts during or after page load. To avoid this, you have to know the exact size of the elements used on your website, to define them even before the page loaded. Some of our options are based on the loaded screen's size and the elements you have on them, so we don't know, as cannot know the size of everything and this could cause issues. Here you can find a list of options you should avoid if you don't want CLS issues:
What should I avoid in Smart Slider?
On the Size tab you can find the Layout of the slider. This defines how big the slider should be, based on the placement you are putting it. Here you could only use Boxed layout, because this layout adjusts your slider to the container element.
Too many or too high layers
Your slide's height is minimum as big as the height of your layers, margins and paddings are and your entire slider is as big as the highest slide is. If you put down for example an image layer, that needs time to load and its height can only be known after this is done. This increases the height of the slider. So you should only have that many and that big layers on the slides, which have space without having to increase the height of the slide.
Controls under/over the slider
Don't use controls, which are on top or bottom of the slider. Their responsiveness is often based on the screen size, also there is a Hide on setting, which won't even load them if you turn them off for specific devices.
If you are not sure what causes your CLS problem, you can use Chrome to figure it out. There are two tools that can help:
Turn on highlighting for shifted parts
Press F12, which will open up Chrome's developer tools. Here at the settings you can go to More tools -> Rendering, where you can turn on Layout Shift Regions. If you refresh your page (probably use Ctrl + F5 [hard refresh] to make the loading of the page a little slower), you will see those parts highlighted, which are shifting during page load. This can point out the problematic parts too.
Problems with some CLS tests
There are CLS tests, which are trying to point out parts of your website, where the layout shift happened. These are often failing and there is a possibility that they are pointing to slider parts, while the real problem happened elsewhere. You should follow the previous troubleshootings to figure out where the issue comes from.
The result of your test can be very different based on how fast computer are you using. For example Google Page Insights runs its test very slowly. But if you are using Chrome with F12 -> Lighthouse to test your website, your result will be probably better. You could try to use both tests, but usually we rather trust browsers, as that is where you are seeing the real life result.