0

I am building webpapp with a JS framework (InfernoJS based on ReactJS).

I was wonderring how much important is it to load only usefull CSS. In JS Framework website (with angularjs, Reactjs...), you have your CSS for all your routes which is loaded but depending on your page you may only need 20% of your CSS rules on the webpage.

For exemple: You have '/about' with the ComponentA, for the JS Framework website you will load the CSS for ComponentA on the '/home' page as well but in that case that CSS is irrelevant.

I am wonderring if developping code to load only the css of the component display will really improve my performance espacially for SEO.

How the browser handle the unsed CSS? Is it loaded in the memory waiting to find an element on which it can be applied? Is It the same for every browser?

Edit: @Psi partially answer it. I will reformulate it to make it more understandable.

On JS framework base, your page is splited in different components, most of the time, you will have a component Header, Body, Footer.

So if I go on the route '/home' and '/about' the component Header and Footer should be the same but the Body component will change. So for optimization, I am considering to load the CSS for the Header and Footer component every time. However, the CSS loaded should change depending on the route and if I change the route (the page is not reloaded, It is handled by JS), the other Body component will be loaded but I will have the CSS of the Body component of the precedent route. In fact, generally you have the CSS for all your Body Components for every routes of your website.

So you have a lot of unused CSS rules. So should it be interesting to change the CSS loaded by adding and removing a <link> or I will probably consum to much ressource doing it and the browser have a good enough optimization about it?

Improve this question

1 Answer 1

Reset to default
3

To answer your question, there are several layers of thinking you need to go through.

First of all: Of course, every css that is loaded into your page will take the memory it needs to hold it active, because your html-page (although it may be static) possible could be changed dynamically (e.g. $.addClass).

So the browser knows what styles are being used at the moment, but has no way to determine possible future elements, thus being forced to keep every css definition in memory (or paged onto the disk).

The second thing is loading time. Depending on the order your css is being loaded, you may run into the situation where first your page loads and the css is being applied afterwards. This can even be visible to the user, being presented a non-styled page at the beginning and getting it styled later on!

This can be an issue even when loading only the necessary css via @import or <link rel="stylesheet">, so the best way is to provide the css in the html itself (loading it dynamically when rendering the html to the page).

This reduces loading time in two manners:

When loading the css via reference (i.e. @import or <link>), the browser starts opening a new connection (or uses the same connection after your html has been transferred completely) and requests the css linked in your html. So the browser

  • Loads the html although no css has been loaded yet and displays the html as soon as possble (always)

  • Needs additional time to establish a new connection or to wait for the html transmission to be finished before it even starts to load the css

  • If the used css is loaded very late, this can be a matter of seconds!

Although not asked:

For javascript, the exact opposite is desired in most cases: The browser starts executing a script as soon as it is received and pre-compiled. This may lead to unwanted behavior, when the html the script refers to is not loaded yet. So unless you are using a promise to ensure the page has been loaded before executing something, you should place in-line javascript as far as possible to the end of your page.

[edit]

To match your additional question:

It's hard to say. Of course, an optimized css will perform slightly better than an overloaded one in the client, but this makes design much harder as you have to keep track of any changes in any document and adapt your css accordingly. Also it might lead to discrepancies between same classes on different pages (e.g. .headline in page1 looks different to .headline in page2) when you want to update a class.

[edit] If you generate the stylesheet automatically (dynamically), you may create more overhead by putting effort in the optimization than you save by the reduced stylesheet parsing time.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I have updated the question. thanks for clearing some of my concerns
I don't understand the server side and client side part. For me in a Javascript WebbApp with Angular or React, you are handling with it only the client part. So the management of your CSS file is done on the client side for me.
But you want to provide some css stylesheet I guess. This could possibly also be dynamically rendered on the server side before being output to the client. Even a webapp will receive its content from a server. I just wanted to point out to watch the performance on the server side if you are going this way. If not, then it's ok for me as well ;) I edited my answer to match your (legitimate) objection
OK, thanks. My idea is to generate multiple CSS with dependencies throught there attached component. They are not generated dynamically but loaded dynamically.
I was confused with the server part. I did not took into considaration the performance of the machine heberging your Webapp and so distributing your CSS files among other and the amount of work that may induce on the machine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.