Loading element conditionally based on url string causes layout shift / delay in appearance

How To
, ,
1

i’m loading templates (sliders) conditionally based on url string for some product archive categories or search archives. there is a noticeable shift on page load as most elements have begun to load by the time the slider also loads after a delay.

i feel like this is not the best way to achieve this. any tips would be appreciated.

2

bump‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

3

bump‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

4

are you using bricks conditions or are you doing it in javascript?
I guess you are useing the nestable slider right? I have seen complains about it causing layout shifts before… are there only layout shifts when any condition is met or always?

5

hi @SuatB, i’m using bricks’ conditions.

6

since bricks conditions happen on a php level (servside) this shouldn’t effect the frontend performance (like layout shifts) at all. Probably it’s because the nestable slider script doesn’t get called fast enough. As i said i heard this complaint before… The nestable slider uses a js-library called splidejs, while other sliders user swiperjs. Somehow these performance issues mostly happen with splide even though it is a smaller js package…

7

i can confirm, this issue does not happen on pages where the slider is not conditionally loaded. i will enqueue scripts and styles with priority and see if that resolves anything. in either case, hopefully this is not ignored.