Polypane can be a taxing application, since it will load an instance of Chromium for each pane you have open with similar memory and CPU usage as an active tab in other browsers (We need to keep all panes active to accurately sync between them).
The main Polypane runtime (excluding the instances running your website) take about 1% of CPU while idle, so the majority of CPU and memory usage is the result of a website's requirements times the number of panes you have open.
Though Polypane will run fine for the vast majority of users, there are settings and strategies to make everything run smoother, as well as settings to check:
First: check if the issue is limited to the current site
Most performance issues in Polypane are caused by the site that's running in Polypane doing things in ways Polypane doesn't expect. To figure out if that's the case, try to run Polypane with this web page, and see if the performance issues persist.
If they get resolved, please tell us the URL so we can figure out what that bottleneck is and either help you improve your website or help us improve our application. We really appreciate this. You can also take a look at Website issues you could encounter or use the performance tweaking options below.
Sometimes there is no way around a website being resource intensive, for example when showing videos or running different compositing effects. To deal with this Polypane will let you turn off resource intensive features.
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. The rendering and parsing engine can handle everything to about 10.000 selectors without issue but beyond that performance might be impacted (in both Polypane and Chromium devtools, of course depending on your device).
Polypane shows a warnings when it detects more than 10.000 selectors. When it detects more than 15.000 selectors, hover sync, breakpoint detection and overflow detection are disabled to prevent further performance issues.
Limit the number of panes
Though we optimize the resources used by panes that are not visible, we need to keep all of them in memory. This is fine with up to about 8 panes depending on your device, but if you go might higher, like having 15 panes or more, things can rapidly slow down depending on how much resources a site needs.
When you want to get an overview of your breakpoints and there's more than 15, we show a warning that lets you choose to show "simplified breakpoints" instead. This feature looks at all your breakpoints, then groups them into 6 panes that cover the range of your breakpoints, giving you a good overview.
Alternatively, consider the "Focus" or "Full" layouts when not actively working on responsive design. They show just a single panel, but you still have access to all the Polypane features.
Make sure hardware acceleration is on
For macOS, Polypane has a "Disable Hardware Acceleration" option in the View menu. This can help fix graphical issues, but the downside is that Polypane is significantly slower without hardware acceleration (for obvious reasons).
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 JIT model, which we highly recommend.
Running the right architecture
Running Polypane through an emulation layer like Rosetta on macOS slows the application down considerably. Polypane's installers on macOS and Windows will install for the right architecture by default (AMD64 or ARM) so this almost never happens, but when you migrate from an Intel machine to an ARM machine (like Apple Silicon) using the migration assistant, it will copy over the AMD64 installation of Polypane. When this happens, performance on the new machine is severely impacted.
Because Polypane always updates to the same architecture, you should redownload and re-install Polypane.
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.
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.
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed