Articles on: The Pro editor

Page performance

Why page performance is a shared responsibility


The Pro editor gives designers the freedom to create without limits, which is an advantage but also comes with potential risks. That freedom can sometimes lead to overly complex pages that don’t follow web best practices, which may cause performance issues that are beyond our control. At Maglr, we do our best to optimise pages for performance and SEO, but when it comes to the latter, part of that responsibility also falls on the designer. That’s why we’re introducing a performance check—to give users helpful guidelines and avoid potential pitfalls.


The performance pop-up


The performance pop-up highlights potential issues in your projects. While many of the suggested issues won’t directly harm your page’s performance, they are helpful guidelines to keep your pages running smoothly.
If you’re having issues and need assistance, please don't hesitate to reach out to us through the chat feature in Maglr. We're here to help!

Number of scenes


Using too many scenes, pages can quickly become long and overly complex. What accounts for “too many” is also dependent on how many and which kinds of elements you’re using. If you feel that your pages are slow, we recommend splitting your content across multiple pages to improve performance.

Page has been checked for accessibility


This tool will verify whether you have used the accessibility module. It allows you to add text to visual elements and rearrange the order of items and text, enhancing the accessibility of your page. However, there are additional considerations to keep in mind to ensure your project is fully accessible. For more information, please visit our help article on accessibility in Maglr.

Hidden elements not in use


Elements that are hidden will still be loaded on the frontend—even if they never appear on canvas. Hence, it's best to remove any unused, hidden items from your page. This section provides an overview of elements that are hidden and are not linked to an interaction, meaning their visibility will not be toggled.

Unused elements outside the canvas


Similarly to unused hidden elements, items placed outside of the canvas (and never shown on it) will still consume loading capacity. To avoid unnecessary slowdowns, make sure any off-canvas elements are actively used or remove them from your page.

Number of iframe embeds


Embedded content loads from external sources which can significantly slow down loading times—especially when multiple embeds are used and its contents are beyond our control. Try to keep them to a minimum or spread them across multiple pages if possible.

Number of elements


No worries, you can use quite a few elements before reaching a point where it becomes heavy on performance. That said, we have seen it happen. If you do find your page slowing down, try removing some of the heavier elements first (like complex shapes and video).

Scenes optimised for mobile devices


While a mobile design isn’t, we want to inform users know when a page doesn’t include one. In such cases, visitors will see a prompt to rotate their device to landscape mode, and the desktop design will be scaled down to fit. While it’s better than nothing, it’s not the most user friendly solution or optimal for mobile browsers.

Mobile only elements


This section provides an overview of elements used in the page’s mobile design that have no desktop counterpart. It’s recommended to reuse the corresponding desktop element in your mobile layout. That way, there will only be one instance of an element instead of two separate ones, keeping your page lighter and making it easier to keep both layouts in sync.

Number of videos


Video, like any other multimedia, requires significant loading capacity. The length, size and quality of your video are all variables that determine its strain on page performance. Video mainly becomes problematic when used in large quantities on the same page. If your page is slowing down, try separating video’s to other pages or reducing its file size be using different quality.

Number of autoplay videos


In addition to video taking a toll on performance, autoplay video’s add even extra weight because the initial data needs to be preloaded. In a scenario where multiple autoplay video’s would need to download simultaneously, it can significantly strain system resources. As a result, other animations or interactions on the page may become sluggish.

Elements with shadow effects


Shadow effects can impact your page’s performance. Especially, if you’re dealing with an animated element that has shadows, each “box-shadow” requires a separate rendering pass. Specifically the Safari browser is known to have some rendering issues. Again, it’s hard to say at which point it becomes excessive. If your page contains many shadows, keep an eye on its performance and consider to keep the number of animations low.

SVG elements in page


SVG elements are resolution independent which means that they can be scaled to any size without loss of quality. They also have smaller file sizes than image formats like PNG and JPEG which makes them lighter on performance. Ironically enough, many SVG’s combined (especially when they contain many path points) can still put a strain on performance. You can mitigate the impact of SVG’s by using fewer of them or reducing path points if possible.

Elements where its content is detached on mobile


When you reuse the same element in both desktop and mobile layouts, its text content stays in sync. Any changes you make to the text will apply to both versions. If you want different content on mobile, you can detach it. Having many detached elements can affect performance. If content was detached unnecessarily, we recommend re-syncing it.

Everything's in the green, but I'm still experiencing issues!


There's still a chance that you may run into performance issues, even if you pass all checks. Here are several steps you can take to narrow down where the issue is coming from.
Find out whether your internet connection is stable and test on another networks
Update your OS and/or browser
Duplicate your page and remove scenes, groups, and finally elements from the "problem" page—finding the problem by simple process of elimination
Check if embedded elements conflict with your page

Can't figure it out? No worries. Send us a message via chat or an email to info@maglr.com!

Updated on: 14/04/2025