6

Normally we link to CSS via the <link> tag. However, this leads to the browser making a network request for the stylesheet, which is slow.

What if, in the build process, we took our CSS file and inserted it into the HTML using <style>? For example, suppose we have:

app.css

p {
  color: red;
}

index.html

<html>
  <head>
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

Why not run a build process that uses app.css to compile index.html into the following:

<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

Similarly, should we be doing the same with JavaScript?

  • 1
    Have you used your browser developer tools to measure whether this would be any faster? There are also tools to simulate slower connections (e.g. those built into Chrome). I've measured this for my site, and it literally makes no difference because the external CSS file is downloaded in parallel with other resources (JS libs, webfonts, images, …). Keeping it external allows the CSS to be cached on subsequent page visits. – amon May 6 '17 at 21:28
  • In addition, you get separation of concerns, and the ability to use CDN's. – Robert Harvey May 6 '17 at 21:53
  • Whether you should or not depends whether you are Google.com or someguysblog.com or spatulacity.com. – whatsisname May 6 '17 at 23:08
  • How slow is slow? Is your webserver set up to tell the browser to cache the CSS file? How big is the CSS? Can you use a "base" style and only inline the "special snowflake" styling? – RubberDuck May 6 '17 at 23:44
  • 1
    If you have a single page site this may just work. If not each html page will be larger and the browser can't cache the CSS and Javascript so you load extra stuff over and over again. – thorsten müller May 7 '17 at 7:00
5

An interesting question!

First of all lets dispense with any ease of coding arguments. Server side code can compile, minify and bundle all the css, javascript and html together from the usual separate files.

Now we have a purely technical question of speed.

  • Is it quicker to download one file on two at almost the same time?

  • Is it quicker to parse one large file or two small ones?

  • Is the load on the server greater one way or the other?

  • How does caching affect the situation when you have more than one request

  • How does caching affect the situation where you have more than one page

We can test this in a browser easily enough and you can see a slight advantage for the single request in all but the last question.

If you have two pages which share css or javascript, loading the second page with the separate method benefits from the cached versions of those files where as the single page version downloads all that data twice.

When we consider that your JavaScript in particular can be many times larger than your html and tends to be used on every page. You can see that there is a very real benefit in putting shared code and css in separate files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.