Bad CLS grade

[Fision]

When I use swiper I get bad CLS (cumulutive layout shifting) in Google.
Trouble is that slider just preload first image and little bit later slides get sliding in.

Do you know a way to avoid/ improve this.

Best regards,
Simon

[crftwrk]

Converted this into a discussion because it's not a bug in the plugin. I think the CLS happens by the WP built-in lazy-load function which loads only visible images. Add a filter to your functions.php and this should be solved:

/**
 * Disable lazy-load
 */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Some optimising/caching plugins do lazy-load images as well, check them too if CLS still exists.

Solved?

[Fision]

No, this doesn't help. I also tried to disable cache but it's the same.

[crftwrk]

Do you have a link to your site to check?

[Fision]

https://www.felix.si

[Fision]

And from yesterday cache is disabled, because of other problem with mini-cart. It caches mini-cart.
BUt this is probably problem with my code, because on other sites I used cache, mini-cart works fine.

[crftwrk]

You are using very very outdated versions of the Swiper plugin and the theme. Luckily, latest bs Swiper should be compatible with your theme version. Do this:

• Backup your site
• Important! Uninstall your Swiper plugin first.
• Download and install latest plugin version https://bootscore.me/#download
• Enable cache

This should solve the CLS.

[Fision]

Thank you for you info but this doesn't solve CLS. I use it also on my new site which has latest version of theme and swier plugin and it's same.
Problem is that slider get slide in on page load which causes google CLS to be around 0.18 which is bad.
Only option to solve it would be that slider shows insantly and not with slide in.

[crftwrk]

I use it also on my new site which has latest version of theme and swier plugin and it's same.

Great, have a link to check?

Problem is that slider get slide in on page load which causes google CLS to be around 0.18 which is bad.

Yes, this is bad, but I can't reproduce this issue on my sites. If you have disabled caching, the CLS happens on each page load because Swiper's CSS and JS are loaded each time again. Make sure that you have caching enabled.

However, you can use the bs Preloader plugin https://bootscore.me/documentation/bs-preloader/. This does not solve the CLS itself, but shows the page when all scripts and styles are fully loaded and CLS is gone.

[Axos11]

I will join that discussion here.

@Fision I solved the issue with some "hacks". But am quite happy with the result. I am not sure if links are allowed here? If not @crftwrk just remove it ;)
Example: https://www.birkengold.com/shop

Btw, I had the issue with all slider libraries i implemented so far (Swiper.js / Splide.js / Owl Carousel) and as soon as you don't want the js being render blocking and you want the slider above the fold you run into these issues.

You have to provide your own swiper.js init script and some css hacks to get the cards sizes correctly directly after load before init.
Also I used my own swiper-templates but I am not sure if that was neccessary. So I don't know how far you want to go to accomplish the 0 cls ;)
But if you have decent knowledge about css and debugging its definitely doable.

As a starting point my js to init the swiper:

const bsSwiper = document.querySelectorAll('.cards');

for (i = 0; i < bsSwiper.length; i++) {

    bsSwiper[i].classList.add('cards-' + i);

    var slider = new Swiper('.cards-' + i, {

        // Options
        slidesPerView: "auto",
        loop: false,
        grabCursor: true,
        slidesOffsetBefore: 20,
        scrollbar: {
            el: ".swiper-scrollbar",
            hide:0,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}

[crftwrk]

@Axos11

I am not sure if links are allowed here? If not @crftwrk just remove it ;)

Sure, a comment without having a link to an example is useless ;-)

https://www.birkengold.com/shop is a nice shop, especially the feature to show an alert if quantity has been changed in the mini-cart. Do we want to include this in the theme general?

You have to provide your own swiper.js init script and some css hacks to get the cards sizes correctly directly after load before init.

We can fix this in the plugin as well. You will find the SCSS/JS source in folder assets/src/. The enqueued styles/scripts are just minified files. If someone can do a PR would be great!

[Axos11]

@crftwrk , thanks for the compliment!

I have a growing pr on my side for changes on the ajax add to cart. I think I mentioned that somewhere in the discussions already :D I will make a PR on that and I would also make improvements on adaptibility of the attributes of the products available at that point. Right now, I am finishing touches on a ajax login implementation. The first draft PR should be ready this week.

The reason why I am not so sure about implementing that in the plugin is that it is a quite specific behaviour that is dependend on the width and cards available and so on. Basically you have to write css as well to make sure that the height and widht of the elements without any js loaded is exactly the same as after initialization. Also thats only neccessary if you want to include the slider above the fold and otherwise not.
If someone finds a solution on how to make my approach generic or for a fixed aspect ratio (e.g. 1x1) (what I assume could work) I would appreceate it. I can give feedback on the implementation or a PR if needed.

[crftwrk]

Looking forward to it! 👍