Page performance

Page performance is a check in the editor that scans the page you're working on and flags things that can make it slow to load or render, such as many scenes, hidden elements that never appear, or many videos. Because the editor lets you design without technical restrictions, a page can become heavy without you noticing. Maglr optimises published pages for performance, but how a page is built also affects how fast it loads, so the check gives you guidelines to keep your page running smoothly.

Opening the performance check

To open the performance check for the page you're editing:

1. In the editor, click the M options menu in the top-left corner.
2. Click Page performance. A popup titled "Page performance optimisation" opens and lists the checks for the page.
3. Click a check to expand it. You'll see an explanation and a link to its section in this article. Most checks also show a table per scene, listing the elements involved or how many there are.
4. Click an element in the table to jump to it on the canvas. This works for the lists of hidden elements, elements outside the canvas, mobile only elements, embeds, videos and elements with shadow effects. The popup closes and the editor shows the element in the desktop or mobile design it belongs to.

The same M options menu also shows a "Page issues found" box when one or more checks are at red level. Click an item in that box to open the performance popup.

Reading the performance overview

The performance overview in the "Page performance optimisation" popup lists the checks for the current page, with the most urgent ones at the top. Many of the issues it flags won't directly harm your page's performance, but they're useful guidelines for keeping it running smoothly.

Each check shows its status in one of two ways:

• Bar: checks that count something show a bar. The bar fills up as the count grows, and turns from green to orange and then red as it approaches a level that typically affects performance.
• Check or cross: pass/fail checks show a green check when the page passes and a red cross when it doesn't.

Number of scenes

The "Number of scenes" check shows how many scenes your page has. A page with many scenes becomes long and complex, and the browser needs more time to process it. What counts as too many also depends on how many elements each scene holds, and which kinds. If your page feels slow, test its loading time and consider splitting the content across multiple pages.

Page has been checked for accessibility

The "Page has been checked for accessibility" check passes when every text element in the page's desktop design has accessibility settings. You set these in the Page accessibility tool in the M options menu, for example by saving a reading order, or in the Accessibility settings of a text element. If any text element has no accessibility settings, the check fails, and the "Page issues found" box shows "Page has not been checked for accessibility".

Passing this check doesn't mean your page is fully accessible. Use the accessibility tools to add alt text to images, add descriptions for buttons and verify the reading order of headings. For more information, see Accessibility module.

Hidden elements not in use

The "Hidden elements not in use" check lists elements that are hidden and that no other element shows or toggles with a click or hover interaction. Hidden elements still load on the published page, even if they never become visible, so they add to the page's loading time without being seen. Remove any hidden elements you don't use.

The check only looks at interactions, not at animations. Click an element in the list to jump to it on the canvas.

Unused elements outside the canvas

The "Unused elements outside the canvas" check lists every element that is positioned completely outside its scene. Elements outside the canvas still load on the published page, so an element that is never shown adds to the loading time without being seen. Remove any off-canvas elements you don't use.

The check doesn't look at animations or interactions. An element that you deliberately bring onto the canvas with an animation or interaction also appears in this list, and you can leave it where it is. Click an element in the list to jump to it on the canvas.

Scenes optimised for mobile devices

The "Scenes optimised for mobile devices" check shows whether your page has a mobile design. A mobile design isn't required, but it gives visitors on a phone the best reading experience. When a scene has no mobile design, visitors on a phone see a prompt to rotate their device to landscape, and the desktop design is scaled down to fit. This works, but it isn't user-friendly on mobile browsers.

The check shows a green check as soon as at least one scene on the page has a mobile design, so a page can pass while some scenes still have none. To see which scenes have a mobile design, click the check to expand it and look at the "Mobile layout" column in the table, which shows a check or a cross for each scene.

Number of elements

The "Number of elements" check counts every element in the page's desktop and mobile designs. An element used in both designs counts once. A page can hold a large number of elements before performance suffers, but pages with many elements take longer to render in the browser. If your page feels slow, test it on different devices, remove heavier elements first (such as complex shapes and videos), and consider splitting the content across multiple pages.

Number of iframe embeds

The "Number of iframe embeds" check counts all Embed elements on the page, whatever their type: Code, File or iFrame link. Embedded content loads from external sources that Maglr doesn't control, and several embeds on one page mean several external sources loading at the same time, which can slow the page down. Keep the number of embeds low, or spread them across multiple pages. Click an element in the list to jump to it on the canvas.

Number of videos

