RoyalSlider results in bad CLS

schuster's Avatar

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

    Dmitry Semenov's Avatar

    Hello,

    Please link to the page with the issue.

  2. 2 Posted by schuster on 14 Mar, 2021 04:39 PM

    schuster's Avatar

    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:

  3. Support Staff 3 Posted by Dmitry Semenov on 14 Mar, 2021 05:26 PM

    Dmitry Semenov's Avatar

    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. 4 Posted by schuster on 14 Mar, 2021 05:41 PM

    schuster's Avatar

    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:

  5. Support Staff 5 Posted by Dmitry Semenov on 14 Mar, 2021 06:27 PM

    Dmitry Semenov's Avatar

    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. 6 Posted by schuster on 15 Mar, 2021 11:15 AM

    schuster's Avatar

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

  7. Support Staff 7 Posted by Dmitry Semenov on 15 Mar, 2021 12:35 PM

    Dmitry Semenov's Avatar

    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?

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

    Nikita Maslennikov's Avatar

    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!

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

    Dmitry Semenov's Avatar

    @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
            });  
        });
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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