Join the Webstudio community

Updated 8 months ago

Swiper performance problems

At a glance

The community member is trying to build a slider presentation site, but is experiencing issues with the mobile swipe interaction. When using image instances, the swipe interaction becomes jerky and often does not work, especially after returning to the tab. However, when using the same images as background images, the swipe interaction remains snappy and stable. The community member wants to avoid using background images as they want the images to be indexed.

In the comments, another community member suggests trying to set draggable=false on the images as an experiment. The community member responds that the draggable property is already set to off by default, and asks if this is the correct approach.

Another community member comments that the assumption is unlikely to be the cause of the issue. Later, the community member who posted the original issue states that the reason for the swipe issues was a Vimeo embed, and they believe this can be worked around as well.

There is no explicitly marked answer in the comments.

Useful resources
I'm trying to build a slider presentation site, based on your shared template. I turned off autoplay and changed the timing. Beside that, scripts + classes found in the template are unchanged.

Problem:
When I use image instances, the mobile swipe interaction becomes jerky. Often, it does not work at all – especially if you return to the tab after some idle time. If I instead use the same images as background images, the swipe interaction remains snappy and stable. As I want images indexed, I'd like to avoid bg-images.


Version with Image Instances (jerky)
https://apps.webstudio.is/builder/593e197c-b26d-404e-bf0a-d6d6a9b0ba80?authToken=660f3660-5cfd-455f-b030-5739d65b4ec7&mode=preview

https://swiper-solid-bg-bj8y0.wstd.io/

Version with Background images (fast)
https://apps.webstudio.is/builder/6119d4bf-cc80-473e-a55d-5fb08ee7b5ae?authToken=36cfb345-af7c-4197-8466-64b395196067&mode=preview

https://swiper-cleaner-fin-yzekk.wstd.io/
O
H
8 comments
I don't see a difference on android pixel 8
just for the sake of experiment, try setting draggable=false on the images
Thanks for having a look! Unfortunately, it performs the same for me in the forum published versions (same = working fine! )

Yet, I spent hours figuring out what could cause terrible stickiness (or slider being stuck).

 I wonder if this might have to do with CDN Cache refresh going on? In the real file I worked for hours, not changing anything structurally – and then that damn Slider stops working

My images are 2k-ish, not overly large. Yet, also inside the editor I saw initial image-rendering to require time. Images sometimes even get revealed in blocks, like in a Raytracer, clearly lower resolution versions used (pixelation); serving better versions over time. Often, when cycling through the tree in Navigator I see the wrong image per slide shown. Quickly switching to some other tree item will usually fetch the correct version. All in all, a very challenging learning situation

My machine has a lot more RAM than Chrome can handle per Tab.
just for the sake of experiment, try setting draggable=false on the images
When I create a draggable property, it is by default set to off. Is this fine – or am I in the wrong spot?
You assumption is unlikely
For anyone interested: The reason for swipe issues was a Vimeo embed.
I have a feeling this can be worked around as well
Add a reply
Sign up and join the conversation on Discord