Home → RoyalSlider HTML version issues →

RoyalSlider results in bad CLS

• Edit

schuster

14 Mar, 2021 09:08 AM

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

1. Support Staff 1 Posted by Dmitry Semenov on 14 Mar, 2021 03:45 PM

   

   Hello,

   Please link to the page with the issue.

   • Edit

2. 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:

   • Edit

3. 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.

   • Edit

4. 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:

   • Edit

5. 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.

   • Edit

6. 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]>:

   • Edit

7. 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 via display:none, thus not rendered. Try reducing option numImagesToPreload to 1 or 2, 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.

   .rsThumb {
       width: 198px;
       height: 132px;
   }
   

   Also, you seem to be missing some important styles like overflow:hidden on .rsThumbs and .rsOverflow, possibly you forgot to include royalslider.css?

   • Edit

8. 8 Posted by Nikita Maslenni... on 26 Jul, 2021 06:03 AM

   

   Hi Dmitry
   I am having the same problem with CLS. I would try solution with numImagesToPreload, but I cannot find the file where the command is located. Should it be in royalslider.css? Or maybe in the core style.css file?

   Thanks!

   • Edit

9. Support Staff 9 Posted by Dmitry Semenov on 26 Jul, 2021 08:31 AM

   

   @Nikita, numImagesToPreload is a JS option and is defined at the initialization

       jQuery(document).ready(function($) {
           $(".royalSlider").royalSlider({
               // options go here
               // for example
               numImagesToPreload: 2
           });  
       });
   

   • Edit