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.
Then I ran it through web.dev's performance tool 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, it was that I'd built it without thinking about how mobile users 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 ask whether the interaction actually serves your conversion goal.
Sometimes a simple image carousel or static comparison works better on mobile than a slider that demands precise pointer movement. Our web design work always starts with performance constraints, not a visual wishlist, because the most impressive feature on desktop is worthless if it drives mobile visitors away.
If you're adding a before/after slider, test it on a throttled 4G connection on a real phone. If it feels sluggish or takes more than two seconds to load the images, optimize it or replace it with a simpler comparison. Impressive on desktop isn't the goal; fast on mobile is.
