Purging CSS

Something I’ve been working on lately has been reducing the CSS footprint of the Alaska Dispatch site. During the mad rush to launch it had become bloated and was failing to meet best practices. There were specificity issues, a rampant use of !important tags and the file size was getting too large.

If you haven’t read my other post on the new Alaska Dispatch site it’s recommended that you do so before continuing. It gives a top down perspective of how the platform works.

Before

Due to the way PageBuilder works, each page will generate its own CSS file which includes the necessary classes for the features that are currently in use. It will also include a second stylesheet with all global classes including frameworks. For the stats I’m about to discuss I took the final figures from the homepage before and after the optimization build was deployed, nothing was altered in between.

Homepage

150KB

Global

114KB

Both combined comes out to 264KB, which didn’t sit right with me.

Purging

The Alaska Dispatch site was built upon the Bootstrap framework. So the first thing I did was take a good look at the markup and tried to figure out exactly how much of Bootstrap was being used. Out of the box Bootstrap is really heavy, and it was the cause for over 100KB of the overall CSS.

It turned out the site was using only three Bootstrap components. Grids, buttons and a number of utility classes. Initially during the process I wanted to eliminate Bootstrap entirely, however their website has a fantastic tool which lets you strip it down for your needs. Instead I selected the components I wanted to use, and recompiled Bootstrap, turning it from almost a 100KB+ file to a 62KB file, much better.

The next thing that got looked at was the global stylesheet. There were a number of features that had unnecessary CSS properties because the global stylesheet was doing a poor job at setting standards. For instance many features had their own set of CSS properties for header sizes, font families and link colors.

To solve this I setup a rather extensive SASS file with a number of site-wide variables, like so:

// Base Font
$base-font: 'PT Serif', 'Georgia', 'Times', "Times New Roman", serif;
$base-font-color: #000000;

// Sub Header Font
$subhead-font: 'Lato', sans-serif;

// Accent Colors
$accent-color: #be0006;
$accent-color-secondary: #8c0202;
$accent-color-grey: #2F3333;

// Header H1 Tags: <h1>
$header-h1-font-size-xs: 20px;
$header-h1-font-size-sm: 24px;
$header-h1-font-size-md: 30px;
$header-h1-font-size-lg: 30px;

$header-h1-line-height-xs: 1.1em;

The next step was to then setup standards for things like header tags and links within the global stylesheet using media queries.

@media screen and (min-width: 480px) {
  h1 {
    font-size: $header-h1-font-size-sm;
    line-height: $header-h1-line-height-sm;
  }

  h2 {
    font-size: $header-h2-font-size-sm;
    line-height: $header-h2-line-height-sm;
  }

  h3 {
    font-size: $header-h3-font-size-sm;
    line-height: $header-h3-line-height-sm;
  }

  h4 {
    font-size: $header-h4-font-size-sm;
    line-height: $header-h4-line-height-sm;
  }

  p {
    font-size: $body-p-font-size-sm;
    line-height: $body-p-line-height-sm;
  }

  .excerpt, p.excerpt, span.excerpt {
    font-size: $excerpt-font-size-sm;
    line-height: $excerpt-line-height-sm;
  }
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: $header-h1-font-size-md;
    line-height: $header-h1-line-height-md;
  }

  h2 {
    font-size: $header-h2-font-size-md;
    line-height: $header-h2-line-height-md;
  }

  h3 {
    font-size: $header-h3-font-size-md;
    line-height: $header-h3-line-height-md;
  }

  h4 {
    font-size: $header-h4-font-size-md;
    line-height: $header-h4-line-height-md;
  }

  p {
    font-size: $body-p-font-size-md;
    line-height: $body-p-line-height-md;
  }

  .excerpt, p.excerpt, span.excerpt {
    font-size: $excerpt-font-size-md;
    line-height: $excerpt-line-height-md;
  }
}

After that I combed through each feature to purge any overriding and unnecessary CSS. For instance classes which set their own header sizes and font types (Unless they needed to be different) were removed and cleaned up. I also spent some time moving commonly used CSS into their own class within the global stylesheet which eliminated duplicates.

After

After quite a lot of time digging through thousands of CSS properties I was finally happy. Not only did cleaning up the CSS save space, but it also made the site a lot easier to work on and removed the guessing game when building out future features. It also fixed a number of responsive issues as time was spent standardizing things such as font sizes and line height properties.

ADN Mobile Site

After all was said and done our homepage CSS was cut down to 36KB, and the framework CSS was cut down to 62KB. Resulting in an overall CSS size of only 98KB, a 61.42% reduction. Quite the result! Of course the next thing to do is reel in content embedded by third parties (Sadly a requirement) but we’re making steps in the right direction.

Homepage

36KB

Global

62KB

As a parting note I would like to give a big shout out to csspurge.com for the inspiration behind these changes.