Polypane can be a taxing application, since it will load an instance of Chromium for each pane you have open.
Though Polypane will run fine for the vast majority of users, There are settings and strategies to make everything run smoother.
First: check your site
Most performance issues in Polypane are caused by the site that's running in Polypane. Use the performance settings below, or any of the strategies on Website issues you could encounter.
In the top right of the UI you will find the App settings icon. By switching to the "performance" tab in it, you can turn off a number of features that have a big impact on CPU usage:
- Disable Animations
- Disable Filters (includes backdrop-filter)
- Disable Hover Sync
- Disable Transitions
- Hide Canvas Elements
- Hide Iframe Elements
- Hide Video Elements
Disabling these CSS features and hiding HTML elements makes it easier for the rendering engine to render your page, improving performance.
When you have performance settings active, the App settings icon will show a small gauge. You can choose to keep these features in the first pane by checking "Keep in first pane".
CSS file size issues
Polypane parses CSS to find the breakpoints, sync hover styles and more. This works fine up to about 10.000 selectors but beyond that performance might be impacted (depending on your device). That's why Polypane shows a warnings when it detects more than 10.000 selectors.
While plain Tailwind 1 and 2 work fine, once you add custom variants the Tailwind CSS file can quickly balloon to 10MB or more.
This negatively affects the browser devtools and likewise also negatively affects Polypane's performance. This slowdown can be completely eliminated by using Tailwinds new jit model, which we highly recommend.
Check the mode you're in.
In Legacy mode all panes run in the same process. This means that there is a single process that uses a lot of memory compared to many processes that use less memory.
On Mac, the default mode will be more performant, while on Windows (for now) legacy mode performs a little faster but this is dependent on a number of variables, so try them both to see what works best for you.
If you're running other resource intensive apps, like Docker, full web servers or multiple resource-heavy applications, Polypane can get less CPU time and so will feel slower. In general, running multiple heavy applications will compete for your CPU and memory so something's got to give. Consider closing the applications you don't currently need to free up both memory and CPU time.
In the case of Docker, your computer's scheduler has determined that Docker is more important so will throttle Polypane first. Unfortunately there is nothing we can do about this.
Limit the number of panes
Though we optimize the resourced used by panes that are not visible, we keep all of them in memory. This is fine with up to 10 panes, but if you go might higher, like having 15 panes or more, things can get slow depending on how much resources a site uses.
When you want to get an overview of your breakpoints and there's more than 15, consider using the "simplified breakpoints" overview instead. Polypane will give you a warning when you try to add more than 15 panes.
Alternatively, consider the "Focus" or "Full" mode when not actively working on responsive design. You'll still have access to all the Polypane features.
How inactive tabs work in Polypane
To preserve memory, Polypane only keeps the current tab active. This is why switching tabs reloads the page (this saves a ton of memory)
If you find yourself wanting to switch back and forth between two tabs a lot, consider loading one in the Browse tab in the panel.
Is your question not answered?
Ask via Twitter, Slack or our contact form