Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 22, 2021 at 4:38 pm #1296110
    jifei

    Hello!

    I’ve been using the content slider element throughout several pages on my website (see below) and have turned on the autorotation between slides. However, when the contact slider first loads, there is an especially large empty space between that and the layout elements below, which will shrink and shift upwards to its normal position immediately after the first or second transition of the next slide in the content slider. This shifting happens pretty consistently among content sliders across different pages of the site. Since google search is supposed to be ranking for CLS beginning fairly soon, I was hoping there would be a way to prevent the layout shifts from the content slider element. I tried with some lazy load plugins, but from what I could tell it didn’t do anything or possibly made the issue worse. Please advise

    Thanks!

    Joe

    April 25, 2021 at 5:08 am #1296565
    Rikard

    Hi Joe,

    First off, could you try updating the theme to the latest version (4.8.2) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update.

    Best regards,
    Rikard

    April 26, 2021 at 8:16 pm #1296823
    jifei

    Hi Rikard,

    Thanks for getting back to me! I updated the theme to the latest version (4.8.2) but still having the issues with the shifts in the content slider.

    Is there something else that we can check?

    Best,

    Joe

    April 28, 2021 at 9:28 am #1297127
    Ismael

    Hi,

    Thank you for the update.

    Lazy loading actually increases layout shifts in the page, specially when the dimension (width and height) of the elements are not defined. To prevent layout shifts caused by the slider, you may need to define the height of its parent container, in this case the column element, to prevent the elements from shifting when the slider finally loads.

    You can add custom css to do that.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    April 28, 2021 at 5:10 pm #1297198
    jifei

    Hi Ismael,

    Thanks for the information. I added the “content-slider-column” class name to the Custom CSS class of the columns containing the content slider and put the following into my quick css:

    .content-slider-column {
    height: 400px !important;
    }

    It doesn’t seem to be fixing the CLS issue with the content slider element. Is there something I missed or a different approach that I can try out?

    Thanks!

    Joe

    April 28, 2021 at 6:56 pm #1297214
    joshpb

    having the same issues pls HELP

    • This reply was modified 3 years, 6 months ago by joshpb.
    April 30, 2021 at 5:18 am #1297457
    Ismael

    Hi,

    Thank you for the update.

    You may need to increase the height of the column to 450px because the initial height of the first slider inside the TECHNOLOGY section is 434px. You will also have to adjust this height on different screen sizes using css media queries.

    Please do not forget to toggle the Performance > File Compression settings qfter adding the css code and purge the cache before testing.

    Best regards,
    Ismael

    May 4, 2021 at 11:45 pm #1298383
    jifei

    Hi Ismael,

    Thanks for the information. I made the changes to the CSS, cleared the cache and toggled the file compression but the content slider is still giving me issues. Is there something else I can try?

    Best,

    Joe

    May 7, 2021 at 1:25 pm #1298950
    Ismael

    Hi,

    We tested the site using the lighthouse tool and the result showed that the CLS score is already 0 — there is minimal or no layout shift in the page anymore. But the site needs further optimization. You may need to purge the cache in your end or test the site using another machine. Please check the screenshot below.

    Screenshot: https://imgur.com/KPqBnMs

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.