Vnoam3d / stock.adobe
When people visit your website, they expect each web page to load quickly. If it takes a long time to load, then people will leave your site and see what your competitors have to offer instead.
It may seem like such a small thing, but it’s critical in keeping your website visitors engaged. This helps turn them from visitors into leads, and then from leads into paying customers.
You also want people to find your website in search engines, right? Google has many different criteria for how it determines where your website shows up in its rankings.
Website speed is one of those criteria.
There are many things you can do to increase your website load speed. This includes optimizing your files, including images, CSS, and JavaScript so that they are as small as possible.
You can optimize your CSS by minifying it. If you’re more technical, you may want to do this manually. If you consider yourself non-technical, there are WordPress plugins that minify CSS for you – some of the best WordPress minify plugins are listed below.
The What and Why with Minifying CSS 🔍
Your CSS stylesheet is a file with text in it. As with all other files, it has a particular file size. It could be as small as five kilobytes and as large as multiple megabytes.
Minifying CSS helps make the file size as small as it can possibly be.
If you’ve ever seen a typical CSS file, then you’ll see that there are lots of whitespace and comments. This is good for developers, because it helps keep everything organized and readable. It serves you well when you’re developing code because it helps you work more efficiently and effectively.
However, the whitespace and comments are not needed to actually work on the website. All you need are the CSS commands themselves.
For example, you may have a table of contents at the top of your CSS file that looks like this:
/*------------------------------
>>> TABLE OF CONTENTS:
--------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
# Layout
## Links
## Menus
------------------------------*/
However, that table of contents isn’t needed for the actual website to work properly. It simply helps you keep things organized when you’re developing the code.
Anything between /* and */, which start and end comments, are not needed on the live website. Their presence simply adds to the file size.
Now let’s take the following block of CSS, which is not a comment and is needed for the site to function properly:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
All of the spaces, indentations, and line breaks are not needed for the actual site to work. They simply make the code more readable for developers.
Now let’s see what that CSS looks like minified:
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
Everything unnecessary for the site to function is removed, and your file size will become much smaller. Smaller file size = faster load time.
Ways to Minify CSS for Implementers and Users 🖊️
If you are not a professional developer, then you can still minify CSS in simple, easy-to-use ways. Whether you install WordPress and configure plugins for others, or you’re a user who has DIY’d your website, you can take advantage of the benefits that CSS minification offers.
If you ever make modifications directly in your CSS file, then make sure you always have a non-minified copy available. Trying to edit a minified CSS file is an incredible, unnecessary headache.
Therefore, if you are minifying your CSS for the first time, make sure to save a non-minified copy of it.
Online Tools
You can use online tools to minify CSS. Dan’s Tools CSS Minifier allows you to copy and paste your CSS into a textbox and push a button to minify it.
Jakub Pawlowicz has a tool that allows you to upload your CSS file into the minifier.
WordPress Plugins
WordPress plugins can also help you minify CSS. WP Super Minify is the plugin that is the most up-to-date and compatible with the latest version of WordPress as of this writing.
I found several other plugins, but they have not been updated in at least a year and don’t show compatibility with the latest version of WordPress. Therefore, I can’t recommend them to you.
Ways to Minify CSS for Developers
If you are a professional web developer, then there are two main ways to easily minify your CSS.
The Beauty of Task Runners
Task runners help automate many of the tasks that need to be done so you can get your work done more efficiently. Grunt and Gulp are the two best-known task runners. Grunt has a package that minifies CSS, and Gulp does as well. I use Gulp in my own workflow, and Gulp Clean CSS works quite well for me.
If you use a CSS preprocessor like SASS or LESS, then your task runner will likely have a separate module for compiling the CSS. You can use the minifying module in tandem with it.
For example, this is the barebones code that I use in my main Gulpfile.
Using a CSS Preprocessor
If you use SASS or LESS and don’t use a task runner, then your compiler should be able to minify CSS as well. Before I discovered Gulp, I used Compass as my SASS compiler. In your Compass config.rb file, you can simply set the output settings as compressed. Your SASS files will remain uncompressed, and the compiled CSS will be minified.
If you don’t like the command line and prefer to use GUI-based development tools like CodeKit, you can set the output to “compressed” or “compact” or whatever the setting happens to be.
Testing Page Speed Improvements
If you want to know just how much minifying CSS speeds up your website, then you can use a speed testing tool. You should try multiple testing tools to see what kind of feedback they all give you. Three tools you can start with are:
These sites will give recommendations beyond CSS minifying on how you can improve your page load time.
Now Go Forth and Minify!
Minifying CSS can give you great benefits, especially when it comes to keeping visitors on your website. The task of minifying CSS does not have to be difficult with all the great tools available. Once you put this into consistent practice, then you can add other techniques to make your website load faster.
Turn your website into a speed demon one optimization technique at a time!
Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.
