Perspective, faster page

On pages where I have 24 simple gauges (technically 48 because I have a blank behind each) and 12 pie charts, the page loads a little slow.

If there away to stage the loading so the objects not visible when landing on the site are not loaded at the same time as the visible area?

Or other tips of things I can do to help the efficiency?

well that does not sound efficient for sure

5 Likes

Some general rules that I think apply to both perspective and vision -

Prefer bindings over scripting when possible. Bindings are just faster.

Optimize your database queries with EXPLAIN and taking appropriate measures.

Use named query w/ caching enabled when appropriate so the gateway doesn't have to re-query the same exact data when it occurs in quick succession.

Get rid of useless components. As @victordcq pointed out, do you really need an invisible object? I can't imagine it's too much of an extra load but it is extra, and I don't know what else you are doing on it. I try to keep things as lean as possible. YANGNI applies here.

Certain latency you can't avoid like network latency. How close is your gateway to the database - are they on the same computer (good for latency, bad for hardware/performance)? Different computers/VM's but same network (optimal imo)? Or does your gateway have to go out to the cloud or some other network to reach it (now you will get unavoidable latency you don't have control over).

Then repeat this process with your gateway to your OPC-UA server. Are the plc's connected straight to your gateway or are they connected to some other OPC server that Ignition is talking to like some distant Edge node?

And lastly, where are your clients connecting from? Are they on the same network as the gateway or are they connecting over the internet to a public gateway?

Last thing could always be a redesign. Do you need to show all 24 on a single page? Can you do a page of just 6 that the person can then change something to show the next 6 and then the next 6 etc.

Some things you have power over like your view design and your database query optimization (presumably unless a DBA/IT control it), but when you're going over non-local networks you are pretty much out of luck regarding those issues.

5 Likes

Is there way to stage the loading of objects that are offscreen on open?

I don't have useless components.
I don't have invisible components.
Blank simple gauges are background arcs for appearance.

I am not able to change the network conditions.
I think it's different computers/vms with same network.
Clients connect from another network.

I will look at if I can speed up the queries, but they are very fast.

Does someone have a spreadsheet of performance cost per component?
Maybe I can pick a selection of cheaper components that still look good.

This is perspective, why are you not using CSS for appearance? What appearance are you trying to accomplish that you can't use CSS for it?

3 Likes

I don't know CSS.

image

Is there way to stage the loading of objects that are offscreen on open?

Does someone have a spreadsheet of performance cost per component?

where do you need 2 gauges for this?

2 Likes

It was the only way.

Is there way to stage the loading of objects that are offscreen on open?

Does someone have a spreadsheet of performance cost per component?

If you're developing in perspective, you had better learn it.

Some links:

No

Perhaps someone at IA has this. To my knowledge no one has taken the ridiculous amount of time it would take to compile this data.

10 Likes

i guess you will need some css to do the corner radius tho.

edit: heh its not quite possible to easily give it rounding, you could add a clip around it though, its kinda annoying to do

Performance really also is quie difficult to measure, some are slower because of cpu, some because of gpu ...

4 Likes

@victordcq

When I saw this post, I thought it meant you couldn't accomplish it in CSS.

I'd like a spreadsheet of performance cost per component type in Perspective if someone has.
I am not sure how long it would take to compile.
Is the simple gauge considered low cost?

yes i forgot it wasnt possible without doing a bunch of cliping

judging from the complexity of the svg, i would not consider it low cost.

you can achieve an rounded arc like that in one line with svg, instead of also adding the 20 nested groups and everything else the gauge has

1 Like

I looked at learning CSS a few months ago.
I did some things with it.
I can't remember why I stopped putting time into it. I will look again.

I think it might have been that I installed Inkscape, and then determined that a person could be such an expert in that side of it, that I wanted to be an expert on the data site, and was concerned about splitting my time.

1 Like

If one wants to be efficient in developing in Perspective, they really need to have a good grasp on both the backend (data) and front end (CSS).

Also, as a side note Inkscape (in the context of Ignition) is for SVG's. That is very different from CSS. One of the best references I have found for SVG is the Pocket Guide to Writing SVG.

7 Likes

Thanks, that references helps me a lot.

When you mentioned that I should learn CSS to speed up my page, what techniques did you have in mind?
I had thought you meant the SVG aspects.

I am in Ignition 8.1.19.
I have used some injections of CSS that Victor recommended.
What is the typical implementation technique that you recommend that I learn?
Do you mean specifically the CSS style that I think later versions have that Victor mentioned to me in another thread?

The stylesheet is definity an upgrade over the injection. having everything on a clean true css file...
But css they use is the same.

Anyways using an svg would definlty be batter than a gauge. but its kinda a pain to make. i would just stick with the background, and accept that for now they dont round.

if this improves performance than users will be more happy than having a minor visual improvment

1 Like

Most of the time, if pages display a lot of data at once, they will be less time-sensitive. I will pre-compute the data to be displayed in a memory tag, and then directly bind the tag (value or dataset).

1 Like

Do you have a CSS sheet you can show me so I can see how it might look like in the hands of a pro?

@nideyijuyidong
I used to pre-compute data in memory tags. I use queries now though.
Found queries to be faster and more reliable than tags that had run queries.
I don't know if it is non-linear or if it is recommended to use queries and avoid the pre-compute technique.
As I got better at queries, they seemed to be the faster performing for me.

1 Like

I dont really have a project that uses the stylesheet yet.
Most styling i did in the styleclasses and are still in there as long as they work xd

Anyways css sheets alone dont really make sense on their own

1 Like

That is a relief.
I am having a hard time imagining how the style sheet works.

I like the style classes.

How wide do you normally make your perspective pages @victordcq ?