Wanted to share some process of elimination testing I did this morning that is providing a clearer picture of the pain point. I removed all images (except for one small SVG) as well as all custom per page and custom sitewide JS code; I was especially suspicious that SwiperJS or one of the other scripts I was running was causing the issue so figured this would be a good thing to try.
Having removed all of these elements, I am still getting near to the same mobile lag as I was experiencing before. I ran some speed tests as well to make sure my images and scripts were not still somehow loading, and verified they were not. As you can see in the attached screenshot, it looks like the longest remaining URLs to load are: the webflow.schunk… links, the CSS, and the cloudfront link.
Assuming I will need to live with the lag from the CSS and Cloudfront (appears to be anti-malware?), I looked into what the webflow.schunk links are. It appears these are associated with interactivity/animations and such, which makes sense since I did add a good bit of interactivity to this page.
I found the below response from Webflow Staff in another post regarding interactivity lag on mobile only. I guess optimizing the interactivity, adding a loading screen, or living with the lag are my options.
Hi there,
Here’s how to optimize your site’s mobile performance regarding animations and interactions:
Loading animations should be strategically implemented for the best mobile experience. Focus your load triggers only on elements that are immediately visible when the page loads. This helps reduce initial load time and improves performance.
For smoother animations, be selective with your transition and transform properties. Instead of applying all properties, choose only the specific ones needed for your desired effect. For example, if you’re only moving an element, just use the transform: translate property rather than including unnecessary properties like scale or rotate.
If certain animations are still causing performance issues on mobile, you can disable them specifically for mobile devices through the interaction settings panel. This gives you granular control over the mobile experience without affecting desktop users.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
But hopefully some tweaks with that large image, deferring and lazy/eager load will help