The "Number of videos" check counts the Video elements on the page. Videos are lazy-loaded: each video starts loading only when it comes into view. Even so, many videos on one page can still slow it down. The length, size and quality of each video also affect how heavy it is. If your page feels slow, move some videos to other pages or reduce their file size by using a lower quality. Click an element in the list to jump to it on the canvas.

Number of autoplay videos

The "Number of autoplay videos" check counts the videos on the page that play automatically. Autoplay videos preload their first seconds of data, so several of them on one page compete for bandwidth and slow down page loading. Use a maximum of 3 autoplay videos on the same page.

Elements with shadow effects

The "Elements with shadow effects" check counts the elements that have a shadow or a text shadow, in their normal or hover state. Many elements with shadow effects can slow a page down, particularly for visitors using Safari. There is no exact limit, but laggy scrolling or sluggish animations often mean the page is overloaded. If your page uses many shadows, keep an eye on its performance and consider keeping the number of animated elements with shadows low. Click an element in the list to jump to it on the canvas.

SVG elements in page

The "SVG elements in page" check counts the vector shapes on the page: Rectangle, Oval, Polygon, Star and Triangle elements, and the vector shapes created when you import a design from Sketch or Figma. Each vector shape is rendered as its own SVG, and the browser has to render every one of them separately, so a large number of vector shapes can slow the page down. The basic Shape element and images you upload as SVG files don't count towards this check.

Complex visuals imported from Sketch or Figma are often converted into many separate shapes. To keep the page light:

• Export a complex visual from Sketch or Figma as a single SVG file and upload that instead of the separate shapes.
• Remove any vector shapes you don't need.

Mobile only elements

The "Mobile only elements" check lists the elements in the page's mobile design that aren't linked to a corresponding desktop element. The bar fills as the number of mobile only elements grows compared to the number of desktop elements on the page. Where possible, reuse the corresponding desktop element in your mobile design instead of adding a separate one. That way there's only one instance of the element instead of two, which keeps your page lighter and both designs in sync. Click an element in the list to jump to it on the canvas.

Elements where its content is detached on mobile

The "Elements where its content is detached on mobile" check counts elements that are reused from the desktop design in the mobile design, but whose text content has been detached on mobile. When you reuse an element on mobile, its text stays in sync with the desktop version. Detaching the content lets you make small adjustments for mobile, but changes you make to the desktop text no longer carry over to mobile. This is particularly risky on pages that were copied.

To reset all detached text elements on the page back to their desktop content:

1. Click the M options menu, then click Page performance.
2. Click "Elements where its content is detached on mobile" to expand it.
3. Click Reset elements.
4. In the "Remove mobile overwrites?" dialog, click Remove.

Troubleshooting a slow page when all checks pass

A page can still have performance issues when it passes all checks. To narrow down where the issue comes from:

1. Check that your internet connection is stable.
2. Test the page on a different network.
3. Update your operating system and browser.
4. Check whether embedded content conflicts with your page.
5. Duplicate the page. In the copy, remove scenes one at a time and check the page after each removal. When the issue disappears, the last scene you removed contains the cause.
6. Duplicate the original page again. In that scene, remove groups and then individual elements one at a time in the same way, to find the one that causes the issue.

If you can't find the cause, send us a message via chat or email info@maglr.com.

Frequently asked questions

Why is an element I animate onto the canvas listed under "Unused elements outside the canvas"?

The "Unused elements outside the canvas" check lists every element positioned completely outside its scene, without looking at animations or interactions. An element you deliberately bring onto the canvas with an animation or interaction is in use, so you can leave it where it is.

Do uploaded SVG images count towards "SVG elements in page"?

No. The "SVG elements in page" check counts only vector shapes drawn on the canvas: Rectangle, Oval, Polygon, Star and Triangle elements, and vector shapes imported from Sketch or Figma. An SVG file you upload is an Image element and doesn't count towards this check.

Why don't I see a check such as "Number of videos" in the performance overview?

Checks that count something, such as "Number of videos", "Number of autoplay videos" or "Number of iframe embeds", only appear in the "Page performance optimisation" popup when the page has at least one of those elements. If a check is missing, the page has none.

How many autoplay videos can I use on one page?

Use a maximum of 3 autoplay videos on the same page. Autoplay videos preload their first seconds of data, so more of them compete for bandwidth and slow down page loading. The "Number of autoplay videos" check in Page performance appears when your page has autoplay videos, and its bar turns orange, then red, as their number grows.

Updated on: 20/10/2026