Before/After Sliders Look Impressive.They Kill Mobile Performance.
I added a before/after slider to a client's home renovation site last month. It looked sharp on desktop, smooth interactions, great visual impact.
dev) and watched the Largest Contentful Paint tank on mobile. The slider was loading two full-resolution images and running constant JavaScript listeners on scroll.
The issue wasn't the slider concept itself. It was that I'd built it without thinking about how mobile users would actually load and interact with it.
Two 2MB images loading at once, unoptimized. No lazy loading.
No consideration for slower connections on phones.
What I learned: before/after sliders need aggressive image optimization and conditional rendering. Serve smaller images to mobile, lazy load the second image until the user interacts, and consider whether the interaction actually serves your conversion goal.
Sometimes a simple image carousel or static comparison works better on mobile than a slider that requires precise pointer movement. Our web design approach always starts with performance constraints, not visual wishlist.
Worth trying: if you're adding a before/after slider, test it on a throttled 4G connection on an actual phone. If it feels sluggish or takes more than 2 seconds to load the images, optimize or replace it with a simpler alternative.
