A webpage with videos, animations, and transitions, especially if you have it opened on multiple devices can seriously hamper performance even on the beefiest dev machines. Here are some steps you can take to improve performance.
Animations are often the biggest resource hog when you have multiple devices in your workspace. Thankfully, you can disable them (and many more potential performance hogs).
Click the ⚡ Lightning bolt icon towards the right of the app header to open the Performance dropdown.
Here, you can toggle whichever web elements you want to disable.
Whenever you have disabled some web elements, Sizzy will helpfully point it out to you with a 🟡yellow dot on the Performance button.
If you are strapped for RAM, you can choose what to keep in memory. Open the Settings screen by clicking on the ⚙ Gear icon in the app header, and navigate to the Performance section. Tweak the settings to your liking and save your changes.
If you are facing graphical performance issues, and/or glitches, disabling hardware acceleration can be a potential fix. Open the Settings screen by clicking on the ⚙ Gear icon in the app header, navigate to the Performance section, and turn on the Disable hardware acceleration toggle.
Try to work in Focus Mode, Full Mode, or Resizable Mode most of the time, as they only show a single device at a time. Use Responsive Mode only when checking the responsiveness of your website on multiple devices.
The Full Mode and Resizable Mode buttons are located towards the left of the toolbar.
To focus on a single device, use the Focus Mode by clicking the 3 dot menu and selecting Focus.
You can save presets with different device configurations, and switch to one with several devices only when you want to check if everything looks fine on every device. After you're done checking, you can easily switch back to a preset with fewer devices, or go back to using Full Mode or Focus Mode. To know more, check out thePresets guide.