Html Question posted in
Some basic documentation can be found here.

Html – Organizing my CSS into one bundled request

I have on many projects had very long CSS stylesheets. I would like to organize them into multiple files.

For example:

  • main sections
  • forms
  • form elements
  • layout elements

I think this would be really good for organization purposes.

But I’ve heard that each style tag, script tag and any external references are their own request.

So if I have page with 10 CSS files, is that going to result in 10 requests?
If so, is that ok? If so is there any way to bundle them into one request?

Example,

<link rel="stylesheet" type="text/css" href="styles/layout.css" group="pagestyles"/>
<link rel="stylesheet" type="text/css" href="styles/form.css" group="pagestyles"/>
<link rel="stylesheet" type="text/css" href="styles/elements.css" group="pagestyles"/>

I would hope that the browser would read all the links in the HTML head and request them at the same time.

Tags:

2

Answers


  1. 0

    Having multiple CSS file will lead to multiple requests, however, as mentioned here you can concatenate multiple css files.

    Hope this helps!

    Login or Signup to reply.
  2. 0

    So if I have page with 10 CSS files, is that going to result in 10 requests? If so, is that ok?

    It will result in 10 requests. This should be okay.

    I would hope that the browser would read all the links in the HTML head and request them at the same time.

    Fortunately, the browser does this.

    On HTTP/1.1 the browser can do up to 6 requests at the same time. On HTTP/2 there isn’t really a limit.

    So including multiple small CSS files is about the same efficiency as one big CSS file with the same content.

    Here’s a screenshot of developer tools where I added some stylesheets with <link href="..."> tags that take an artificially long time to return an HTTP response:

    Screenshot of developer network tools timing graph showing multiple requests being made at the same time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search