# Perspective, faster page **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 15, 2023, 1:18pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885 "2023-02-15T13:18:10Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 1:18pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/1 "2023-02-15T13:18:10Z")
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? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 15, 2023, 1:21pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/2 "2023-02-15T13:21:28Z")
> [@zacharyw.larson](#): > > I have a blank behind each) well that does not sound efficient for sure ---
**Author:** ![bkarabinchak.psi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bkarabinchak.psi/32/83567_2.png) [@bkarabinchak.psi](https://forum.inductiveautomation.com/u/bkarabinchak.psi)\ **Post date:** [February 15, 2023, 1:35pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/3 "2023-02-15T13:35:26Z")
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. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 1:56pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/4 "2023-02-15T13:56:12Z")
**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. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [February 15, 2023, 2:03pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/5 "2023-02-15T14:03:37Z")
> [@zacharyw.larson](#): > > Blank simple gauges are background arcs for appearance. 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? ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 2:07pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/6 "2023-02-15T14:07:23Z")
I don't know CSS. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/538dd2526b96eb62ea044502c721b00327a539a9.png) **Is there way to stage the loading of objects that are offscreen on open?** **Does someone have a spreadsheet of performance cost per component?** ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 15, 2023, 2:09pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/7 "2023-02-15T14:09:04Z")
where do you need 2 gauges for this? ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 2:09pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/8 "2023-02-15T14:09:31Z")
> [@Simple gauge corner radius](https://forum.inductiveautomation.com/t/simple-gauge-corner-radius/51142/11): > > How do I get rid of the little line on the left? I did not solve the original issue. I drew two. Kind of works. [image] Also, can I apply a style to the label in the simple gauge? What is the best way to depict the range of the numbers? [image][image] The cornerRadius of 25 is not being applied when the value is below 12 I think. 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?** ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [February 15, 2023, 2:12pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/9 "2023-02-15T14:12:38Z")
> [@zacharyw.larson](#): > > I don't know CSS If you're developing in perspective, you had better learn it. Some links: > **[The Ultimate CSS Tutorial for Beginners in 2023](https://www.simplilearn.com/tutorials/css-tutorial)** > > This CSS (Cascading Style Sheets) tutorial will help you understand ✔️what is CSS, ✔️how to use CSS along with ✔️CSS concepts. Read on to know more about! > **[CSS Tutorial](https://www.tutorialspoint.com/css/index.htm)** > > CSS Tutorial - CSS is an acronym for Cascading Style Sheet and it was created by HÃ¥kon Wium Lie in 1996 for the web developers to change the layout, colors, and fonts of their websites. > **[W3.CSS Home](https://www.w3schools.com/w3css/defaulT.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. > [@zacharyw.larson](#): > > **Is there way to stage the loading of objects that are offscreen on open?** No > [@zacharyw.larson](#): > > Does someone have a spreadsheet of performance cost per component? 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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 15, 2023, 2:13pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/10 "2023-02-15T14:13:39Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0dc15ef743fa1ad2f175309e12b0f6feffc78b92.png) 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 > [@lrose](#): > > To my knowledge no one has taken the ridiculous amount of time it would take to compile this data. Performance really also is quie difficult to measure, some are slower because of cpu, some because of gpu ... ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/11 "2023-02-15T14:19:14Z")
@victordcq > [@Simple gauge corner radius](https://forum.inductiveautomation.com/t/simple-gauge-corner-radius/51142/5): > > Its just not implemented (anymore?) in the javascript. Trying to fix that with css would be quite difficult, so this probably will have to be done by ignition. But if you have some free time on your hand to play around with it… you could create a clip-path… but good luck finding what you need, (that is also responsive) [data-component="ia.chart.simple-gauge"] svg \> g \> g:nth-child(2) \> g:nth-child(1) \> g \> g \> g \> g \> g \> g:nth-child(1) \> g \> g:nth-child(1) \> g:nth-child(2) \> g:nth-child(1) \> … 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?** ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 15, 2023, 2:23pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/12 "2023-02-15T14:23:19Z")
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 ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 2:25pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/13 "2023-02-15T14:25:32Z")
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. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [February 15, 2023, 2:39pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/14 "2023-02-15T14:39:33Z")
> [@zacharyw.larson](#): > > 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 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. > **[Pocket Guide to Writing SVG](https://svgpocketguide.com/)** > > A quick but thorough “pocket” sized reference to get started writing Scalable Vector Graphics by Joni Trythall ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 15, 2023, 5:04pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/15 "2023-02-15T17:04:44Z")
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? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 16, 2023, 8:01am UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/16 "2023-02-16T08:01:45Z")
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 ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [February 16, 2023, 8:51am UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/17 "2023-02-16T08:51:42Z")
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). ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 16, 2023, 1:32pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/18 "2023-02-16T13:32:10Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 16, 2023, 1:53pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/19 "2023-02-16T13:53:44Z")
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 ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 16, 2023, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/20 "2023-02-16T14:30:03Z")
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 ? [Next page](https://forum.inductiveautomation.com/t/perspective-faster-page/69885.md?page=2)