Matt Fielding leads a HTML5 class

Optimise your CSS

Photo of Matt Fielding
Thu, 2016-04-28 17:18By matt

Even if you are an experienced front end developer who structures CSS files coherently, concisely and into something that resembles fine art, there are still ways of squeezing a little more performance out of your CSS files by reducing their file size using post processing.

I've been playing around with a few tools to help with this.

Imagine we start with a stylesheet for a small website. The CSS file is approximately 27kb with no vendor prefixes, minification or gzipping.

Screenshot of file size

A typical CSS class selector in one of Sass partial file may look like this.

// Un-compiled Sass
.cs-List {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  list-style: none;
  width: 100%;
  padding-bottom: 3rem;
  border-bottom: 1px solid $medium-grey;
}

Fairly simple. You'll notice that there's no particular order to the rules, and it could be better optimised.

It's rendered out like this.

/* Rendered CSS */
.cs-List {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  list-style: none;
  width: 100%;
  padding-bottom: 3rem;
  border-bottom: 1px solid #848484;
}

If we now add vendor prefixes using Autoprefixer We get this:

/* Autoprefixed CSS */
.cs-List {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  list-style: none;
  width: 100%;
  padding-bottom: 3rem;
  border-bottom: 1px solid #848484;
}

OUCH! Our CSS file jumps to 97kb in size

Screenshot showing CSS file size

Don't panic! By delivering the CSS files Gzipped from the server will remove a lot of the size due to the repetitive nature of the vendor prefix code.

Screenshot showing CSS file size

We can however look at ways of making this more efficient by using a grunt/gulp/postcss task to sort the css rules into a familiar order before gzipping it up.

I'll use CSS Comb for this demo. There are a few different sorting styles like Zen coding and Yandex BEM but i'll use the default CSSComb settings.

If I pass the vendor prefixed code through CSS Comb and then GZip I get

/* Autoprefixer and CSS Comb */
.cs-List {
  margin:0;
  padding:0;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap:nowrap;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:stretch;
  -webkit-align-items:stretch;
  -ms-flex-align:stretch;
  align-items:stretch;
  list-style:none;
  width:100%;
  padding-bottom:3rem;
  border-bottom:1px solid #848484;
  }

The CSS file is a bit smaller due to some of the optimisations that CSS Comb made. However when Gzipped, it would appear that there is zero benefit.

Screenshot showing CSS file size

The CSS file is a bit smaller due to some of the optimisations that CSS Comb made. However when Gzipped, it would appear that there is zero benefit.

Let's try something else. Let's run the Style.css file through CSS Min

/* Run Autoprefixed and CSS Combed CSS through CSS min */
.cs-List{margin:0;padding:0 0 3rem;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;border-bottom:1px solid #848484}

You can see CSS min - which is based on Clean CSS Has stripped away a considerable amount and taken the file size down to 28kb. Amazingly the Gzipped file size is now only 4kb, That's a quarter of the size it started out as.

Screenshot showing CSS file size

If I remove the CSS comb process the final Gzipped file size remains the same, so it's safe to say that CSS Comb or any CSS sorter isn't necessary if using Clean CSS last in your stack.

Final thoughts

Clean CSS is certainly worth adding to your list of tools if you want to shave your CSS files down as much as they can go. Combined with GZip compression on the server, it can offer a big performance boost.

If you are taking an ECSS approach to stylesheet writing to keep your CSS components self quarantined, then you will no doubt have a fair bit of repetition in your code so minification and GZip are vital.

Using CSS Comb or any other CSS organiser after compiling CSS is of little use. It's more useful to use a CSS organiser like CSS Comb in your text editor or IDE to keep consistency when multiple people contribute to one project.