Search
Close this search box.

WP Buffs Blog |

How to Minify CSS in WordPress to 2x Your Website Speed

How to Minify CSS in WordPress

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.

minify CSS

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.

Our team at WP Buffs helps website owners, agency partners and freelancer partners monitor their WordPress sites 24/7. Whether you need us to manage 1 website or support 1000 client sites, we’ve got your back.

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 is 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.

Screenshot of Dans Tools CSS Minifier

Jakub Pawlowicz has a tool that allows you to upload your CSS file into the minifier.

Screenshot of Jakub Pawlowicz Clean CSS tool

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 all 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:

Screenshot of Google PageSpeed Insights

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.

SaveSave

If you enjoyed this article, then you’ll really enjoy the 24/7 WordPress website management and support services WP Buffs’ has to offer! Partner with the team that offers every aspect of premium WordPress support services.

From speed optimization services, to unlimited website edits, security, 24/7 support, or even white-label site management for agencies and freelancers, our expert engineers have your back. Bring us in as part of your team to make your site Bufftastic! Check out our plans

Curious about what we do?

Honed and proven strategies we've used successfully 500+ times to help you sell your first care plans. Action steps you can implement in minutes.

No thanks, I can already sell as many care plans as I want.
How to Sell Your Very First Care Plans Cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Finally, an email list that helps make WordPress simple and effective for you.

Speed & security optimization tips and detailed how-to guides with advice you can implement today.

No thanks, I already know everything about WordPress.
Speed checklist eBook cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy. By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Case study eBook cover (Rigorous Digital)
Case study eBook cover (MEP Publishing)
How to Sell Your Very First Care Plans Cover

Finally, get your website 99.9999% secure and loading in under 1 second.

Our free eBooks and easy-to-follow checklists will have your website fully optimized in just a few hours.

No thanks, my website is as fast and secure as I want it.

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy. By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

How to Sell Your Very First Care Plans Cover

Read about how we increased Rigorous Digital's profit margin by 23% and helped remove all website issues for MEP Publishers and their 3 complex websites.

Case study eBook cover (MEP Publishing)
No thanks, I don't need more profit and I can tackle all my WordPress issues myself.
Case study eBook cover (Rigorous Digital)

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.