Fix Cumulative Layout Shift of featured post carousel

  • dynam

    (@dynam)


    3 years, 2 months ago

    Hey Alexander,
    first – thanks for your great theme!

    I use the Enspire theme with the featured post carousel enabled. As you can also see in your demo with pagespeed insights, the content shifts a bit after the carousel is loaded.

    Would it be possible to have a placeholder there until the carousel gets loaded with JS? This would fix the Cumulative Layout Shift completely. Thanks!

    For further help please see this GIF where you can see the layout shift (the news boxes go down after the carousel is here).

    • This topic was modified 3 years, 2 months ago by dynam.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Alexander Agnarson

    (@alxmedia)

    3 years, 2 months ago

    Hi there!

    Thanks for the helpful gif and description. I’m honest here – I need to read up on Cumulative Layout Shift. Same with placeholders, I’ve never used that before in my themes.

    It’s definitely something I will look into – but can’t give any promises, as I don’t know enough yet, when this will be done.

    Edit: What happens if you add something like this additional css:

    
body.home .owl-carousel { display: block!important; opacity: 1!important; min-height: 400px; }

    Or just:

    
body.home .owl-carousel { min-height: 400px; }
    Thread Starter dynam

    (@dynam)

    3 years, 2 months ago

    Hi Alexander,

    thanks for your response!

    No problem, the point with Cumulative Layout Shift is that the content doesn’t shift too much when the web page loads. This can be avoided with placeholders for ad-banners or – in this case – the carousel. Here you can find more information about CLS.

    Thanks for the code, but unfortunately this doesn’t work. I’ve already implemented the second code you posted before, but that doesn’t “reserve” the space at the init page load for the carousel which loads afterwards.
    The first snippet makes the carousel twice as big as before, so this doesn’t work too.

    I hope that I could point you in the right direction. The important thing is that it has to be a “fix” which works without JavaScript, as this gets loaded some seconds later.

    You can “watch” the CLS using Chrome -> F12 -> Lighthouse -> Desktop -> Generate Report -> after that is done, scroll down and click “View Original Trace”.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fix Cumulative Layout Shift of featured post carousel’ is closed to new replies.