Why should CSS be called first?
- Because all CSS must be dealt with by the browser before a user can see anything on their screen.
A basic issue that delays CSS is simply that a webpage is calling other resources before it calls the CSS.
This is referring to the order in which calls for resources appear in the HTML.
In reality your pages are likely calling several things, even dozens of external resources.
Ensuring the calls for CSS files come first helps ensure the browser gets it first.
As an oversimplified example, let's just say that each network call (getting each file) takes one second.
- If we call the CSS file first, the browser will get the CSS in one second.
This matters because the browser can not display anything at all until it first has the CSS.
Our (admittedly oversimplified) example webpage, with the same resources will load in either one, two or three seconds. Simply by changing the order of how things are called.
Each thing your page loads takes some amount of time. To get CSS to the browser first, we must remove anything that is loading before it. This is typically as simple as changing the order in which your HTML calls resources.
Even though browsers have methods that try to solve this fundamental problem, the best practice is to simply put all calls for CSS first.
For these reasons, we should always place the calls for CSS before the calls for anything else.