The following article discusses the topic of compressing a CSS file, minifying a CSS file and unifying multiple CSS files. Compacting a CSS file can help with the performance of your web page because it basically reduces the overall size of the file that is being loaded. File reduction is normally done by removing unnecessary elements in the CSS file such as extra spaces, comments, line breaks, and indentation. Fortunately there are many tools available for compressing/minifying CSS that can help you with this task. We will list these options below.

Why should you compress a CSS file?

You should compress or minify a CSS file because it will load faster thus making your web page load faster. Cascading Style Sheets (CSS) are used to provide formatting in website pages, but they can be implemented in many different ways. Often, these files include text or spaces that are not necessary for the formatting of the website. The unfortunate byproduct of these additions to a CSS file is the increase in the file size of that CSS file. This increased file size can lead to a decreased performance of a web page. We are not saying that the documentation should not be there, but by removing the documentation you may improve the performance of the web page because you are making the CSS file smaller.

Multiple CSS files

CSS code can also be saved into multiple files. Keep in mind that each CSS file must be loaded before the page can be displayed in an internet browser. This causes an increase in the time to load the page. If possible, it's best to unify multiple CSS files into a single CSS file. This keeps the web browser from having to go through multiple CSS files.

Inline CSS

You will often also see CSS directly in a HTML document. This is known as inline CSS. Basically, you're simply putting CSS code directly in the same document as your HTML. Inline CSS commands improve on performance because they do not load a CSS file. However, you should only use inline CSS commands when the CSS code is minimal. If you find yourself having to include several lines of CSS code in your HTML document in order to format the web page, then the CSS code should be in a central CSS file.

How to compress a CSS file

As per the example below, you can manually go through a CSS file in order to remove unnecessary elements. You compress a CSS file by removing unnecessary spaces, comments, or other unnecessary indents to reduce the file size. You can also use an online tool to compress large CSS files.

Example of CSS code with documentation

 
 body {
 
      /* Background color of the screen is WHITE */

      background: white;
      
      /*This section determines the color of URLs on the page depending on their status */

      a:link { color: #0000ff }
      a:visited { color: ##800080 }
      a:active { color: ##008000 }
      
     /* Font size is extra large and is colored  */
      h2 {font-size: x-large
          color: blue;

      }

NOTE: This is a very simple example of CSS code. Typically, if you have a large file of CSS code and it's full of unnecessary text, then you should take the time to compress it. Here's the same code with the documentation and spaces removed:

 body {
      background: white;
      a:link { color: #0000ff }
      a:visited { color: ##800080 }
      a:active { color: ##008000 }
      h2 {font-size: x-large
      color: blue;
      }

The remaining code above can be minified even further by removing line breaks and spaces. Eventually it would look like the following:

body{background:#fff;a:link{color:#00f}a:visited{color:##800080}a:active{color:##008000}h2{font-size:x-large color:#00f}

As you can see, it becomes a lot harder to read in this form, but its compacted size makes the file quicker to load. To make it easy for further development or refinement, it's always a good practice to keep a copy of the CSS file in an uncompressed state.

Tools for Minifying your CSS

There are also many free tools that you can use to compress a CSS file. Some of them are online, while others, such as the Yahoo YUI Compressor, can be downloaded and installed on your computer for use. To find these tools, search for "minify CSS" in your favorite search engine. Here's a short list of what you may find:

There are many more options that you can choose to compress your CSS code. However, to help determine or grade your code to see if it requires minifying, check out this tool from Google: CSS Delivery Tool. You can use it to check and see if your code needs optimization. Also, after you have finished compressing the CSS file, you can use the tool to see if it helped! While you're on the page for the CSS delivery tool, make sure to review the Google Guidelines, Pagespeed, and the other free tools that Google provides for website development.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200948

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!