How to optimize for low end mobile?

[pranay-dutta]

I have a old phone with 2GB ram and 16GB storage. Everything lags there.
But i have a phone with 6GB ram and 128GB storage there is no lag.

I am using these componennts

Text animations

• ScrollVelocity
• ShinyText

Background

• Squares

Animation

• GlareHover
• Splash Cursor

[DavidHDev]

The short answer - you can't - animations like these are not built for low end devices.
The way to optimize is to not use them at all if you know your target audience uses low end devices.

Out of the components you listed, the biggest problem for low-end devices are Squares and SplashCursor. There's no way something like the SplashCursor component would ever work on a 2GB device.

Generally, you want to avoid animations on mobile anyways. Even the React Bits landing page has everything turned off for mobile, WebGL components are simply not reliable enough to use on mobile.

[DavidHDev]

One potential solution for you would be to build a custom renderer based on the device information, but this has pretty limited support. See below
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory

[pranay-dutta]

Thanks, sir. I think this answers my question👍