19
Why does nobody mention how CSS gradients can tank performance on mobile?
I spent $12 on a performance audit tool last month to find out why my site was lagging, and turns out it was those fancy gradient backgrounds I was proud of. Turns out stacking too many radial gradients (I had like 6) is a death sentence for frame rates on older phones. Anyone else hit this wall with complex CSS visuals?
2 comments
Log in to join the discussion
Log In2 Comments
kai_stone9916d ago
...and that's just how things go these days, isn't it? We get so caught up in making stuff look flashy on our big monitors we forget half the people are viewing it on a phone that's a few years old. I noticed the same thing with my own site last year, thought I was being clever with all these layered effects, but it was just burning through people's battery life for no good reason. Kinda reminds me of how people pack their houses with heavy furniture that looks nice in photos but makes the place feel real cramped to actually live in... performance should always come before the fancy stuff.
6
willow_anderson8516d ago
Oh I gotta push back on this a little @kai_stone99. You say "performance should always come before the fancy stuff" but that feels like a blanket rule that ignores context. A couple of layered gradients on a modern midrange phone is totally fine, it's only when you go wild with 6 overlapping radial ones like OP did that it gets rough. And honestly sometimes the visual impact is worth a small hit if your audience is mostly on decent devices. I test my own site on a three year old iPhone SE and it handles like 3-4 gradients just fine, so let's not pretend every phone from 2021 is a laggy mess. The real trick is knowing your actual traffic and tailoring to that instead of assuming every user is rocking a 2018 budget Android.
1