How to minify CSS in WordPress

Modern browsers perform quite an impressive task, pulling together HTML, CSS, Media and JavaScript to provide you with a beautiful output in real-time. Visitors to your site don't appreciate the hard work, though, unless the page loads quickly and without any problems. In fact, about half of all website visitors will leave your site if it doesn't load within two seconds.

When someone requests a page from your site, a few things happen:

1. The domain name is looked up, and the browser is directed to your host.
2. The host looks up your domain and directs you to your site.
3. Your site HTML is downloaded to the browser.
4. The site HTML contains references to CSS, JavaScript and media items that are downloaded.
5. The browser will cache the files so that it need not reload it if used by another page.

A best practice is to remove or minify CSS references in your HTML — whether it’s a style section in the head of the page or inline styles applied throughout the page elements.

The problem with style sections and inline styles is that they will be loaded every time with the page and never cached by the browser. This will slow your page loading times unnecessarily.

In order to speed up your site's loading time — especially on the first visit — it's imperative that your HTML, CSS and JavaScript be written so that the files are as small as possible. Minimizing the file size reduces the time for them to be downloaded. Media can be compressed, too, but that's for another article.

What is CSS minification?

Minifying CSS is the process of removing unnecessary characters from a CSS file, thus reducing the file size and increasing the speed at which a visitor can download your page.

For these examples, we're going to utilize the famous Twenty Fifteen theme from WordPress. The original CSS stylesheet (style.css) is 102,951 bytes. This is a fairly small CSS file already, but it's not fully minified so we can shave off some of the load time.

Some minification techniques are fairly simple – like removing notes and whitespace – and some are very aggressive – like utilizing shorthand. We’re going to adjust our minification efforts at four levels of aggressiveness to show what the overall impact is. You can download all the example files here.

1. Original —this stylesheet has no minification (style.css)
2. Low — maintains the high readability of your CSS (style-low.css)
3. Standard —maintains a balance between readability and smaller file size (style-standard.css)
4. Moderate — moderate readability and smaller file size (style-moderate.css)
5. High — no readability and smallest file size (style-high.css)

Ways to Minify CSS in WordPress

Remove unnecessary CSS

Over time, CSS files often become unruly and large as developers add CSS for different pages or integrations that may no longer be utilized. There are some tools on the web to identify declarations no longer in use. Be careful, though! Many times CSS declarations may be included for unique pages, tools, or media types that these tools can not identify.

Removing unnecessary CSS code like duplicate or unused declarations is one of the easiest ways to reduce your CSS file size.

Watch CSS notations

CSS notation is a selector, followed by properties within parenthesis, separated by semicolons. Developers often leave an unnecessary semicolon on the last property-value when writing their declarations.

body { color: #FFF;
background-color: #000;
font-size: 12em; }

Can be rewritten:

body { color: #FFF;
background-color: #000;
font-size: 12em}

It might not seem like a lot, but it can add up to hundreds of declarations and you’re saving hundreds of bytes. Minifying CSS isn’t a matter of removing the most unnecessary elements, it’s about the sum of removing all unnecessary elements.

Limit CSS comments

Developers often leave notes in their CSS so that they can understand what they did and why when they return to make edits. The problem is that many of these notes are quite verbose and can take up quite a bit of space. In the example of WordPress, you’ll see that the developers even included a table of contents with notes documenting every section.

Notes in CSS start with a /* and */ to indicate to the browser that everything in between can be ignored

/**
* Table of Contents
*
* 1.0 - Reset
* 2.0 - Genericons
* 3.0 - Typography
* 4.0 - Elements
* 5.0 - Forms
* 6.0 - Navigations
* 6.1 - Links
* 6.2 - Menus
* 7.0 - Accessibility
* 8.0 - Alignments
* 9.0 - Clearings
* 10.0 - Header
* 11.0 - Widgets
* 12.0 - Content
* 12.1 - Posts and pages
* 12.2 - Post Formats
* 12.3 - Comments
* 13.0 - Footer
* 14.0 - Media
* 14.1 - Captions
* 14.2 - Galleries
* 15.0 - Multisite
* 16.0 - Media Queries
* 16.1 - Mobile Large
* 16.2 - Tablet Small
* 16.3 - Tablet Large
* 16.4 - Desktop Small
* 16.5 - Desktop Medium
* 16.6 - Desktop Large
* 16.7 - Desktop X-Large
* 17.0 - Print
*/

These notes take up about 10 percent of the total file! While the first note section with name, link, author and description are key for properly displaying theme information in WordPress, the additional notes throughout the CSS file are unnecessary and will slow down the load time as the larger file must be downloaded.

Update CSS colors

