Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2655076
CLS problems
Closed

Comments

  • wowiwalkers started the conversation
    January 11, 2021 at 5:39am

    Hi Penci,


    I'm trying to fix my high CLS (0,427) on my site.

    I disabled both the sticky main bar and sticky sidebar, however I didn't really see any improvement (0,41) compared to how much I actually like the sticky ones.

    Eventually I enabled them again.

    I'm not unhappy with my overall site speed, however I would like to improve both my LCP and CLS.

    My question to you is: Are you going to improve the theme towards Google's Core Web Vital update in May? OR do you have any suggestions to what I can do myself?


    Thanks!

    Cecilie

  • wowiwalkers replied
    January 11, 2021 at 7:29am

    I use WP Rocket and they have a function: "Add missing image dimensions"

    When I use this function, my CLS is perfect! However, it does break the pictures in my sidebar... Which I haven't figured out what to do about yet.

    But maybe you could look into adding a feature such as this to a future update?

  •  2,699
    PenciDesign replied
    January 11, 2021 at 7:49am

    Hi,

    We will improve the CLS in the next update, at this moment, you can add more this code to Customize > Custom CSS to improve your CLS for sliders:

    /* = CLS for Slider
-----------------------------------------------------*/
.penci-owl-carousel:not(.owl-loaded){
    display: block;
} 
.penci-owl-carousel:not(.owl-loaded) > div, 
.penci-owl-carousel:not(.owl-loaded) > img, 
.penci-owl-carousel:not(.owl-loaded) > figure,
.penci-owl-carousel:not(.owl-loaded) .penci-featured-content-right{ 
    display: none;
} 
.penci-owl-carousel:not(.owl-loaded) > div:first-child, 
.penci-owl-carousel:not(.owl-loaded) > figure:first-child, 
.penci-owl-carousel:not(.owl-loaded) > img:first-child{ 
    display: block;
}
.featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
    width: 450px;
    width: 25vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
@media only screen and (max-width: 1200px){
    .featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
        width: 400px;
    }
}
@media only screen and (max-width: 960px){
    .featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
        width: 760px;
    }
}
@media only screen and (max-width: 767px){
    .featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
        width: 480px;
    }
}
@media only screen and (max-width: 479px){
    .featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item,
    .featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
        width: 360px;
    }
}
.penci-owl-carousel:not(.owl-loaded) .penci-featured-content{ 
    display: none;
}
.penci-owl-carousel:not(.owl-loaded):before,
.penci-owl-carousel:not(.owl-loaded):after{
    content: '';
    clear: both;
    display: table;
}
@media only screen and (min-width: 1170px){
    .penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div{
        width: 25%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(3),
    .penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(4){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div{
        width: 33.3333%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div:nth-child(3){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-item="2"] > div{
        width: 50%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-item="2"] > div:nth-child(2){
        display: block;
    }
}
@media only screen and (max-width: 1169px) and (min-width: 769px){
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div{
        width: 25%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(3),
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(4){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div{
        width: 33.3333%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div:nth-child(3){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="2"] > div{
        width: 50%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tablet="2"] > div:nth-child(2){
        display: block;
    }
}
@media only screen and (max-width: 768px) and (min-width: 481px){
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div{
        width: 25%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(3),
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(4){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div{
        width: 33.3333%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div:nth-child(2),
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div:nth-child(3){
        display: block;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="2"] > div{
        width: 50%;
        float: left;
    }
    .penci-owl-carousel:not(.owl-loaded)[data-tabsmall="2"] > div:nth-child(2){
        display: block;
    }
}

    Also, if you want to reduce the CLS more, please disable the sticky sidebar. The sticky sidebar can create more issues with your CLS because it sticks the sidebar contentsmile.png


    Best Regards,

    PenciDesign

  • wowiwalkers replied
    January 15, 2021 at 1:16pm

    Good to hear! I added the code in my CSS and it certainly helped on CLS for my sliders.

    Thank you :)