We have compiled a list of tips that can further improve the performance of a Proto.io project:
- When building an interactive prototype, it's good to have in mind that the smoothness of transitions and animations is directly affected by the number of interactive components on screens. The more components participating in transitions, or being animated, the greater the stress on performance.
- Regarding images, try to make sure that images are optimized. The smaller file size the better. Also, when attached to a screen, it's best that the component is the same size as the actual image size. For example, if the image component is 200x200, then use an image that is 200x200, not 800x800. This is so that the browser (especially on mobile) doesn't need to resize and re-render the image.
- By definition, you create a new State for a Screen (or Container) to represent a different state of the same Screen (or Container) and to create transitions from one State to the other. That's why when you create a new State in Proto.io, a duplicate of the original State is created for you to quickly edit. Try to work with the components that are brought into the new State (move them, edit their properties, etc.) and not remove them and add new ones with the same purpose. This is the right way for transitions to properly work.
- Try not to overuse States to the point where Screens could be used instead of States - i.e. where two states are not at all similar to each other. A "Go to screen" interaction is always faster than a "Change State" one unless not many changes are being made across states.
- Regarding interactions, adding multiple callbacks may cause a visible delay between the first and last callback - this is especially true when the interaction is triggering continuously, e.g. On Drag. We recommend that where possible you use multiple interactions on the same trigger, instead of one trigger with many callbacks.
- It's good to have in mind that filters and other adjustments such as shadows on components can have a negative effect on the prototype's performance when previewed on a browser or on the Proto.io App.
- If you are importing your designs from Photoshop or Sketch, try to use the '@' symbol at the start of your group name to export an entire group of images as a single image. This is very handy for transferring fewer images which will be much easier to be managed in Proto.io.
- If you are using multiple Proto.io components that do not have interactive properties on them, then you can group those components into one. You can right-click on the group in the Layers panel and select to export them into a PNG file that you can then replace with your grouped components. This way you can minimize the number of components on your screen or container and help improve performance.
Most of the above are also explained in the following webinar as well: