Use less external CSS files

> > Reducing the amount of external CSS files

Updated: April 16th 2016


What are external CSS files?

  • External CSS files are style instructions for a webpage which are located in a separate file than the html.

Reducing the amount of files

One of the main principals of CSS performance is to get the CSS to the browser first, as quickly as possible.

When CSS is in several separate files, each of those files must be downloaded before the browser can display anything to a user.

Reducing the amount of external CSS files will result in faster webpages in just about every scenario.

How to do it?

CSS files can be combined by just copying and pasting the contents of one file into another.

The overall process is basically:

  1. Copy and paste the contents of one or more CSS files into another
  2. Remove the calls to the old CSS files

I explain the process in my combine CSS article.

Benefits of less CSS files

The main benefit to having less external CSS files is that your webpages will load faster, but that is not the only benefit.

There are two significant reasons to reduce the amount of external CSS files, we will discuss both.

  1. Pages load faster
  2. Server load is reduced

1. Pages load faster

As I briefly stated above, less CSS files to load means the browser gets the CSS faster, resulting in faster page loads.

Here are two pages with the exact same CSS, but one page has combined the CSS into one file whereas the other has several separate CSS files...

Every connection and download counts when it comes to making your web pages faster. In virtually every situation, less files to download means faster pagespeed.

You may be thinking that with HTTP2 and other emerging network technologies this won't matter as much, but the truth is that is does still matter.

While we are talking about CSS in this article, it is important to remember that the webpage is also downloading images, javascript, and making other other calls to other servers as part of the total page load.

Every time you can remove a step the browser needs to take to display your pages, you are making a webpage faster.

Anything that can be removed from the critical rendering path will make a difference.

With CSS, one of the big steps you can remove is the amount of external CSS files that need to be retrieved.

2. Server load is reduced

Reducing the amount of external CSS files also significantly reduces the amount of work your webserver has to do to serve a webpage.

Let's look at a website with webpages that have one html file, 5 CSS files, 4 javascript files, and 10 images.

For each webpage visit, it is likely that all those files have to load. This means that for each webpage visit, we are loading 20 files.

Now let's say that website gets 500000 views a month.

In this scenario, your webserver is serving 10,000,000 files a month.

If we simply combined the CSS into one file, we would reduce the monthly work of that server by 20%. Instead of having to serve 10,000,000 files a month, we could remove 2,000,000 of those file transactions every month.

No fancy web server specialists required, no meetings need be scheduled, no consultants necessary.

You just need to combine your CSS.

Less calls = faster server

By removing those extra calls, you are not just receiving a benefit for that particular pageview, you are getting a benefit for all your web traffic as a whole.

Most of the best practices for pagespeed have a positive affect on how well your server works overall, meaning...

  • You website is less likely to crash during high traffic periods
  • There is less hosting cost
  • Your server is more likely to respond robustly (quickly) to all requests

Patrick Sexton by