CODE Tips #2: Optimize and Compress Your CSS To Improve Load Time

April 4, 2012 · 6 comments

by Lars

optimize-css[3]

Did you know that shorter Loading Time –> More Visitors? Tests at both Google and Amazon have showed that even small changes to the wrong side can have serious impact on visitor count. Optimizing the heavy CSS (and for that matter JavaScript) files used on many websites is more important than you may realize.

CSS is one of the major components of building websites today. I’m not exaggerating if I’m saying it is playing a role in nearly any website online in close teamwork with HTML. Both CSS and HTML have been working hard for us for many years and right now CSS3 and HTML5 are both very hot moment and adoption is going up rapidly. The combination even is expected to take over for Flash in the area of interactive and dynamic web site effects.

The increased and widespread use of CSS3 and the growing complexity of websites makes it important for developers to keep the CSS code structured and nicely formatted. Failing here will make the application hard to maintain and team development close to impossible. Automation for preparing files for production may also be worth investing in.

Further, because CSS files keeps growing in size and numbers, it is critical that webmasters focus on how to best optimize and compress CSS files to minimize download times and number of requests per page. This is done by e.g. merging similar selectors, merging files and minifying / compressing them. For production sites with high traffic this is very important while it does not belong in development where developers must be able to read and edit the code effectively.

There are some very useful tools and guidelines worth knowing when dealing with CSS. In this article I have collected some of the best I know of.


ElegantThemes
ThemeForest

Advertisement

Start checking your site performance

You can use tools like YSlow, or Google Page Speed Insights to analyse your site and find out what files need some work.

As an example (found on Smashing Magazine) you can see what it may do to your website performance when CSS and JS files are merged and compressed.

not-optimized

In this example, the loading time was reduced by 33%, the transferred data size was reduced by 65% and the number of requests to the server even by 80%.

optimized

Combine all CSS files into single file

As you can see above it is important to reduce HTTP requests. It does not make the amount of data to be downloaded smaller but it is a great start. The CSS Preprocessors (see next) can help you manage this in a busy development environment. If using platforms like WordPress it is pretty hard as themes and plugins add CSS files all over the site… Good for us plugins like W3 Total Cache can automate the entire combine and minify process behind the scnene!

Consider Resource Loader for Conditional Loading of Assets

Sometimes we need to rely on “Polyfills” to provide compatibility for old browsers – meaning that resources are loaded to fill in gaps for “missing features or capabilities” in e.g. IE8. Resource loader scripts like yepnope.js (available as part of Modernizr) can be helpful here to only include extra CSS when needed. Modernizr itself is a very popular feature detection tool.

modernizr

Use CSS Preprocessors for Automation and Smarter Coding

One of the problems programmers face with CSS is the lack of variables, constants and a general faster syntax. This really invites for bad coding and redudant code. Not good for minimizing CSS and lod times at all! For maintenance it is also a lot easier to have e.g. a heavily used color set in one variable (e.g. @color: #4D926F; ) and not 25 time throught the CSS code.

Since CSS does not natively have e.g. variables some clever people created preprocessors to allow the use of variables on CSS files and then use the preprocessor to parse it to regular stylesheets.

Turbine (PHP)

PHP is pretty popular as CMS platforms like WordPress, joomla and Drupal (and many more) have been build using PHP… So many web site programmers know and like PHP.  Turbine is a CSS preprocessor made for PHP. It allow a minimal syntax, automatically gzip multiple css, fix cross-browser issues, and a lot more.

turbine

Less CSS

LESS is probably the best known and also oldest CSS preprocessor I know of. It extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

less-css

Sass

Sass is well known CSS3 preprocessor, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. You can try it online here.

sass-css

Online CSS Optimizer Tools

While there are tools available online and I’ll share a few here you may have the capabilities already in your IDE or text editor. The main disadvantage with these tools is that automation is pretty hard. It is smarter to have the desired formatting and and optimization applied on save. However some of the tools here have nice features and is word checking out.

prefixr

This very cool CSS Tool helps you create Cross-Browser CSS pretty easily, but it can also compress your code.

prefixr

CleanCSS – CSS Formatter and Optimiser

A cool online CSS-tool to optimize and format CSS code. Keep in mind that the code is changed in the way that the same selectors and properties are automatically merged. There is a number of different compression options raning from low (readable code) to high (not readable).

Note that your code need to have correct syntax. This isn’t a validator which points out errors in your CSS code.

You can use your own compression template if you like but I guess it is for hardcore webmasters!

clean-css

CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

css-compressor

Tabifier

A tool to properly indent HTML, CSS etc. The tabifier currently supports CSS, HTML, C Style code and JSON. JavaScript and PHP both fall into C style category. This is useful if you have some CSS that is all messed up and want to make it look nice before a release.

tabifyer

CSS Beautifier

Offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.

css-bueatifier 

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

 

{ 4 comments… read them below or add one }

Agung Wiseso February 8, 2013 at 10:05 am

This tips can make the website load so fast. Nice tips.

Reply

EuroSignUp April 7, 2012 at 3:32 pm

A string of CSS preprocessors. This is very useful and I see the tools more valuable for CMS web sites.

Great research work.Thanks.

Reply

vinod April 6, 2012 at 7:43 am

nice tip very use ful for me

Reply

Rian Ariona April 4, 2012 at 3:36 am

Nice CSS tips, great collections tool :) thanks for sharing Lars.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 2 trackbacks }

Previous post:

Next post:


Web Analytics