Performance issues with lots of ViewportFrames (mostly occurring on low-end devices)

Hello, I have a question about performance connected to ViewportFrames. I have made a game which involves a lot of VPFs and I’ve noticed that players on low-end devices have performance issues and I have thought that having hundreds of VPFs may be the reason. Is that true? Down below is a gameplay screen recording that shows you what I’m dealing with.

Let me explain what you can see on the video and give you some background information about VPFs in my game. As you can see there are a lot of VPFs on UI. Every time player gets a new item (whether a pet, tycoon item, weapon or body effect) ScrollingFrame that contains the new item’s ViewportFrame completely refreshes (deletes every VPF in it then remakes them all and sorts them correctly in specific order) - this means all these VPFs re-render, which imo could be a performance killer. They are also constantly loaded in the background as a memory and are hidden until player opens the specific frame. Also I have to mention that all these models inside of VPFs are always static (there is no rotating, scaling, etc.)

Possible solutions that I think of are:

  • replace all ViewportFrames with ImageLabel and make each in-game item (pets, weapons, etc.) a Roblox model and access their thumbnail image via assetID + thumbnail URL. Reference from WebGL3D
  • Alternative ways to refreshing ScrollingFrames that contain VPFs - maybe not deleting all of the VPFs and remaking them, but only make a new one and then re-sorting them.

Any comment to this or any given solution will be appreciated a lot!


Link to the game: