Single Page app, Hidden Elements & Page Load speed

@keith @emmanuel
So my application is pretty simple but I am not a web developer and can’t help but think what is the effect, on page load speed, of having a lot of hidden elements on the screen (especially when my app is full of data and is being used by say 10000 people).

I am aware that a 100 element page will load faster than a 10000 element page.
But my question is that does having elements hidden on page load make any difference. Do hidden elements get loaded only when they are made visible? If hidden elements are loaded along with visible elements on page load, is there a way to stop them and load only when made visible (via code/javascript)?

An example i’d like to give is imagine a button for chat on a page (the page has it’s own elements and stuff). When clicked, it makes a group visible on the screen which displays a list of contacts of the user. Upon clicking any one contact, another bigger group becomes visible which contains the chat of the user with that contact.

This is my scenario and i’d like to add more features, similar to the chat example given above, in my application.

I am not a web-dev so please explain it to me as simple as possible and suggest good practice, improvements and fast/efficient methods to achieve the same result.

I’m not a web developer either, but I have been told by others who are familiar with how things work on the “backend” that single page apps don’t necessarily load slower when a user is in your app the editor can be affected/load slower since you have so many elements. I have a single page app with many hidden elements and it loads fine when users are using it but can take a little extra time opening it on the editor. Hope it helps.

1 Like