|
| 1 | +--- |
| 2 | +title: Performance Limits and Tuning |
| 3 | +description: > |
| 4 | + Learn about the performance limits of Kanvas and how to tune your environment for optimal performance. |
| 5 | +weight: 1 |
| 6 | +categories: [Designer, Operator] |
| 7 | +tags: [performance] |
| 8 | +--- |
| 9 | + |
| 10 | +Kanvas is designed to handle a wide range of infrastructure and application configurations. However, there are some performance limits that you should be aware of when working with Kanvas. This guide will help you understand these limits and provide tips for tuning your environment for optimal performance. |
| 11 | + |
| 12 | +## Performance Limits |
| 13 | + |
| 14 | +### Maximum Number of Components |
| 15 | + |
| 16 | +Kanvas has a maximum limit of 1,000 components per design. If you exceed this limit, you may experience performance issues such as slow loading times and laggy interactions. To avoid hitting this limit, consider breaking your design into smaller, more manageable designs. |
| 17 | + |
| 18 | +<!-- |
| 19 | +#### Maximum Number of Components per Layer |
| 20 | + Needs a follow up --> |
| 21 | + |
| 22 | +<!-- |
| 23 | +#### Maximum Number of Relationship |
| 24 | + Needs a follow up --> |
| 25 | + |
| 26 | +#### Maximum Number of Annotation-only Components (non-semantically meaningful components) |
| 27 | + |
| 28 | +{{< alert type="note" title="What is a Non-Semantic Component?" >}} |
| 29 | +A non-semantic component is a component that does not represent a meaningful entity in your design. For example, a textbox, a shape, a line, or a comment are all examples of non-semantic components. These components are used for annotation purposes only and do not have a direct relationship to the underlying infrastructure or application that you are modeling. |
| 30 | +{{< /alert >}} |
| 31 | + |
| 32 | +Kanvas allows up to 1,000 non-sematically meaningfull components per design. Some designs have a large number of comments. While comments are a valuable collaboration tool, excessive comments can impact the performance of your design. Consider archiving or deleting old comments to keep your design running smoothly. |
| 33 | + |
| 34 | +#### Maxiumum Number of Orchestrated Components (semantically meaningful components) |
| 35 | + |
| 36 | +{{< alert type="note" title="What is a Semantic Component?" >}} |
| 37 | +A semantic component is a component that represents a meaningful entity in your design. For example, a server, a database, or a network switch are all examples of semantic components. These components have a direct relationship to the underlying infrastructure or application that you are modeling. |
| 38 | +{{< /alert >}} |
| 39 | + |
| 40 | +### Maximum Number of Relationships |
| 41 | + |
| 42 | +Kanvas supports up to 1,000 relationships per design. Exceeding this limit can impact the performance of your design, especially when rendering complex designs. To optimize performance, try to minimize the number of relationships in your design. |
| 43 | + |
| 44 | +#### Maximum Number of TagSet Relationships |
| 45 | + |
| 46 | +<img alt="Labels and Annotations" src="../../designer/tagsets/group-components.png" width="15%" /> |
| 47 | + |
| 48 | +Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design. |
| 49 | + |
| 50 | +Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the “Group Components” button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/). |
| 51 | + |
| 52 | +<!-- |
| 53 | +#### Maximum Number of Relationships per Component |
| 54 | + Needs a follow up --> |
| 55 | + |
| 56 | +### Maximum Number of Users |
| 57 | + |
| 58 | +Under the Free [subscription plan](https://layer5.io/pricing), Kanvas supports at least 20 users per design. As resources allow, up to 34 users may simulatanously collaborate within a given design. If you have a large team collaborating on a design, be mindful of the number of users active at the same time. Too many users can strain the performance of your design, leading to slower response times and potential data loss. See [Layer5 Cloud Networking Services](/cloud/self-hosted/planning/peer-to-peer-communication) for more details. |
| 59 | + |
| 60 | +### Impact of Images |
| 61 | + |
| 62 | +Be aware that designs are self-contained documents and that all artifacts, like any images (e.g. SVG, PNG, GIF, WEBP, etc.) that are added to your design are embedded into your design document, adding to the overall size of your design file. The embedding of images into your design file ensures portability of your design. You can export your design with the assurity that your images will remain in your design upon (re-)import. |
| 63 | + |
| 64 | +As the number and size of images contained in your design grows, images can significantly increase file size, potentially causing performance issues. With each change made to your design, the entire design file is uploaded to Layer5 Cloud. This same performance consideration applies during collaborative editing sessions with multiple users viewing/editing the same design. Each change to your design made by any user in the collaboration session will be propagated to every other currently collaborating user. If your design contains a large number of images, this can lead to slow performance and increased bandwidth usage. |
| 65 | + |
| 66 | +Under the Free subscription plan, Kanvas support a single image size of up to 500KB of images per design with a total of 10MB per design. If you need to use more images, consider upgrading to a paid [subscription plan](https://layer5.io/pricing). |
| 67 | + |
| 68 | +## Performance Tuning |
| 69 | + |
| 70 | +### Optimize Your Design using the Layers Panel |
| 71 | + |
| 72 | +To improve the performance of your design, consider optimizing by disabling one or more layers. |
| 73 | + |
| 74 | +<figure style="width:600px;"> |
| 75 | + <img src="./layers-panel.png" alt="Layers panel in Kanvas Designer" /> |
| 76 | + <figcaption>Control which layers of your design are visible using the Layers panel.</figcaption> |
| 77 | +</figure> |
| 78 | + |
| 79 | +Some layers specifically offer control of visibility of components, while other layers offer control over the ongoing evaluation of relationships between components. Depending on the type of layer disabled, either specific components or all components by type will display or not be displayed, allowing you to finely tune the performance of you design rendering experience by saving design resources and improving the performance of Kanvas as you adjust both the number and type of components in view. Note, that even though you might hide components, those components are not deleted or removed from your design. These components are simply hidden from current view. |
| 80 | + |
| 81 | +In the same way, as you toggle the evaluation of different types of relationships, understand that this releationships between your components still exist. Those relationsihps are simply temporarily hidding from view and the overhead of their evaluation eliminated while the respective type of relationship is disabled. |
| 82 | + |
| 83 | +Using the Layers panel you control the level of sophistication or simplicity of the rendering of components and relationships in your designs. You can both simplify your design layout by removing unnecessary elements and improve performance simultaneously. Alternatively, you can increase the level of detail in your design by enabling additional layers and relationships, while controlling the balance between detail and performance. |
| 84 | + |
| 85 | +### Optimize use of Images in your Design |
| 86 | + |
| 87 | +To optimize performance, consider the following: |
| 88 | + |
| 89 | +1. Use vector images (SVG) instead of raster images (PNG, JPG, etc.) as they are typically smaller in size and scale without pixelation. |
| 90 | +2. Prioritize using smaller file sizes whenever possible. Use the `webp` image format over `png`, `jpg`, or `gif` as it generally provides significantly better compression, resulting in faster design save times without sacrificing much image quality. |
| 91 | +3. Remove any unnecessary images from your design. |
| 92 | +4. Use image compression tools to reduce the size of your images before adding them to your design. |
0 commit comments