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?

JavaScript based layouts

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.

With Fullwidth layout, because of the Force Full Width option the slider's size is calculated using JavaScript to go over theme limitations. This can modify the height of the slider too and this is why you cannot use it.

Fullpage layout was made to base the slider's height on the browser's height, using JavaScript, so this cannot be used either.

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.

Troubleshooting

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 off JavaScript

Most CLS problems are happening due to the JavaScript size changement of the page. You could install for example Quick JavaScript Switcher to turn off the running of JavaScript on your website and compare it with that version, where JavaScript is running. Just by looking at the website you might notice which parts seems to be off, but you can inspect the HTML elements to figure out what parts were created by which codes. This way you could eliminate the parts, which seems to be problematic.

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

Part identification

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.

Test location

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.