Fastest way to load CSS — inline vs HEAD

I have a 50x50px div I want to display on my homepage as fast as possible.

Is it faster for me to do

<div style="height:50px;width:50px">

Or to assign it a class to avoid the inline style:

<div class="myDiv">

And put the myDiv class in a CSS file in the HEAD section of the HTML page?

My thought was that the first one should be faster since it doesn’t need to request and recieve a CSS? I guess ultimatley I’m asking if BODY and HEAD get rendered sequentially or in parallel.

Comments 5

  • As others already pointed out, the right thing to do would be to put the styles in an external file and refer to it in the <head> part of your document.

    But if you’re going for fast (and this is what you were asking for) then you should use the inline-declaration like

    <div style="height:50px;width:50px">
    

    There are several reasons for that:

    • You don’t have to load an external file. This is very slow (compared to the next reason) since there is an additional HTTP request involved which (on top of the request and download itself) might be held back by other external files like JavaScript, favicons etc.
      So it will already load faster if you put your declaration in some <style> tags on the same document. But then there is the next reason.
    • The browser does not have to look through the DOM tree and search for nodes with the class myDiv to apply the styles to. It finds the <div> and immediately (or at the next render turn) applies the style information.
      This second delay will hardly be noticeable but if you are going for high performance, this is the way to go.

    I agree that these may somewhat be theoretical reasons but here you go. 🙂

  • Without HEAD loading first there can be no BODY.

    Before your BODY gets rendered, it has has to be loaded first. And if it is loaded, then the HEAD has already been loaded.

    You’re probably interested in whether a browser can load simultaneously both CSS files and the HTML document itself. It will depend on the browser implementation, but I believe most can download at least two documents simultaneously.

    One other important thing is that the more files a document consists of, the more chances the request for one of them gets lost. So by using inline CSS you make sure the CSS never gets lost.

    But I must point out that inline CSS is considered a bad style. Once you have a sufficient amount of markup, you will find it increasingly difficult to update your pages all at once. You will inevitably be losing one or the other instance. It is a much better idea to declare all styles in a separate document and reference them from pages. This way, when you need to change some color, you do it in one place and not in 37 places to be found in your pages.

  • Use an embeded css file. After the first request the file will be cached by the browser and won’t have to be downloaded again. Making the page load faster and reducing the strain on your server.

    Placing styles inline is not only ugly it also undermines the whole cascading thing.

  • The differences in performance will be imperceptible and should be irrelevent. Instead of worrying about premature optimisations like this be more concerned with doing the “right thing” – and in this case the right thing is to use external style-sheet files for your CSS as it is more maintainable and separates concerns.

  • There are cases when this would be a “good” practice. For example, you have a high value landing page, that requires about 500 bytes of CSS to support, verses the 200K Style sheet.

    While true, that they customer will have to download that file on the NEXT page, time to render is often most important on the landing page.

    Also, AFAIK, browsers will not begin rending until the entire CSS file is downloaded, which is not the case for inline styles. But yes, Best Practices, and 98% of the time you want to put CSS in a single linked file.

发表评论

电子邮件地址不会被公开。 必填项已用*标注