How to improve prototype performance?

#1

Hello,
We are working on creating a prototype which includes a lots of pages, elements, dynamic panels and repeaters. What we are observing is that with every new addition, the prototype is getting slower and slower. It takes a lot of time while Pre-viewing or using the axshare url. The file size currently is 120MB. And we are expecting it to double atleast with similar features and pages getting added.

How to solve this issue and improve the load time of the axshare url? Is there a way? I googled up and at some places it talks about creating separate files and linking them over in axure cloud. But not sure how exactly that is done. Any guided steps? Or any reference page help?

#2

Hi @ashishranjan

In most cases, project performance is more directly impacted by the number of widgets that are on a page, not the number of pages that exist within a file.

Generally, dynamic panels and repeaters have more of an impact on the project due to the number of requests the web page is handling.

Here are the general recommendations for how to optimize a page to perform best both in Axure RP and the web browser.

  • 500 total widgets or fewer per page

  • 40 dynamic panels or fewer per page

  • 100 states in panels per page

  • 1 to 2 repeaters per page

  • Optimize any large images that are placed on a page or in a master, as large image files can impact the time it takes to load the page in a web browser.

#3

Thanks @Adil_Axure . Is there a way to calculate the no of widgets or dynamic panels (no of states) or repeaters in a page? Or we need to do this manually by going through each and every widget individually?

#5

This would need to be done manually, and we recommend you check for and remove any redundant pages, widgets, dynamic panels, or states, for example, you may have unnecessary multiple widgets for a styled text box where you could just use one box, or if you have placed dynamic panels on widgets that may not require multiple states, etc.

There is another debugging method you can try when previewing the project page(s) in your web browser;
You can check the timing of the resources that load in your prototype by checking the Network tab in the browser’s developer tools. To open this window, please right-click on the browser page and choose " Inspect ". In the window that opens, please click the Network tab. Once that tab is open please load or refresh your prototype link, leaving the developer tools window open. You should see a list of various resources load up; this will be all of the HTML, CSS, Javascript, images, and any additional data that is within your file. The right side of the Network tab should show you the timing for how long everything took to load and should help to visualize whether a specific element (such as a web font URL that you’re self-hosting or an image in the file) is slowing down the page. This console also displays the size of each component within the page.

Please let us know how this works for you.