Loading CSS and Performance

Question

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?

Answer 1

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.