Serve CSS from one domain

> > Use one domain for critical CSS files

Updated: March 28th 2016

Critical CSS

  • Any CSS that is used by a webpage will delay the render of that page.
  • This is just part of how a web browser works.



Best practices for CSS delivery

The manner in which a page uses CSS is known as CSS delivery.

An ideal CSS delivery looks something like this:

  • No more than one external CSS stylesheet of an reasonable size (less than 75k or so)
  • Inline small CSS into HTML using style tags for above the fold content
  • No @import calls for CSS
  • No CSS in HTML things like your divs or your h1s (in atribute CSS)

Many companies are not able to completely redo their CSS as it may require an entirely new design budget.

Reality

Most companies and webmasters have to take on page speed issues very piece meal using whatever current skills and assets that they have. The end result of this is often a poor CSS delivery reality.

This article addresses that reality.

Serving CSS from the same domain

One of the best ways to lessen the delays of an less than ideal CSS setup is to ensure that whatever CSS files you are calling, you are calling from the same domain (rather than from separate domains) as the HTML file.

By doing this you are taking away the other time factors such as DNS calls and connection times that each domain requires.

This might seem to be obvious advice, however I see many scenarios where the HTML file comes from one domain (example.com), a CSS file comes from another domain (static.example.com), and additional CSS files are called from even other domains (we44rth.cdnexample.com).

This might occur because of your content delivery network (CDN) setup, or because a company may just have another domain or server that they have set up to server static files.

CSS must be dealt with as early as possible

Since the the CSS must be downloaded and parsed before anything shows up in a browser, then we must find ways to deal with it as quickly as possible.

The steps a browser must take with CSS is something like this...

  1. Get HTML file
  2. Parse HTML to find calls for external CSS files
  3. Get the external CSS files

This doesn't sound to bad but now lets add the real steps a browser is taking...

1. Get HTML file.

To get the HTML file the browser must make a DNS call to get the address of the web server and connect to that server then request the file and also wait to download it. Each of these steps take time.

2. Parse HTML to find calls to CSS files.

3. Get CSS files

If the external CSS files are on another domain then the browser once again must make new DNS calls, make new connections, and make new requests to the external server(s). Each of these steps take additional time.

Reducing the steps

By calling the external CSS files from the same domain as the HTML you can eliminate the need to make new DNS calls and connections.

This is true because the browser has already done those things to retrieve the HTML file so they will not need to be done again for that domain.

Depending on your CSS setup this can make a substantial difference.

Making the best out of a bad CSS setup

If you must have several CSS files you can reduce the ill effects by...

  • Moving CSS files to the same domain as the HTML file.
  • Ensuring that keep-alive is enabled on that server.





Patrick Sexton by