RoyalSlider results in bad CLS
The slide animations lead to Cumulative Layout Shifts (CLS). This results in bad Web Vitals scoring.
I think one reason is that the left property gets changed. Using transform:translateX() could fix this problem.
Any chance to get an updated version which fixes CLS problems?
Thank you.
Alex
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
Support Staff 1 Posted by Dmitry Semenov on 14 Mar, 2021 03:45 PM
Hello,
Please link to the page with the issue.
2 Posted by schuster on 14 Mar, 2021 04:39 PM
Here is an example:
https://www.riedel-immobilien.de/objekte/raritaet-stilvolle-30er-jahre-villa-mit-traumgarten-direkt-am-isarhochufer_6168.php
I recognized that in common changing left/right leads to CLS issues but
transform:translateX() doesn't.
Thank you.
Alex
Dmitry Semenov <[email blocked]> schrieb am So., 14. März
2021, 16:45:
Support Staff 3 Posted by Dmitry Semenov on 14 Mar, 2021 05:26 PM
The plugin doesn't animate left or top, it animates only transform. Your issue is likely caused by autoplay and the fact that you initialize slider late. You also have some code that updates size of the slider in a timeout (in dom.ready and window.load), which should not be needed if your layout is stable.
4 Posted by schuster on 14 Mar, 2021 05:41 PM
Thank you. But rsSlide have changing left properties, nor? And these don't
get changed by my code I think.
It's because of autoplay feature which is part of Royal Slider.
Or am I wrong?
Dmitry Semenov <[email blocked]> schrieb am So., 14. März
2021, 18:26:
Support Staff 5 Posted by Dmitry Semenov on 14 Mar, 2021 06:27 PM
It does change left, but only before animation, transform is actually animated.
I mentioned autoplay, as Lighthouse measures visual layout change. So autoplay animation itself might be counted as layout shift.
6 Posted by schuster on 15 Mar, 2021 11:15 AM
Hi,
I did further research. Autoplay option is not the problem. In fact
transitionType:move is the problem. After switching to transitionType:fade
the CLS problems have gone away.
As you wrote transitionType:move sets left property before animation starts
(or it gets set during animation, don't know). This seems to cause the CLS
problems. Perhaps you can use transform:translateX() instead of left at
this point?
Thank you.
Alex
Am So., 14. März 2021 um 19:27 Uhr schrieb Dmitry Semenov <
[email blocked]>:
Support Staff 7 Posted by Dmitry Semenov on 15 Mar, 2021 12:35 PM
I'm not sure what animation has to do with this then, if you're getting CLS issue before any animation occurs.
transitionType:fade
likely works better for you, as inactive slides are always hidden viadisplay:none
, thus not rendered. Try reducing optionnumImagesToPreload
to1
or2
, it'll decrease the number of slides rendered.Also, I've noticed that you have
auto
height on thumbnails, the plugin doesn't support this - thumbnails must have the same size and it should be defined via CSS (so it can be known at initialization). Incidentally, this limitation is made to eliminate similar to CLS issue.Also, you seem to be missing some important styles like overflow:hidden on
.rsThumbs
and.rsOverflow
, possibly you forgot to includeroyalslider.css
?