I have been extensively using penpot for the last few days and I am enjoying it especially the new flex layout. Currently, I am building a series of designs - with some components. It has less than 30 components (mostly groups / using the flex layout). There are 2 pages (one with the design system components) and the other with the designs. This design page around 12 boards with each board having ~70-100 layers (a rough estimate). This means the whole page has around 800-1200 layers. I am noticing significant performance drop and also crashes frequently. Tried with both Edge and Chrome (on the latest version) on Windows 10. It is extremely slow and laggy with the app being unusable at times. Many a times a simple undo of text layer don’t work and also aligning between objects takes about half a minute or more.
While I understand that it is a web app at the end of the day running on a browser and they have limitations for varied technical and security reasons, what are things that can help me mitigate this. I can split the design page into multiple pages and keep 2 or 3 boards in a page. Will that help in improving the performance?
Apart from this, I would like to understand the factors which impacts the performance. Plus some tips and tricks you will suggest to improve the performance especially while working on large projects
I’m not even working on a large project and I’m finding my performance dropping to unusable levels as well. I’m using several levels of boards within boards in exploring the new flex layout feature which may be a contributing factor.
Not sure if it would help but you can increase the available browser memory for either Chrome or Firefox pretty easily, by default Chrome browser memory is only 1.4GB I believe.
@crenfrow My file is also having nested flex boards and maybe they are slowing down. If i look at the total nested boards, they may be 80 or so (Mostly the same components reused across the 12 boards)
@michaelsynan The downloaded file size is less than 15MB. So, I am not sure if this will help but still I’ll give it a try. Thanks for your suggestion
Thank you for the suggestion! However it doesn’t seem to be related to memory consumption. When I queue up a few actions I can see one CPU core max out and then nothing happens. Firefox’s about:performance shows massive spikes in dispatches when this happens.
My preferred browser is Firefox, however @crenfrow after months of fight with poor performance I had to switch to chrome … until firefox is fixed (by Penpot or mozilla).
Once I did this usability shoot up by 75% (I didn’t measure this, just a estimation). It’s not like using a native app and I can’t remember how figma was in the setup, but it’s so much better now.
Perhaps this will help you. Also Since I only use chrome for penpot, I only have that tab open nothing else. In firefox I had a lot of tabs open for other task which I think contributed to the slow downs as well. Good luck.
Yeah it’s very similar, I’m no expert with it. But if I was in your place I would use it as a way to isolate the issues. Especially since you mentioned that switching browser made no to little difference.
Hi,
Yes I’m also proceeding this way now.
I’m encountering too many bugs and crashes using firefox : for example most of the time the objects don’t snap properly or it takes a few seconds to detect edges. Also I can’t click on an object to select it, I have to click below it (or select it in the left menu and right-click - edit).
Firefox is my to-go browser but I started to use chromium for penpot since I couldn’t find a way out.
I’m working in a Linux environment so that wouldn’t be for this reason. I’m thinking of updating my laptop (for several reasons), that might help to fix this issue.
I’m really wanting to move over from AdobeXD to PenPot instead of using Figma. I had been using Adobe XD for the past few years. With the purchase of AdobeXD to Figma failing, I was hoping Adobe would bring Adobe XD out of maintenance. A few days ago, I received a response directly from Adobe’s XD team stating that they were going to end Adobe XD. I started looking for alternatives. I really like PenPot but the performance issues are horrendous. I’m using Brave Browser. I have tried FireFox, and Safari. All the same. The performance is fine for small projects. But, once I get to having six or more boards. Each board having 6 => layers, the performance is hair pulling frustrating. As many of the other commenters have stated. It seems to be a CPU issue. I’m on a MacBookPro, Intel i7, 16GB memory. I have no other applications open, other than Brave. I have closed all but two tabs. on the next release there are performance improvements.
That said, as an open source developer myself, great job PenPot team. PenPot is incredible!
Is this entirely a client-side problem? Is there anything I could do on the server side to speed things up a bit? If it’s client-side, then do I need to get more beefy client-side computers? Or maybe have guys log into a VM so that I can actually provide them something more standard than their own laptop?
I see problems with performance where there are many elements on one page, or effects applied to objects. Get’s even worse when selecting many of them at once, or parent/wrapper holding them.
It will slow down app unless you will jump to other page and go back.
The slowdown also occurs when effects such as shadow is added. On itself it doesn’t eat up too much performance, but when shadow smoothness/blur is applied it drops a lot and if many objects have effects active it can make working on project almost impossible.
What I believe it’s happening:
As for multiple elements slowdown upon active selection I think is that upon selecting those elements the app tracks those elements properties (each one of them) in real time and it doesn’t stop when deselecting them. ( every drag, stretch, squish in 100+ elements at once can be taxing on processor)
For effects I don’t really know what might cause it. I think it might be because app might rerender effects constantly, or it renders effects in absurd precision.
As for possible fixes:
If there are huge amount of elements on page, they generally should not be monitored by app until selection happens. And while selected it should not track all element’s positions, but only the parent, and if parent is not present make it calculate middle point for selection and track only that.
When moving it would not track position (it would show some sort of visualization of object(something like pixelated preview similar to what happens when image is transformed in raster app, basically a fake), but not actual instance) and upon finishing mowing object (lifting click) it then would note new position, change visualisation into actual object back and apply this object’s new position.
Or something like that…It’s just a suggestion. I don’t know how really penpot handles it.
I hope it makes sense…
I also would check if app utilizes GPU. I use laptop and it has integrated graphics, so I don’t know if this is accurate but in task manager only CPU is used and GPU is chilling. (I checked in firefox to use hardware acceleration whenever possible)
PS. I think child element/-s of parent do not have position in relation to it’s parent, they all might be global, based on whole canvas. (grey area)
on the next release there are performance improvements.