Often, colors are defined in red, green, blue format. Replacing RGB values with hexadecimal notation can minify your CSS. HEX notation is 3 double digit numbers starting with a # sign.

body { color: rgb(192, 192, 192) }

Can be written:

body { color: #C0C0C0 }

If the digits of your HEX value are sets of pairs, you can minify the value by just writing your first value of each pair.

body { color: #FFCC00 }

Can be written:

body { color: #FC0 }

Use CSS shorthand

One fantastic way to minify CSS is to utilize shorthand versions of declarations. Here are the most common:

Background

body { background-color: #FFF;
background-image: url(images/background.jpg);
background-repeat:no-repeat;
background-position: top right; }

Can be written:

body { background: #FFF url(images/background.jpg) no-repeat top right }

Font

code { font-family: "Andale Mono", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1; }

Can be written:

code { font:400 16px/1 "Andale Mono", sans-serif }

Border

div { border-width: 1px;
border-style: solid;
border-color: #888; }

Can be written:

div { border: 1px solid #888 }

Any CSS properties that have top, right, bottom and left declarations that are the same can be repeated by stating the value once. The most common are margin, padding and border. The order is always clockwise starting at the top.

Margin (same value)

div { margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px; }

Can be written:

margin: 10px;

As you apply CSS, it’s not uncommon that the left and right value are the same as well as the top and bottom value. In this case, you can write the paired value:

Margin (paired value)

div { margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px; }

Can be written:

div { margin: 5px 10px }

It’s also not uncommon that the left and right value are the same, while the top and bottom value are different.

Margin (left and right paired)

div { margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px; }

Can be written:

div { margin: 10px 10px 5px }

As with margin, you can also apply the same strategy to border to minify border-top, border-right, border-bottom, border-left declarations and padding to minify padding-top, padding-right, padding-bottom, padding-left declarations.

List-style

ul { list-style: square;
list-style: url(img/square.jpg);
list-style: outside; }

Can be written:

ul { list-style: square url(img/square.jpg) outside }

Note: CSS transitions and transforms also have shorthand but aren’t as commonly used nor supported throughout all browsers. You can learn more and see full documentation on CSS here.

Remove unnecessary CSS whitespace

Just by applying these shorthand declarations, we were able to reduce the file by 16.4 percent. If we step up the minification and remove unnecessary whitespace within the file, we can see a 23.24-percent reduction in file size. In this case:

table
{
border-collapse:separate;
border-spacing:0
}

Can be written:

table {
border-collapse:separate;
border-spacing:0
}

Step up another level and you'll see a 30.39 percent reduction in file size. This version moves all properties to single lines and removes all spacing.

table
{
border-collapse:separate;
border-spacing:0
}

Can be written:

table{border-collapse:separate;border-spacing:0}

Take it to the maximum minification and you'll squeeze your overall CSS file 31.89 percent! This squeezes every setting throughout the CSS file into a single line of code, removing all whitespace and carriage returns from the file.

body{color: #000;background-color: #FFF}
table{border-collapse:separate;border-spacing:0}

Can be written:

body{color: #000;background-color: #FFF}table{border-collapse:separate;border-spacing:0}

It's important to keep in mind that there is no functionality loss when minifying your CSS file.

Ultimately, minifying CSS is abbreviating CSS properties utilizing standard CSS rules and removing any unnecessary characters within the file. Reducing your CSS by 31.89 percent is no small feat and can have a dramatic impact on your readership and even your ability to convert a visitor into a customer.

CSS minification tools

There are several tools available that can help minify CSS, including CSS Compressor (used for our example above), CSSminifier and CleanCSS. Be sure to test your stylesheet across multiple pages, browsers and a mobile device after you’re done – some of these automated tools can inadvertently remove styles that are critical for optimal viewing.

CSS minification checklist

Let’s put our actions in order so that you can check off each as you work to minify CSS:

1. Remove unused CSS declarations.
2. Remove duplicate CSS declarations.
3. Remove comments (if you’re on WordPress, leave the initial theme comments).
4. Remove unnecessary semicolons left in the property array for each selector.
5. Update colors to HEX and utilize shortened HEX codes where possible.
6. Apply shorthand on margin, padding, border, list-style, font, and background properties.
7. Remove unnecessary whitespace.
8. Remove unnecessary carriage returns and line feeds.

CSS best practices

Don't throw away that CSS file just yet! As you continue to tweak your site and make CSS edits, it’s convenient to have both original CSS file as well as your minified CSS file. Many developers keep both on their websites so that they can continue to make edits without having to try to read through a highly minified CSS file.

Naming the files style.css and style-test.css is often a best practice. When you’re making edits and testing, you apply the style-test.css until everything is working properly. Then you can utilize one of the tools above to minify CSS, write it to your style.css file, and put that file live on your site.