Revolution Slider reduce Cumulative Layout Shift (CLS)

Support
#1

Google gives me very bad Cumulative Layout Shift values (up to 1s) on sites where Revolution Slider is activated. But I found no way to reduce the CLS.
I tried other sliders, and there I had good values.

I already followed this guide, but it didnt changed nothing https://www.sliderrevolution.com/documentation/module-general-settings#viewport-settings

Maybe some one can help me? Thanks!

#2

Hey @xoa,

You’d basically want to designate spaces for layers inside your slider.

image

Regretfully, we could not fix this for you as this work would be quite involved. Just watch out for the things that are moving and adjust the layer settings accordingly so that the layer stays in place or has a space ready while its loading.

Thanks.

#3

I’ve done this, but it didn’t changed anything. Right before the spinner, the page jumps. And I think that’s what’s giving me bad ratings. I’m using a hero (full-width) slider.

#4

Hey @xoa,

In that case, it’s the whole slider that is not taking up space. For that, you must set a Minimum Height or you need to Keep the Breakpoint Heights. For more details, please see https://www.sliderrevolution.com/documentation/module-layout/

If that doesn’t help, please export your slider and make it available for us to download so we could test it on our sites and so we could report it to ThemePunch if we find there’s a bug.

Thanks.

#5

Hey @christian
Thanks for getting back to me. I tried to set all those parameters and setting, but still no luck.
As requested, here is the exported slider. http://danielsoelva.com/mobilitaet-desktop-1.zip

#7

I could find a partly solution now. Since I have the RevSlider Element in a column, I set the minimum height of that column to 100 vh.
The slider height and width adapt itself to the browser window. So maybe 100vh is the right way to go?

Now I were able to reduce the CLS. Can you confirm that this solution is “valid”, or maybe there is even a better way to fix this?

EDIT: 100vh was too much. I reduced it to 80vh. But I don’t know how compatible this setting is with different settings and browser.

#8

Hi @xoa,

The height: 100vh; means the height of this element is equal to 100% of the viewport height. As an example, if you set this to 80vh. So, if your screen height is 1000px, your element height will be equal to 800px i.e 80% of 1000px, and it will be adjusted based on the screen size irrespective of any browsers.

Hope it helps.
Thanks

#9

@tristup
Thanks, even this is just a partly solution. I hope you guys can find a solution for the actual problem.

EDIT: I tried another thing. I get way better results, when I use the Wordpress editor option to put the slider under the masthead. But then, I can’t change slider between different devices as it possible with the Cornerstone Editor.
Any solutions here? :frowning:

#10

Hello @xoa,

Did you mention that you added the slider inside a column? Please consider removing or setting the top and bottom margin of the section to 0. And by the way, kindly check out this video for a better responsive slider:

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.