Large UX runs way too slow

[mikeallenbrown]

I've discussed this here before and got some feedback but I still suffer from seriously slow loading times. I'm at the end of my rope!

SQL backend. Web app (not mobile). I have a UX with about 100+ controls, mostly text boxes (the UX is displayed on an A5W page). Also within this UX are five repeating sections (each with a handful of text controls) and four embedded grids (live linked). The UX is populated by a list control. The list control only loads about 20 rows at a time (data pagination, auto fetch). There is no security in the UX controls. The UX is organized with a tab control, five tab panes, and various containers/frames. There are no xbasic functions or other coding in the server/client side events.

On my live site the UX takes approx. 35 seconds to render. Once it has rendered it works quite well. This initial long loading time is costing me clients. The web app is basically all data entry and the clients don't want all sorts of buttons and pop-up windows or different pages to navigate through for the various areas of the program.

Firebug says that it's the A5W page that is taking all this time. My A5W page as the UX, a navigation component (five buttons), and two small xbasic scripts that display a couple of session variables. I know it's the UX that takes forever to load because if I remove it from the page the page loads nearly instantly. I don't know what to do now.

[Steve Workings]

Re: Large UX runs way too slow

Well, you already know the answer: You need to figure out how to break this into smaller pieces and load what's needed when it's needed -- not all at once, up front. Yup, it may take some design re-think. But that's a load for sure, esp. the 4 linked grids.

My approach for this kind of thing is that no user is going to need/use/view/work with every one of those pieces at the same time, despite what anyone says. So, figure out what they need first, then find ways to load the rest as needed.

After all the work you've put into this to make what you have, it's a tough decision to go back a few steps and actually decide to re-organize, but it sounds like that's in order.

Without seeing it all, I'd start with the live-linked grids and see if you can off-load them. Indeed, save your UX as MyUXTest2 or something like that, take out the grids, publish the result and see how much of a difference that makes. Start by removing the most obvious things, test, rinse and repeat. Again though: start with those grids.

[mixter]

Re: Large UX runs way too slow

I sped up a UX from from 6 seconds load time down to 2 seconds load time by moving embedded grids onto separate Panel Cards
and for each embedded object control (grid component),
set the Embedded Object properties to
- Show Mode: When page is loaded
- Delay render till visible: true

One grid (one panel card) is shown upon opening the UX.

I have a List that looks like "tabs" which trigger navigation to another Panel Card (containing embedded grid) and each embedded grid is only loaded when shown the first time (i.e. when that panel card is navigated and becomes visible)

ListControlAsTabsWithEmbeddedGridsOnPanelCards.png

[GGandhi]

Re: Large UX runs way too slow

I've discussed this here before and got some feedback but I still suffer from seriously slow loading times. I'm at the end of my rope!

SQL backend. Web app (not mobile). I have a UX with about 100+ controls, mostly text boxes (the UX is displayed on an A5W page). Also within this UX are five repeating sections (each with a handful of text controls) and four embedded grids (live linked). The UX is populated by a list control. The list control only loads about 20 rows at a time (data pagination, auto fetch). There is no security in the UX controls. The UX is organized with a tab control, five tab panes, and various containers/frames. There are no xbasic functions or other coding in the server/client side events.

On my live site the UX takes approx. 35 seconds to render. Once it has rendered it works quite well. This initial long loading time is costing me clients. The web app is basically all data entry and the clients don't want all sorts of buttons and pop-up windows or different pages to navigate through for the various areas of the program.

Firebug says that it's the A5W page that is taking all this time. My A5W page as the UX, a navigation component (five buttons), and two small xbasic scripts that display a couple of session variables. I know it's the UX that takes forever to load because if I remove it from the page the page loads nearly instantly. I don't know what to do now.

the main reason for slow loading of a web page is that the browser has to calculate where to put all the controls in relation to all other controls especially involving tables and images. these are typically declared without any specific width and height dimensions. the browser has to calculate and go back redo the calculation before it renders the whole page.
once the calculation is done and page is rendered browser uses what in cache to tweak a little to re-render. hence the second time on it is faster.

you need to go back and take a look at how to render the page if your were the browser.
first break the top part, the one with the portion up to navigation part, into a segment and include in the new page if you have not done that already.
then look at all the grids and repeating sections see if you could assign width and height. (any thing that is a table format)
if you are able to break your ux into smaller fragments then load them as needed.

regardless what you do you will need to follow what steve said "rethink and redesign" if you want to speedup the loading time

in addition if you post a screencast of what you have and how it displays then someone will be able to pin point where to tweak or adjust.

[mikeallenbrown]

Re: Large UX runs way too slow

Thanks all. My app is for desktops, however, not for mobile devices. Panel cards are only for mobile devices I thought.

[mixter]

Re: Large UX runs way too slow

If you are running in a browser then you can use panel cards

[mikeallenbrown]

Re: Large UX runs way too slow

Update: Turns out my biggest problem was the servers SQL and Alpha were running on. I upgraded to better ones and the time that it takes to load my UX improved 50-60%. Further tweaks to the UX itself and it'll be running even faster.

Thanks all for your help.

[Steve Workings]

Re: Large UX runs way too slow

Good to hear. I moved from another service to Zebrahost a while ago and never looked back - very visible difference in performance.

[Deb]

Re: Large UX runs way too slow

Thanks for the Zebrahost tip. I was debating and looking for the best way to go forward.

[Steve Workings]

Re: Large UX runs way too slow

Hi Deb. Good to see you here, glad to know you're onto v12; you know I'd never (knowingly) point you wrong.

[Deb]

Re: Large UX runs way too slow

Hi, Steve. It's good to be back. I think v12 may be just what I need at this point in time, and I'm looking forward to reading your expert posts!

[compuaid]

Re: Large UX runs way too slow

Just as an addition on this topic I had a complex UX that was databound and taking approx. 14 seconds to open. The UX used tabs.

I replaced the tabs with Panels and used the Tabbed Band navigation method. I also took some of the more complex portions of the form and converted them to free form layout containers.

I have repeating sections on the form that are just lists of child records and I'd hoped to replace those with unbound list controls but I found that the list controls wouldn't refresh when using the Cached Component option on the grid button that opens the UX. A shame but caching the component and setting the option to open the UX component in the same window generates a huge savings in opening subsequent instances of the UX form.

I set the options in the UX properties to Compute Data Binding at run time and Compute Panel Layout and now the form opens in approximately 4 seconds with the exact same functionality. When opening additional instances of the same form the window opens in under 2 seconds!

The only problem thus far that I've not been able to get around is that when using Panels in a popup window UX component on the desktop I always have up/down and left/right scrollers on the window frame no matter how I size the layout of the UX component and no matter how large I specify the window to be when I open it (or if I leave the sizes blank which should open the window to fit the UX contents.)

It takes a lot of work to fully optimize complex forms but the end results are worth the time spent.